|
Ｑ そもそもFOLIOLEとは？
|
Ａ スクリプト
FOLIOLEの本体は，スクリプト ( JavaScript ) です。JavaScriptを ON にしてアクセスした場合，HTML内または外部からデータ ( 識別名，ラベル，リンク先アドレスおよびクエリ値 ) を読み込んで，階層型のメニューを表示します。JavaScriptを OFF にしてアクセスした場合は通常のリンクを表示するようにすべきでしょうが，それは JavaScript とは別の話です。
FOLIOLEは，他のどのメニュースクリプトとも共通部分は少しもありません。ほかのメニュースクリプトと比べると，機能は少なくシンプルです。安定度は未知数ですが， Windows 98 / XP や， Mac OS などのメジャーなブラウザでちゃんと動きます ( MacOSX の Safari は未テスト ) 。環境にもよりますが， CPU は 500MHz もあればじゅうぶんでしょう。
マウスのロールオーバー・ロールアウト時のリアクションは，Windows用アプリケーションのプルダウンメニューを意識しました。これがもっとも多くのユーザーになじみのあるインターフェースだと思います。できるかぎり，すばやい反応をこころがけました。
|
|
Ｑ FOLIOLEの目的は？
|
Ａ クリック数の削減
階層型メニュー表現のひとつであるFOLIOLEの目的は，ターゲットページに至るまでのクリック数の削減です。つまり，
クリックする > 数秒間待つ > ページが表示される > クリック ・・
という行程を端折るためです。
クリック数を減らすためには，選択すべき候補の数をいちどに多く表示することが考えられます。しかし，たとえば100個のリンク先を並べて掲載すれば，へたをすると画面の半分くらいは使ってしまうし，見やすさを考えて階層表現をもちいればさらに面積は増えるでしょう。
ここでFOLIOLEを使えば，ボールペン1本分のスペースで，その100個のリンクを，階層構造をもったメニュー形式にまとめることができます。
より単純にいえば，4層のFOLIOLEは，ふだん要求される4クリックを1クリックにするための装置です。たとえば，きちんと分類されている1万点の商品を掲載するサイトがあったとして，そのトップページから各商品ページまで行くには，4〜6回のクリックを要する場合が多いですが，FOLIOLEを使えば，2回のクリックで足りるようにもできるでしょう。
くどいですが，FOLIOLEの目的は，クリック数の削減であり，一覧方式はその目的を満たします。FOLIOLEは，JavaScriptを使って，階層情報を持った一覧表を折畳式のメニューに改装したものといえます。
|
|
Ｑ FOLIOLEを勝手に使ってよいか？
|
Ａ お使いください
FOLIOLE は，個人・法人，商用・非商用を問わずフリーです。改良も自由です。
 ダウンロード
