|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
カスタマイズには，適当に作って，あるいはサンプルをいじくり繰り回すのが，もっとも手っ取り早いです。
「 考えてから作る 」 ではなくて， 「 作ってから作る 」 がコツです。
FOLIOLE の設置方法
次のステップ 1 から 6 に分けて設置方法のご説明をします。なお，ページの途中に設置例で使用するメニューのサンプルを置いておきます ( Macintosh ＋ Microsoft Internet Explorer の場合を除く ) 。
■ ステップ 1 ： FOLIOLE本体を設置
■■ ステップ 2 ： メニューのデータ項目を設定
■■■ ステップ 3 ： メニューの色を設定
■■■■ ステップ 4 ： メニューの形状を設定
■■■■■ ステップ 5 ： メニューを書き出し
■■■■■■ ステップ 6 ： メニューを閉じる設定その他
|
|
|
|
|
|
|
はじめに，適当に HTML ファイルを作ってください。
DOCTYPE 宣言については，
- 何も書かずに <html> タグからはじめる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
と書く。 (システム識別子を添えると onscroll イベントを拾わないようなので)- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書く ( 上の宣言のシステム識別子が省かれている ) 。
のいずれかにしてください。なお，HTML文書にかんしては，DOCTYPE 宣言をしないことによる表示不良は，現行のブラウザでは見当たりません。
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
と書いたり，
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
と書いたりすると
ブラウザによっては ( Netscape7, Firefox1.06, Opera7 など ) 表示が乱れます。このとき，多くのブラウザは標準モードで動作しています。
管見では，標準モードでは，<td> タグの height 属性，および CSS の height 属性として小さい値を与えても，ある値 ( 15, 16, 20 など，ブラウザによって異なる ) 以下では，無視されるようです ( たとえば，高さ1ピクセルのデータセルが表示できなくなるなど )。
これにより FOLIOLE では，セルの回りの枠線や，仕切り線の表示に影響が出るので，このモードは避けてください。ただし，Internet Explorer のみを想定していたり，セルの枠線幅や仕切り線幅を 0 にするケースでは問題ありませんが。
さらに，いっぱんに日本語を含む外部JavaScript を読み込むケースでは文字コードセット ( charset ) の指定で注意が必要です。
アクセスするブラウザやそのバージョンによっては，HTML本体と外部JavaScript ( 含コメント ) の文字コードが原因でエラーや文字化けを引き起こしたりします。これらはブラウザの仕様によるものであって， JavaScript の側からはブラウザ・バージョンの振り分けくらいしか解決方法がありません。最大公約数的には，次の方法をおすすめします。むろん外部JavaScript に日本語が含まれなかったり， HTML に直書きする場合は無関係です。
外部JavaScript の中に日本語を含む場合は，HTML本体と外部JavaScript の文字コードを SHIFT_JIS に統一する。
これでエラーや文字化けの出るブラウザはもうないとは思いますが，万一出る場合には，日本語をふくむスクリプトは，外部JavaScript として読み込まずに，HTML ファイルに直書きしてください。なお， FOLIOLE本体は本文・コメントとも日本語はふくみません。
HTMLの文字コードが EUC になるのは，サーバーサイドスクリプト ( SSS ) からの出力の場合が多く，データ項目も外部JavaScript を使わず， SSS で組み立てることが多い ( ブラウザから見たら直書きと同じ ) ので問題はないと思います。
HTML ファイルができましたら，次のステップ 1 から次のステップ 6 までで完成です。各ステップを簡単に説明します。
|
|
|
|
|
|
|
|
|
|
|
|
各ステップ詳細 1 〜 6
■ ステップ 1 ： FOLIOLE本体を設置
■■ ステップ 2 ： メニューのデータ項目を設定
■■■ ステップ 3 ： メニューの色を設定
■■■■ ステップ 4 ： メニューの形状を設定
■■■■■ ステップ 5 ： メニューを書き出し
■■■■■■ ステップ 6 ： メニューを閉じる設定その他
|
|
|
|
|
|
|
|
|
|
|
|
■ ステップ 1 ： FOLIOLE本体を設置
HTML ファイルの <head> 〜 </head> タグ内に，本体 foliole.js を読み込みます。 HTML ファイルから見た foliole.js までの相対パスも適当に指定してください。本体の内容をこのエリアへ <script> 〜 </script> タグで囲んで直接書きこんでもＯＫです。いずれにしても， FOLIOLE 関連のスクリプトの中では，いちばん先頭に置いてください。
[ 例 ]
<script src="../js/foliole.js"></script>
|
|
|
|
|
|
|
|
|
|
|
|
■■ ステップ 2 ： メニューのデータ項目を設定
同じく <head> 〜 </head> タグ内の <script> 〜 </script> タグ内に，データ項目を書きこみます。外部JavaScript を作成して，それを読み込んでもＯＫです。以下は3層のデータの例です。左下方に参考品のメニューを置きます ( Macintosh ＋ Microsoft Internet Explorer の場合を除く ) 。
データ項目は， [ 識別名 , ラベル , ＵＲＬ ] が基本です。
|
使用できる文字
|
| 識別名 |
[A-Za-z_]+[A-Za-z0-9_]* (最初の文字は数字はNG) |
| ラベル |
文字列または文字列を返す式 |
| ＵＲＬ |
文字列または文字列を返す式 |
【ご注意】
- 識別名は，半角の英字またはアンダーバーで始まる半角英数字だけからなる文字列を用いてください。スペースまたは全角文字を含むものや，JavaScriptの予約語を用いることは避けてください。
- 識別名は，互いに重複しないようにしてください。兄弟どうし ( 下の例では， 'japan' と 'korea' や， 'tokyo' と 'kyoto' のような位置関係 ) でさえなければ，識別名の重複もかまわないのですが，正確なパンくずリストを作るために，重複は避けてください。
- ラベルには HTML タグが使えますので画像などの指定ができますが，パンくずリストが乱れますのでテキストオンリーをおすすめします。うまく両者を並立させるには，たとえば画像ラベルは第1層のみにどどめ，パンくずリストは第2層目以降から表示するなどの方法があります。
- 識別名・ラベル・ＵＲＬとも，変数や関数の戻り値などを使う以外は，すべて文字列 ( 正確な入れ子関係にあるシングルクォート・ダブルクォートが必須です ) をお使いください。ただし識別名をドットで繋ぐ ( JavaScript の識別子としてあつかう ) 場合はクォートは付けません。
こんかい，データ項目の配列の名前は areadata としましょう。
[ 第1層目の定義例 ]
var areadata = new Array(
['japan','日本','./area.html?japan'],
['korea','韓国','./area.html?korea'],
・・・・・
['china','中国','./area.html?china']
);
[ 第2層目の定義例 ]
areadata.japan = new Array(
['tokyo','東京','./area.html?tokyo'],
['kyoto','京都','./area.html?kyoto'],
・・・・・
['koube','神戸','./area.html?koube']
);
areadata.korea = new Array(
・・・・・
);
・・・・・
areadata.china = new Array(
・・・・・
);
[ 第3層目の定義例 ]
areadata.japan.tokyo = new Array(
['chiyodaku','千代田区','./area.html?chiyodaku'],
['chuouku','中央区','./area.html?chuouku'],
・・・・・
['edogawaku','江戸川区','./area.html?edogawaku']
);
areadata.japan.kyoto = new Array(
['kamigyouku','上京区','./area.html?kamigyouku'],
['nakagyouku','中京区','./area.html?nakagyouku'],
・・・・・
['simogyouku','下京区','./area.html?simogyouku']
);
・・・・・
本体と同じように読み込むケースでは，
<script src="../js/○○○.js"></script>
スクリプトの途中で読み込むケースでは，
document.write("<script src='../js/○○○.js'></script>");
などとしますね。 document.write() で，もし文字化けが出るようなら1行上の書き方に直してください。
なお，他のスクリプトの中で，あるラベルを取得するときは，次のようにします。
[ 例 ] 変数 chiyodaku に文字列 "千代田区" が入る
var chiyodaku = areadata.japan.tokyo[0][1];
|
|
|
|
|
|
|
|
|
|
 |
