階層メニュー FOLIOLE 特長

FOLIOLE の長所

シンプルが FOLIOLE のモットーです。
シンプルなスクリプトとシンプルなデータ構造のために，多くの作業が楽に進みます。
データ構造が単純なため，メンテナンスや投稿によって刻々と書き換わるテキストファイル ( CSVファイル ) を読み取り，リアルタイムに表示する階層メニューが，わずかな PHPスクリプトから作り出せます。

配列型のデータ項目

装飾にテーブルを使用

パンくずリストやサイトマップを簡単に書き出し

ラベルの見栄え

HTML ファイルに直書き可能

絶対位置にしか置けない

コンテナ・セルごとの長さを指定できない

トランジション・フィルター・アニメーションに対応していない




			FOLIOLE の長所シンプルが FOLIOLE のモットーです。シンプルなスクリプトとシンプルなデータ構造のために，多くの作業が楽に進みます。データ構造が単純なため，メンテナンスや投稿によって刻々と書き換わるテキストファイル ( CSVファイル ) を読み取り，リアルタイムに表示する階層メニューが，わずかな PHPスクリプトから作り出せます。
			配列型のデータ項目 FOLIOLE の特長 - 他の階層メニューともっとも異なるところ - は，データ項目の構造にあります。データ項目全体を， JavaScript の配列の形で記述するので，その後の操作がとてもラクになります。 FOLIOLE は，データ項目全体を配列の形で受けるわけですが，このことが以下に書く特長の源泉になっています。設置方法を参照してください装飾にテーブルを使用他の階層メニューともっとも異なるところはもうひとつあります。それは，メニューの枠線や仕切線にテーブルセルを使っていることです。各コンテナはテーブルとほぼ同義で，メニューの各セルがテーブルの <TD> に相当します。さらに，セルの周りの修飾もすべて <TD> で組み立てました。これはテーブル本来の使い方ではありません。本来なら，スタイルシートを使うのが筋です。しかしテーブルならブラウザによる解釈の違いがありませんから，プラットフォームの違いや，ブラウザのバージョンアップにもわりと無頓着でいられます。事実，スクリプト内でブラウザの振り分けは，ほとんど行っておりませんが，MacOS9/Netscape/7.02 でも Linux/Mozilla/0.9.9 でも Windows XP/Internet Explorer/6 でもまったく差異はありません。自動生成さきに書きましたが，FOLIOLE に読み込ませるデータ項目は，全部配列の形をしています。エクセルなどで扱う CSV 形式から，この配列に書きかえるのは，スクリプト ( PHPなど ) をもちいて簡単にできます。データベースの実表で階層関係を定義しておいて，それから導出したビューからも簡単につくれます。このことは，FOLIOLE のデータ変更は，データの塊である配列に手を加えなくても，そのもとになる CSV さえ変更してアップロードすれば，自動的に変更を反映した階層関係ができあがることを意味しています。サイト管理人が CSV ファイルを変更してアップロードその後ビジターのブラウザがサイトにアクセス PHP が CSV ファイルにアクセスし，これを読み出し PHP が JavaScript のデータ項目を配列で書き出しデータをふくむ HTML をビジターのブラウザに送信ビジターのブラウザに変更後のメニューツリーを表示パンくずリストやサイトマップを簡単に書き出し FOLIOLE の全データ項目は，あるひとつの配列型の変数にすぎません。たとえば変数 a と書くだけで，1000個のデータ項目の配列を参照できるわけですので，運搬はラクです。簡単に他の関数の引数にできますし， for で回して一覧表をつくることも容易です。このように，FOLIOLE が配列型のデータ項目を持つので，このデータ項目を利用して，ナビゲーションに関する他のいろいろな方法が容易になります。ここでは関連する関数名だけをご紹介します。 FAQ を参照してくださいノートを参照してください fo_get_search() セルのコメントからキーワード検索し，ヒットしたページのリンクを書き出す HTML を返す fo_get_bread_crumbs() パンくずリストを書き出す HTML を返す fo_get_sitemap() サイトマップ ( 全データ項目樹形図 ) を書き出す HTML を返す fo_get_list() 全データ項目の一覧を書き出す HTML を返すデータ項目のメンテナンス用としては，以下のような関数があります。 fo_get_tsv_data() データ項目からタブ分離文字列を取り出す fo_get_ary_data() タブ分離文字列からデータ項目を取り出すラベルの見栄え動的なメニューの性質上，メニューのラベルには画像を使わずに済ませたいところですが，テキストラベルだけでは見栄えがいまひとつです。そこで見栄えの向上のために，ラベルの文字はテキストのままで，背景画像・枠線・仕切線をわりと細かく使えるようにしました。ただし背景画像やら枠線やらであまりごちゃごちゃと飾るとマウスイベントに対する反応がすこし鈍くなります。 sample J sample 9 HTML ファイルに直書き可能ラベルに画像を使用したり，HTML の上に全部または一部のデータを手で直接書くことも可能です。書き換えのない第1層目のラベルだけを画像にして，書き換えの多い第2層目以降のラベルをテキストにするといった方法も可能です。

			FOLIOLE の短所基本的に FOLIOLE には，「現れる・消える・飛ばす」以外の能力がありません。スクリプトはべたべたで冗長・即値・依存といった悪行が随所に光ります。そもそも，作者が美しい JavaScript を書けません。絶対位置にしか置けない FOLIOLEは，絶対位置にしか対応していないので，画面全体が中央寄せであるケースなどのように，メニューの位置がウインドウサイズに左右される場合は，位置ズレをさけるため HTML の側でくふうする必要があります。以下のケースを仮定してみます。 `コンテンツ全体の幅・・・600ピクセル FOLIOLE の幅・・・・・・600ピクセルコンテンツ全体の位置・・センタリング FOLIOLE の左端位置・・・200ピクセル` この場合，画面幅 1000ピクセルで見ている分には問題はないのですが，画面幅を 800ピクセルにリサイズすると，コンテンツ全体の左端は 100ピクセル，FOLIOLEの左端は 200ピクセルのままなので， 100ピクセルのズレが生じます。そこで，このようなイベント ( 新規読み込みやウインドウリサイズ ) が生じたときに，FOLIOLE の横位置を調整する必要があります。じっさい，この対策をすることで，横方向に相対的な ( たとえば，階層メニューと他のコンテンツが張り付いているような ) 動きが可能となります。いまご覧のページをリサイズして，左上のロゴとその下のメニューの動きが一致していることを確かめてみてください。ノートを参照してください対策を施したサンプルをいくつか作りました。別ウインドウに出ますので，ウインドウ幅をいろいろリサイズしてみてください。 sample 8 ( 典型例。すなおに中央寄せ ) sample 9 ( コンテンツ本体と左側メニューは中央寄せ，右側メニューは右寄せ ) sample 11 ( 余白を３：７でやや左寄せに ) sample 12 ( ほとんど右寄せ ) コンテナ・セルごとの長さを指定できないコンテナの長さは層ごとに決めるので，ラベルの文字数に関係なく統一されます。各セルの長さも同様です。例外として，つねに表示する第１層目だけは，各セルの長さは個別に指定できます。トランジション・フィルター・アニメーションに対応していないこの手のものはほとんど装備していません。例外としてトーン調整のための半透明フィルターだけは用意しました。Flash ライクなスライドするセルや，スクロールに追随したりドラッグするなどの機能もありません。 FOLIOLE 2.4 から縦スクロールに連動するメニューの設定が可能です。 ( 2006-10-09 ) 更新情報を参照してください