|
|
Ｑ サーバ側に必要な環境は？
|
Ａ とくになし
FOLIOLEという階層型メニューを実現するだけなら，普通の Webサーバがあれば足ります。FOLIOLE自身とメニューのデータを，直接HTMLファイルのなかに書きこんでください。サーバが，外部.jsファイルを許していれば，FOLIOLEをHTMLの外に出してHTML間で共用できます。メンテナンスの容易さのため，データをHTMLファイルと別にする場合は，それをスクリプトなどで読み取るので，その動作を許す環境が必要です。データをデータベースから導出する場合には，SQLサーバが不可欠です。
というわけで，「○○するには××が必要」という一般常識の枠から出るものはとくにありません。
|
|
Ｑ ブラウザ側に必要な環境は？
|
Ａ JavaScriptとCSS
FOLIOLEは，ある水準以上のJavaScriptとCSS ( スタイルシート ) の解釈をブラウザに求めます。このことはFOLIOLEの短所に追加されることです。
Windowマシンなら，以下のブラウザで動作します。
Microsoft Internet Explorer 5 以上
Netscape 6.2 以上
Mozilla / Firefox
Opella 7 以上
インターネット白書2003 ( 発行 株式会社インプレス ) によると，アンケート調査による上記ブラウザの占有率は，合計で 97％ をこえるそうです ( 重複回答を許しているので，その他・わからない・無回答で約16％ ) 。
ただし，その他 ( 合計約7％ ) は，前掲ブラウザのローバージョンが多く，重複回答をしていない可能性があるので，これらのブラウザでJavaScriptをONにしてアクセスした場合の対策は必要でしょう。なお， 「 わからない 」 という回答のほとんどは， Microsoft Internet Explorer 5 以上だと推測されるので，問題はないと思います。
また，ACCESS_Rというサイトが，2003年5月の12,133アクセスと同年12月の7,493アクセスのブラウザを集計したところ，同占有率はそれぞれ 96.4％ および 96.5％ あり，上記の調査結果と符合します ( いずれもアクセス調査につき重複なし ) 。
Mac にかんしては，Mac OS 9 で動作確認しています。
( Mac OS X では未確認 )
Microsoft Internet Explorer 5 / 5.1.7
Netscape 6.2 / 7.02
|
|
Ｑ JavaScriptを OFF にしてアクセスしたら何が表示されるのか？
|
Ａ FOLIOLE以外の何か
ブラウザのJavaScriptは，FOLIOLEの電源みたいなもので，これが OFF だと，FOLIOLEは，まったく動きません。
本来FOLIOLEの目的は，クリック数の削減という方法で，ターゲットページへの到着を容易にすることにあります。したがって，これが動かない場合は，備えておいた通常のHTMLコードにより，その目的だけを控除した普通のリンクを残すのが自然でしょう。
あるいは，選択肢が少なければ，目的を満たす一覧方式も考えられますが，他のコンテンツとのレイアウト上の問題がありますので，JavaScriptがONの場合に占有するエリアを超えることは適当ではありません。
このあたりは，タグで解決すべきユーザビリティに属する問題であり，このメニュー表示装置とは本質的に無関係です。JavaScriptではこの問題の解決ができません。
|
|
Ｑ 画像をラベルとして使えるのか？
|
Ａ 使えます
FOLIOLEのひとつの項目あたりのデータは，識別名，ラベル，リンク先アドレスおよびクエリ値からなる配列です。ラベルにはHTMLタグが使えるので，画像を使う場合は，タグで画像の指定をしてください。マウスロールオーバーも表現できます。画像ラベルとテキストラベルの混在も可能です。
セルの外枠線や，仕切線を表示しないようにするには，メニュー生成時にこれらの値を 0 に指定してください。動作サンプルのうち sample 1 では，ラベルに画像を使っています。
ただし，画像ラベルは，項目のリアルタイムな登録・変更に対応できないため，動的に変化するメニューではむずかしいでしょう。動作サンプルの，sample 4，sample 5，sample 7，sample 8 などは，セルのラベルはテキストとテーブルタグで作り，画像は子セルの存在を示す矢印以外は全く使っていません。
また， sample 3 のように，書き換えのない第1層目のラベルだけを画像にして，書き換えの多い第2層目以降のラベルをテキストにするといった方法も多く使われます。
|
|
Ｑ パンくずリストの自動生成の方法は？
|
Ａ 生成は容易です
検索エンジンや階層メニュー経由のように，通常のリンクを経ずにたどり着いたページからのナビゲーションには，いわゆるパンくずリスト ( Bread Crumbs List ) が有用で，じっさい多くのサイトで使用されています。
FOLIOLE は，データ項目を入れ子になった配列の形で受け取る仕様ですが，この配列から識別名を探索し，探索を命じたページから層の上位 ( 根元 ) に向かって，各層のページのラベルと URL の組をリストアップすることで，系譜 ( すなわちパンくずリスト ) を生成することができます。探索は，前順走査 ( 要するに何も考えないで片っ端から ) でおこないます。
【ご注意】
以下にいうデータ項目の配列とは，識別名・ラベル・ＵＲＬの三者を要素とする配列であるデータ項目がひとつ以上集まってできた配列のことで，形としては次のようになります。
[[id1,label1,url1],[id2,label2,url2],[id3,label3,url3],・・・]
データ項目がひとつだけなら，[[id,label,url]]という形です。[id,label,url] ではありませんので念のため。
具体的には，FOLIOLE の読み込みの後に，
fo_get_bread_crumbs ( データ項目の配列, '識別名', '区切り文字' );
とすれば，パンくずリストを書きこむ HTML を返しますので，これを document.write() の引数にしてください。第1引数に入れるのは，データ項目の配列に限ります。それ以外はエラーになります。区切り文字は省略可能で，省略時は > ( > ) です。このように，大なり記号のような特殊な記号を区切り文字に使う場合は，それらの文字参照や実体参照で指定してください。
さて，このページのデータ項目の配列 ( 全体 ) は mndat， 識別名は 'faq' なので，
document.write(fo_get_bread_crumbs(mndat, 'faq'));
とすることで，パンくずリストは，
となります。このページの最上部にあるものと同じです。
ページごとにいちいち別個の識別名を設定するのはめんどう (コピペもしにくい) なので，各ファイル名を
接頭辞＋識別名＋.html
などの書式に統一し，location.pathname から識別名だけ抜き出して，引数に代入するという手もありです。
なお，こういった方法で正しいパンくずリストを得るには，データ項目の配列の中で，識別名に重複するものがあってはなりません。また，ラベルに画像などの余分な HTML を使っている層があるとパンくずリストの表示に統一感がなくなったりするので，その層のリスト化は手動でおこなうなどの手当てが必要です。
|
|
Ｑ リンク一覧表の自動生成の方法は？
|
Ａ 生成は容易です
各ページへのダイレクトなナビゲーションとして，一覧表 ( List ) が使いようによっては便利です。
FOLIOLE は，データ項目を入れ子になった配列の形で受け取る仕様ですが，この配列から全データ項目のリンクの一覧表を生成することができます。探索は，前順走査 ( 要するに何も考えないで片っ端から ) でおこないます。
【ご注意】
以下にいうデータ項目の配列とは，識別名・ラベル・ＵＲＬの三者を要素とする配列であるデータ項目がひとつ以上集まってできた配列のことで，形としては次のようになります。
[[id1,label1,url1],[id2,label2,url2],[id3,label3,url3],・・・]
データ項目がひとつだけなら，[[id,label,url]]という形です。[id,label,url] ではありませんので念のため。
具体的には，FOLIOLE の読み込みの後に，
fo_get_list ( データ項目の配列, '区切り文字' );
とすれば，データ項目の全リストを書きこむ HTML を返しますので，これを document.write() の引数にしてください。第1引数に入れるのは，データ項目の配列に限ります。それ以外を入れると空 ('') を返します。区切り文字は省略可能で，省略時は / ( 半角スラッシュ ) です。特殊な記号を区切り文字に使う場合は，それらの文字参照や文字実体参照で指定してください。
このサイトの一覧表をあえて表示すると
document.write(fo_get_list(mndat));
と書くことで
のようになります。何も考えていない様子がよくわかります。
また，この関数は，子側のツリー構造を全部引っ張り出すので，それを避け，指定層だけ表示したいときは，この関数を使わずに
for(var i=0;i<mndat.length;i++){
if(mndat[i][2]&&mndat[i][2]!='-') //紹介セルや沈黙セルは省く
document.write('<a href="'+mndat[i][2]+'">'+mndat[i][1]+'</a><br \/>'));
}
などとする方がいいと思います。次のようになります。
|
|
Ｑ サイトマップの自動生成の方法は？
|
Ａ 生成は容易です
各ページへのダイレクトなナビゲーションとして，サイトマップ ( Site Map ) は必須です。
FOLIOLE は，データ項目を入れ子になった配列の形で受け取る仕様ですが，この配列から全データ項目のリンクの樹形図を生成することができます。探索は，前順走査 ( 要するに何も考えないで片っ端から ) でおこないます。
【ご注意】
以下にいうデータ項目の配列とは，識別名・ラベル・ＵＲＬの三者を要素とする配列であるデータ項目がひとつ以上集まってできた配列のことで，形としては次のようになります。
[[id1,label1,url1],[id2,label2,url2],[id3,label3,url3],・・・]
データ項目がひとつだけなら，[[id,label,url]]という形です。[id,label,url] ではありませんので念のため。
具体的には，FOLIOLE の読み込みの後に，
fo_get_sitemap ( データ項目の配列 );
とすれば，リンクの樹形図を書きこむ HTML を返しますので，これを document.write() の引数にしてください。引数に入れるのは，データ項目の配列に限ります。それ以外を入れると空 ('') を返します。
このサイトのサイトマップを表示するなら
document.write(fo_get_sitemap(mndat));
と置けば，その場で樹形図を出力します。foliole 2.23 以降では，データ項目第11番目のコメントがあれば，それも表示します。
当然データ項目にふくまれていないものは対象外です。
データ項目第11番目のコメントを設定していても，サイトマップに表示したくないときは，第2引数に false を ( デフォルトは true ) ，リストの前のマークを取り除きたいときには，第3引数に false を ( 第2引数には，true か false を指定 ) 指定してください。
document.write(fo_get_sitemap(mndat,false,false));
なお，この戻り値は，識別名をもたないダミー項目は全部はじきます。また，自身へのリンクを持たない紹介セルや沈黙セルの場合はラベル表示のみになります。また，ラベルもリンクもなく，メニュー全体の幅などの確保のために詰め物として作ったセルでも，識別名がある以上 ( 識別名がないとセルが描写されないので無意味 ) 空白ラベルとして表示されてしまいます 。
それから画像ラベルもそのまま表示しますので，沈黙セルに仕切線の画像などを入れていると出力されてしまいます。
( 注 ) FOLIOLE 2.26 以降は，仕切線のような沈黙セルは表示されません。
( 注 ) FOLIOLE 4.2 以降は，見栄えの設定が可能です。ノートの sitemap の項を参考にしてください。
|
|
Ｑ データの重複は可能か？
|
Ａ 識別名だけは注意
FOLIOLEのひとつの項目あたりのデータは，識別名，ラベル，リンク先アドレスおよびクエリ値からなる配列です。このうち識別名は同一のコンテナ内では一意である必要があります。つまり，コンテナ ( マウスの動作で，現れたり消えたりするひとかたまりのデータ項目 ) 内で同じ名前にならないようにしてください。コンテナさえ異なれば同名の識別名が使えます。このあたりは，実際にデータ項目の配列を作成していると，そんな気がしてきます。
このコンテナと識別名の関係は，ファイルシステムのフォルダとファイル名の関係に似ています。多くの場合，同一フォルダ内での同名だけが禁じられています。
ただし，FOLIOLEのデータ項目から直接にパンくずリスト ( ひとつ上のＱ参照 ) を生成させる場合には，データ項目内全体で識別名の重複があってはいけません ( 重複があると，でたらめなパンくずリストを返してきます ) 。
なお，複数設置の場合などで別の配列名を使ったデータ項目であれば ( メニューオブジェクトが異なるので ) ，たとえ先の配列で使った識別名をそのまま使用したとしてもまったく問題ありません。また，ラベルやアドレスは，メニュー生成のアルゴリズムにかかわりません ( 識別名にしたがってくるだけのデータです ) ので，なんど重複しようがかまいません。
|
|
Ｑ ページのどの位置にも置けるのか？
|
Ａ くふうが必要です
FOLIOLE のポジショニングは，すべて絶対位置です。これは，画面幅が変化したときにも，固定位置または計算で決定した位置にしか置けないことを意味します。
中央寄せのケースのように，コンテンツの位置が画面幅に依存する場合には，画面の幅によってヨコ絶対位置 ( FOLIOLE ) とヨコ相対位置 ( コンテンツ ) にズレが生じることがあります。
いちばん簡単な方法は，コンテンツをひとつの <div> 〜 </div> タグや，テーブル内に放りこんで，そのポジショニングを絶対位置として JavaScript でコントロールしてしまうことです。コンテンツと FOLIOLE の両者のヨコ絶対位置を，画面幅という共通の値からそれぞれ適当に算出すれば，意図しないズレは出ません。画面のリサイズイベントハンドラは，<body>タグの中に記述します。画面のリサイズ時にも，メニューを含むコンテンツ全体を JavaScript を使って動かします。そのための関数 ( というかプロシージャ ) が用意してあります。この方法を使えば，コンテンツ全体が，左寄せ〜中央寄せ〜右寄せの任意の位置を維持することができます。
くわしくはノートをごらんください。
実際には整数以外の数値の処理の関係で，リサイズ時に1ピクセル〜数ピクセルの位置ずれが出ることがあります。上のコンテンツ全体とメニューのずれではありません。ウインドウに対する絶対位置のずれです。リサイズしたあとリロードするとわかります。
JavaScriptが OFF の場合またはバージョンが古い場合には，FOLIOLEの代替リンクをそのテーブルに入れてタグの属性でセンタリングすれば，どのブラウザでもズレは生じません。
対策例を sample 8 , sample 11 , sample 12 で示します。
|
|
Ｑ 同一ページに複数設置は可能か？
|
Ａ 可能ですが ( 目安は 1個 )
FOLIOLE は，同一ページ内での設置数に制限はありません。FOLIOLE では，それぞれのメニューの定義は，独立したオブジェクトの中に書かれます。ふたつめのメニューを作るには，このオブジェクトを新たに制作します。つまり，メニューのためのデータ ( 識別名，ラベル，アドレス ) の組と，カラーデータ ( 同居のメニューの流用でも可 ) を用意して，それらを組み込んだオブジェクトをもうひとつ作ることになります。なお，オブジェクト名は別々なので，データ項目自体の流用も可能です。 ( 同じメニューが複数あってもあまり意義はないですけど )
メニューを生産・描画・開閉させるアルゴリズムは共用で使えます。縦型と横型の混在も可能です。複数設置の例を sample 9 ( 2基 ) とか sample H ( 2基 ) で示します。
私はメニューの複数設置をあまりお勧めはしません。選択肢は，ひとつのメニューでまかなうのが原則だと思います。トラブルシューティングマニュアルや食事のメニューが分冊になっている場合を想像してみてください。5秒間の困惑が，ページアウトにつながりかねません。
とはいうものの，このサイトでもあちこちで複数設置がしてあるのであまり言えたものではありませんが。
Mac OS 9.0.4 + Internet Explorer 5x において，複数設置時に表示やレイアウトが乱れる場合があります ( 原因はわかりません。おなじ IE 5x でも， 5.1.7 では症状が少し軽いです。症状が出ないときもあります。 Netscape 6.2 , Netscape 7.02 では問題ありません ) 。
Mac OS 9 と IE5 との組み合わせにおけるレイアウトの崩れついて， MSNヘルプのよくある質問でアナウンスしていますが，これと関連があるのかもしれません。
なお，Mac OSX では未確認です。
|
|
Ｑ FOLIOLEの階層数の限度は？
|
Ａ 無制限 ( 目安は 4層 )
FOLIOLE は，階層数に制限はありません。10層・16層・32層構造のデータ項目で正常動作を確認をしましたが ( 16層・32層は 1階層につき 1セルの 「 一子相伝 」 でテストしました。そうでないとセルの数が莫大になるもので ・・・ ) ，おそらくそれ以外の層数も問題ないと思われます。パンくずリストも全層が行儀よく並んでいます。
とはいうものの，実際にマウスでメニューをかき分けてクリックするのに快適な層数は，4層くらいまでが限度ではないでしょうか。ＯＳやアプリケーションソフトで使われるメニューバーも階層式になっているものが多いですが，やはり4層をこえるものはあまり見かけません。
ちなみに，いま現在，各サイトで使われている階層型メニューは， ( Macromedia,Inc.のFlashによるものも含め ) そのほとんどが2層または3層で，4層のものは，たまに出会う程度です。海外のサイトでも5層以上のものは非常に少数です。正直いって私自身，2層のものがいちばん快適に感じます。階層の中でも特に単純で，一覧表に近いものがあるからだと思います。
逆に，階層構造のない1層だけのメニューとして使うことも可能で，その場合は，普通のリンクボタンのようにふるまいます。
|
|
Ｑ 親セルひとつあたりの子セルの数の限度は？
|
Ａ 無制限 ( 目安は 20個 )
FOLIOLE は，親セルひとつあたりの子セルの数に制限はありません。全部のセルにユニークなIDを配番し，マウスイベントの起きたセルの親・子およびそれ以外を判別します。
いっぽう，ユーザビリティの観点からは，一般にWeb上での選択肢の数は4個から6個が快適であるといわれています。子セルの項目も選択肢には違いないのですが，親セルを選択した結果として出てくる選択肢なので，その数倍ぐらいまでは適量ではないかと思います。もちろん場合によります。
また，一般に選択肢は，最初は少なく，層が深まるにつれて増えていくように分類をくふうすると快適になります。ショーウィンドウに並べる商品は，数着にとどめるほうが心地よく感じるのと似ています。
|
|
Ｑ FOLIOLEの全項目数の限度は？
|
Ａ 無制限 ( 目安は 100個 )
FOLIOLE は，全項目数 ( 全セル数 ) に制限はありません。これはひとつ上の Ｑ の Ａ からもあきらかです。
とはいうものの，具体的なマシンで快適に使用するための限度ならもちろんあるでしょう。
500MHz 程度のマシンをもちいて層数と項目数をいろいろ変えて試行してみましたが，マウスイベントに対する反応速度を重視するなら，100項目以下をひとつの目安にされるのがいいと思います。実際の企業のWebサイトでも，20〜100くらいが多いみたいです。もちろん，1000でも問題はないと思いますが。項目数が500を超えるサイトで使っていただいている例もありました。
|
|
Ｑ Internet Explorer 4.x や Netscape 4.x で動かないが？
|
Ａ 仕様です
残念ですが，以下の理由により，表記ブラウザへの対応はしておりませんし，その予定もありません。
( 1 )
|
表記ブラウザは，ともに標準化に至らない独自のＤＯＭ思想をもち，これらを同時に満たすスクリプトがいたずらに冗長化しがちであること。
|
( 2 )
|
Internet Explorer 5 はデビューより10年，Netscape 6 は同7年が経過しており，それより古い表記ブラウザのユーザーが著しく少数であること。上記バージョン番号からのアップデートについて，これらが高いマシン性能を要求するものではなく，無償かつ充分な機会をもって提供され続けていること。メーカー製のパソコンでは多くの場合，最新のブラウザがプリインストールされていること。
|
( 3 )
|
表記ブラウザユーザーには，代替措置として通常のリンクを設置すれば，一覧方式によるクリック数の削減という FOLIOLE の目的だけを控除したページを提供できること。
|
|
|
|
|