|
■■■ ステップ 3 ： メニューの色を設定
<head> 〜 </head> タグ内の <script> 〜 </script> タグ内で，メニューの色を指定をします。外部JavaScript を作成して，それを読み込んでもＯＫです。
色の指定方法は，下の例のとおりです。まず，適当な名前の連想配列を作り，
連想配列.キー = 値;
という要領で設定します。値はすべてシングルクォートかダブルクォートで囲んでください。
色の指定は，配列でもできます。たとえば， ['Blue','Red'] と指定すると，第1層目は青，第2層目以降は赤を指定したことになります。['Blue',null,'Red'] と指定すると，第1層目・第2層目は青，第3層目以降は赤を指定したとみなされます。値で指定した場合は，全層指定色になります。
透明にしたい場合は， 'transparent' と指定してください。指定しなかったり，空白 ( '' ) や null など，偽を返す文を指定した場合は，スクリプトの中にあるデフォルトの設定値が当てられます。使わない項目の色であれば無視されるので問題ではありませんが，努めて 'transparent' の指定を行ってください。
( FOLIOLE 2.8 から色の指定は必須ではなくなりました )
[ 例 ]
まず，配列の宣言と初期化。配列の命名法は識別名のそれと同じです。次に順次さきほどの要領で設定します。
var area_col = [];
area_col.CHAR_REVERSE = 'White';
area_col.BG = 'Gainsboro';
area_col.INNER_LEFT_UP = 'White';
area_col.INNER_RIGHT_DOWN = '#C8C8C8';
area_col.OUTER_LEFT_UP = 'Silver';
area_col.OUTER_RIGHT_DOWN = '#666666';
area_col.BG_REVERSE = '#2F3F4D';
area_col.CHAR = 'Black';
area_col.PARTITION = '#EEEEEE';
area_col.SHADOW = '#666666';
area_col.BG_PRESSED = 'Red';
● 連想配列の添字 ( キー ) について説明します。
・CHAR_REVERSE ： 背景色反転時の文字色
・BG ： 背景色
・INNER_LEFT_UP ： 左・上方向内枠線色
・INNER_RIGHT_DOWN ： 右・下方向内枠線色
・OUTER_LEFT_UP ： 左・上方向外枠線色
・OUTER_RIGHT_DOWN ： 右・下方向外枠線色
・BG_REVERSE ： マウスで反転した背景色
・CHAR ： 文字色
・PARTITION ： 仕切線色
・SHADOW ： 影 ( 右・下方向の縁取り ) 線色
・BG_PRESSED ： マウス押下時の背景色
なお，キーのうち，"INNER_・・・" と "OUTER_・・・" の違いは，内外の枠線をふたつとも 「 有り 」 に指定したときの，内側・外側の区別をするだけです。片方だけの場合は，どちらを指定しても外見は同じです。
【2005/10/31追加】
また，仕切線色を 'transparent' としても，仕切線の幅を 2ピクセル以上に設定すると，仕切線色として内外の枠線色 ( 無設定や null ならデフォルトの色 ) のどれかを拾いますので，ご注意ください。
|
|
|
|
|
|
|
|
|
|
 |
|
■■■■ ステップ 4 ： メニューの形状を設定
<head> 〜 </head> タグ内の <script> 〜 </script> タグ内で，メニューの形状を指定をします。外部JavaScript を作成して，それを読み込んでＯＫです。
メニューの形状 ( configuration ) の指定方法は，下の例のとおりです。まず，適当な名前の連想配列を作り，
連想配列.キー = 値;
という要領で設定します。連想配列のキーが小文字になっているものはすべて値での指定に限ります。数値以外は，すべてシングルクォートかダブルクォートで囲んでください。大文字になっているものは，値でも配列でもＯＫです。その場合，配列で指定すると配列の第 k 番目の要素が第 k 層目の指定をし，値で指定すると全層につきその値を指定したことになります。また，指定した配列の要素数がデータ項目の層数に満たないときは，配列の最後の要素の値がそれ以降に適用されます。
[ 例 ]
まず，配列の宣言と初期化。配列の命名法は識別名のそれと同じです。次に順次さきほどの要領で設定します。
var area_cfg = [];
次の項目だけは設定が必須です。省略ができません。
さきのデータ項目の配列名をクォーテーションなしで与えます。
area_cfg.data_array = areadata;
次の2項目はそれぞれ文字列，配列名で設定してください(省略可/カッコ内はデフォルト値)。
最初の area_cfg.menu_name は，文字列か文字列を返す式で設定してください。2番目の area_cfg.color_array は，さきのメニューの色の配列名をクォーテーションなしで与えます。
area_cfg.menu_name = 'areamenu'; //(省略時は 'foliole')
area_cfg.color_array = area_col; //(省略時は スクリプトで指定します)
次の項目は，すべて数値か数値を返す式で設定してください( カッコ内はデフォルト値 )。省略するときは，文そのものを書かないか ( コメントアウトするか ) または値に null といれてください。
area_cfg.is_vertical = 1;//(0)
area_cfg.position_x = 1;//(0)
area_cfg.position_y = 600;//(0)
area_cfg.root_gap = -1;//(0)
area_cfg.time_lag = 20;//(20)
area_cfg.time_lag_out = 300;//(上記設定値)
area_cfg.child_horizontal = 0;//(0)
area_cfg.hide_select_tag = 0;//(0)
area_cfg.fixed_2nd_pos = 0;//(0)
area_cfg.mouse_click = 0;//(0)
以下の項目は，配列での指定も可能です。その場合，第1層目からの階層ごとの指定となります。
下の例では，メニューセルの長さは，第1層目と第2層目は 60 ピクセル，第3層目以降は 80 ピクセルと指定し，メニューセルの高さは全層15ピクセルと指定したことになります ( カッコ内はデフォルト値 ) 。省略するときは，文そのものを書かない ( コメントアウトする ) かまたは値に null といれてください。
area_cfg.CELL_WIDTH = [60,60,80];//(100)
area_cfg.CELL_HEIGHT = 15;//(16)
area_cfg.CELL_PADDING = '0px 10px';//('0px')
area_cfg.IMG_PADDING = null;//(false)
area_cfg.CELL_ALIGN = 'left';//('left')
area_cfg.INNER_BORDER_WIDTH = 1;//(0)
area_cfg.OUTER_BORDER_WIDTH = 0;//(0)
area_cfg.PARTITION_WIDTH = 1;//(1)
area_cfg.PARTITION_IMG = null;//(null)
area_cfg.SHADOW_WIDTH = 1;//(0)
area_cfg.OFFSET_RIGHT = -4;//(0)
area_cfg.OFFSET_DOWN = 4;//(0)
area_cfg.FONT_SIZE = 12;//(12)
area_cfg.FONT_WEIGHT = 'normal';//('normal')
area_cfg.FONT_FAMILY = null;//(null)
area_cfg.FONT_STYLE = null;//(null)
area_cfg.TARGET_WINDOW = '';//('')
area_cfg.CELL_OPACITY = null;//(null)
area_cfg.CELL_BG_IMG = null;//(null)
area_cfg.IMG_ARROW = '../img/arrow.png';//(null)
area_cfg.POSITION_ID = null;//(null)
area_cfg.USE_FRAME = null;//(null)
area_cfg.CELL_BG_REP = null;//(null)
area_cfg.CHAR_ARROW = null;//('')
area_cfg.ARROW_OFFSET_RIGHT = null;//(0)
area_cfg.ARROW_OFFSET_DOWN = null;//(0)
area_cfg.CELL_STYLE = null;//(null)
● 連想配列の添字 ( キー ) について説明します。
 連想配列の添字 ( キー ) の詳細（PDF／別ウインドウ）
・data_array ： ステップ 2 の配列
・menu_name ： この階層メニューの名前を適当に
・color_array ： ステップ 3 の配列
・is_vertical ： 第1層目が縦方向なら 1，横方向なら 0
・position_x ： 第1層目の右方向の位置 ( px )
・position_y ： 第1層目の下方向の位置 ( px )
・root_gap ： 第1層目のセルどうしの隙間 ( px )
・time_lag ： コンテナを開く動作のタイムラグ(ミリ秒)
・time_lag_out ： コンテナを閉じる動作のタイムラグ(ミリ秒)
・child_horizontal ： 第2層目以降ががすべて横方向:1 / 縦方向:0
・fixed_2nd_pos ： 第2層目の位置を固定するときは1
・mouse_click ： クリックで展開するときは1（第1層目のみ）
・hide_select_tag ： マウスオーバー時に<select>タグを消す:1/消さない:0
・CELL_WIDTH ： 各層セル幅 ( px )
・CELL_HEIGHT ： 各層セル高 ( px )
・CELL_PADDING ： 各層セルパディング ( px )
・IMG_PADDING ： 各層画像セルのパディングの有効性
( 画像を含むセルの場合にもパディングを効かせるかどうかを各層ごとに指示。true などの真で有効，null や false などの偽で無効 )
・CELL_ALIGN ： 各層セル寄せ方
・INNER_BORDER_WIDTH： 各層セル内側枠幅 ( px )
・OUTER_BORDER_WIDTH： 各層セル外側枠幅 ( px )
・PARTITION_WIDTH ： 各層セル仕切線幅 ( px )(第1層目は無視)
・PARTITION_IMG ： 各層セル仕切線画像 ( パス付きで )(第1層目は無視)
・SHADOW_WIDTH ： 各層セル影線幅 ( px )(右下方向の不透明線)
・OFFSET_RIGHT ： 各層セル右オフセット ( px )(第1層目は無視)
・OFFSET_DOWN ： 各層セル下オフセット ( px )(第1層目は無視)
・FONT_SIZE ： 各層セル文字サイズ ( px )
一般にブラウザによっては， FONT_SIZE を大きくした場合は， CELL_PADDING の値をいくらか与えないと文字全体が表示されないことがあります。
・FONT_WEIGHT ： 各層セル文字の太さ ( 'bold' / 'normal' または数値 )
・FONT_FAMILY ： 各層フォントの種類
["'ＭＳ 明朝','ＭＳ ゴシック'","'ＭＳ Ｐゴシック','ＭＳ Ｐ明朝'"];などと指定 (この場合，第1層目はＭＳ明朝が優先，第2層目以降はＭＳＰゴシックが優先になります)
・FONT_STYLE ： 各層斜体表記 ('italic' で斜体，'normal' で正体表記)
・TARGET_WINDOW ： 各層別リンク先のウインドウ名 (例：'new_win')
・CELL_OPACITY ： 各層セル不透明度
・CELL_BG_IMG ： 各層背景画像 ( パス付きで )
・IMG_ARROW ： 子セルの存在を示す各層矢印画像 ( パス付きで )
(子セルの存在を示す矢印画像です。ダウンロードファイルに添付されています)
・POSITION_ID ： 位置を連動させる他の要素を登録
・USE_FRAME ： フレームにまたがって使用時のみ，2個の要素をもつ配列を設定
配列の第1要素・・・第1層目のメニューを表示するフレームの配列frames[]の添番
配列の第2要素・・・第2層目以降のメニューを表示するフレームの配列frames[]の添番
( フレームにまたがる使用方法は， フレーム対応サンプルの各ページにくわしく出ています )
・CHAR_ARROW ： 子セルの存在を示す各層矢印画像に代わる矢印文字
・ARROW_OFFSET_RIGHT： 子セルの存在を示す各層矢印画像・矢印文字の右方向オフセット
・ARROW_OFFSET_DOWN ： 子セルの存在を示す各層矢印画像・矢印文字の下方向オフセット
・CELL_STYLE ： FOLIOLE 外の CSS の継承を、FOLIOLE 内で断ち切るCSS文
|
|
|
|
|
|
|
|
|
|
|
|
■■■■■ ステップ 5 ： メニューを書き出し
<body> 〜 </body> タグ内で，メニューを書き出します。
<body> タグを開始した直後に置いてください。
<body> タグ内のどこか適当な場所に置いてください。このページでは，3個の FOLIOLE 全部が <body> タグの終了間際に定義されています ( Macintosh ＋ Microsoft Internet Explorer の場合を除く ) 。
[ 例 ]
<script language="JavaScript">
var areamenu = new defMenu(area_cfg);
areamenu.makeObj();
areamenu.putMenu();
</script>
3行ある文の，1行目で，メニューインスタンスを生成します。これを変数 areamenu に代入しています。この areamenu が，この階層メニューオブジェクトの名前となります。これは，ステップ 4 の area_cfg.menu_name で指定した名前と，必ず同じ名前にしてください。指定しなかったときは， foliole という名前にしてください。 defMenu() の引数には，ステップ 4 で指定した配列 area_cfg を入れてください。2行目で色と形状指定どおりにメニューを作り，3行目でブラウザに表示します。
|
|
|
|
|
|
|
|
|
|
|
|
■■■■■■ ステップ 6 ： メニューを閉じる設定その他
通常，マウスがメニューからロールアウト ( メニューから離れる ) するか，別の場所をクリックしたときは，すべてのコンテナを見えなくして，第1層目だけ残すようにします。
次のスクリプトを適当な <DIV> タグか，<TABLE> タグの属性として指定してください。そのタグの領域で，マウスイベント ( メニューから離れること ) が生じたとき，コンテナを不可視にします。
ロールアウトではなく，マウスクリックで不可視にする場合は， "onmouseover" に代えて "onclick" としてください。
onmouseover="fo_hideMenu('areamenu');"
マウスが階層メニューからロールアウトして，このタグの領域にロールオーバーしたことを契機に，関数 ( プロシージャ ) fo_hideMenu() が起動されます。引数には，階層メニューの名前をシングルクォートで囲んで指定してください。メニューが同一ページに複数あるときは，該当するものを追加してください ( 1行で書いてください ) 。
onmouseover="fo_hideMenu('areamenu1');fo_hideMenu('areamenu2');"
|
|
|
|
|
|
|
|
|
|
|
|
このデータ項目の配列 areadata から，簡単なサイトマップを作ってみます。
document.write(fo_get_sitemap(areadata));
とすればその場で出力します。
【JavaScript がオフの場合】
FOLIOLE が予定していた位置に，<noscript>〜</noscript>で囲んだ代替 HTML ( 通常のリンク ) を入れます。
【JavaScript のバージョンが想定外の場合】
Netscape 4x や Internet Explorer 4 などのブラウザでは，FOLIOLE は動きません。いろいろなチェック方法があります。以下はひとつの例です。
if(!document.getElementById){
document.write( ・・・ 上記の代替 HTML ・・・);
}
【FOLIOLE のポジションについて】
FOLIOLE のポジションは絶対位置であって，ページのテーブルなどで指定する位置とは独立しています。まるで既存のページの上からメニューだけを印刷した透明シートをかぶせたみたいなものです。この位置は，すべて計算で決められています。もし FOLIOLE の位置を，画面幅に依存した相対的ポジションにしたい場合は，下のノートや FAQ を参照してください。
FOLIOLE 設置の概要は以上のとおりです。FOLIOLE には，以下のようなオプショナルな設定が可能です。詳しくお知りになりたい方はノートやFAQをごらんください。
マウスクリックに無反応の「紹介セル」
マウスのロールオーバ・クリックに無反応の「沈黙セル」
データ項目のオプション
関数
パンくずリストの作り方
全データ項目一覧表の作り方
サイトマップの作り方
相対的ポジションの方法
データ項目のコメントからキーワードをサーチする方法
FOLILOE ノート
FOLILOE FAQ
|
|
|
|
|
|
|
|
|
|
|