技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーメニューとJavaScriptモジュール化 ・サイトマップ [Shift-S]

■ レイヤーメニューとJavaScriptモジュール化

レイヤーの表示・非表示切替え、背景色変更の関数を ページのメニュー部に応用した例を示します。 合わせて「kl_addhandler()」を積極的に用いて HTMLデザインとJavaScriptコードの分離(JavaScriptのモジュール化)も考えてみます。

【メニュー例:HTML部 (ID指定を積極的に活用)】


<!-- 上のメニュー部のHTML -->
<table border="1" cellpadding="20" style="border-collapse:collapse;">
<tr>
<td id="m1"><a href="#" id="m1_lnk">リンク1</a></td>
<td id="m2"><a href="#" id="m2_lnk">リンク2</a></td>
</tr>
</table>

<!-- 下に表示するTipsレイヤーのHTML -->
<div style="position:absolute; visibility:hidden; background:#FFCC99;" id="m1_tips">
リンク1の説明
</div>
<div style="position:absolute; visibility:hidden; background:#FFCC99;" id="m2_tips">
リンク2の説明
</div>

上のHTMLを見ると イベントハンドラなど スクリプトの記述がなく 代わりにID指定があるのみです。

以下が実行されるスクリプトです。 KeyNaviライブラリ関数を用いているのでJavaScriptを最初から書くのに比べると 簡潔&明快になります。

【メニュー例:スクリプト部】



<script language="javascript"><!--
//------レイヤー上にマウスがあるときに実行-------//
function mover(){
        var e=this;
        kl_layer_setbgcolor(e,"orange");  //背景色を橙色に
        if(e.style) e.style.cursor=document.all ? "hand" : "pointer"; //マウスポインタを「手」に
        if(e.id) kl_layer_show(e.id+"_tips"); //Tipsレイヤー表示
}

//------レイヤーからマウスが外に出たときに実行-------//
function mout(){
        var e=this;
        kl_layer_setbgcolor(e,"transparent"); //背景色を透明に
        if(e.id) kl_layer_hide(e.id+"_tips"); //Tipsレイヤー隠蔽
}

//------レイヤー上でクリックが実行されたときに実行-------//
function mclick(){
        var e=kl_getelem(this.id+"_lnk");
        if(e.click) e.click();                //リンクで指定されたURLへ移動
        else if(e.href) location=e.href;
}

//------onLoadのタイミングで各種メニューハンドラを登録-------//
function mload(){
        var ids=new Array("m1","m2");         //メニュー各項目のIDを登録
        for(var i=0;i<ids.length;i++){
                var e=kl_getelem(ids[i]);

                //ハンドラ登録は「kl_addhandler()」を使用
                kl_addhandler(e,"onmouseover",mover);
                kl_addhandler(e,"onmouseout", mout);
                kl_addhandler(e,"onclick",    mclick);
        }
}

//------上のハンドラ関数をonLoadハンドラとして登録-------//
kl_addhandler(window,"onload",mload);

//-->
</script>


JavaScript機能のモジュール化
上のコードを見ると 「mload()」内のID指定を 変えるだけで 任意個数、任意レイアウトのHTMLに流用できることが分かります。 以下のような特徴があります。

- デザイナーは当該タグ内でID指定のみしておけばOK。
タグ内に「onmouseover=処理」など記述する必要が無いのでデザインに注力できる。
- プログラマーはJavaScriptからイベントハンドラを登録できる。
デザイナーにJavaScript仕様を伝える必要が無い。
- HTMLコードとJavaScriptコードを独立して扱える。
デザイナーとプログラマーが同時並行で仕事を進められる。

今回のようなデザイン寄りのスクリプトは 全てデザイナーが作るケースも多いので あまり有用性を 実感できませんが 高度なJavaScriptを組み込む場合には重要なアプローチです。

作成したJavaScriptは外部ファイルとしてまとめておくと便利です。 また デザイナーが独自にイベントハンドラ指定をしたとしても 「kl_addhandler()」を使っているため それらを上書きする心配が無いのも安心です。

IDセレクタとJavaScript
スタイルシートの指定に「IDセレクタ」を使ったスタイル指定があります。 元になるHTMLコードは CSSを使う場合でも今回のJavaScriptを使う場合でも 同じですが 以下のように実際の表示効果は全く異なります。 CSSの各種指定はJavaScriptからもできるので JavaScriptを積極的に活用してもいいでしょう。

上の例では テーブルセル、リンク、Tipsレイヤー各々でID指定が必要です。 しかしJavaScriptでDOMをうまく使えば ID指定を一箇所のみにしたり 色々工夫できます。 特定IDの要素の子要素のみに適用するといった 文脈セレクタ的な使い方をするのも強力です。 外部モジュールとしての完成度が高まります。

上記HTMLを実行
リンク1 リンク2


動作についての説明
各マウス操作に従い 以下の内容が実行されます。

- マウスポインタがセル内に入ったら(onmouseover)
1.背景色を変更
現在どのセル上にマウスポインタがあるのか分かりやすい。
2.マウスポインタを「手(hand)」の形に変更
セル上はリンクとして機能することがユーザに伝わります。
3.Tipsレイヤーを表示
リンク先の説明を表示します。クリックすべきかのユーザの意志決定を補助します。

- マウスポインタがセルの外に出たら(onmouseout)
1.背景色を透明に
2.Tipsレイヤーを隠す

- セル内でクリックが実行されたら(onclick)
1.指定URL「#」へ移動
クリック先がリンク文字列でなくてもOK。 リンクの範囲がセル全体となり広くなるので クリックしやすく Usabilityが向上します。

上記はレイヤー関数を利用した簡単なサンプルです。 必要に応じてTipsレイヤーの位置を変更しsubメニュー化したり 半透明レイヤーにしたり 色々工夫してみて下さい。

Netscape4.xの問題
Netscape4.xでは テーブルの<td>セルに対し 「onmouseover/onmouseout/onclick」を指定しても 無視されるので何も起こりません。 対応したい場合は 「position:absolute」としたレイヤーを使います。 但し absolute指定は 文字サイズやウィンドウサイズ変更への対応が難しい、 他の要素と被さり易いなど レイアウトしにくいです。 或いはレイヤーを諦めて リンク先ごとに画像(mouseover用も必要)を作成する ケースもあります。

単にTipsレイヤーを表示したい場合は <a>タグにHTML内でハンドラを 指定します (JSからは不可、NS4ではID値からリンクオブジェクトを引けない)。

いずれにせよ 対応コストが格段に上がるので 使用率 0.6% を考慮すると このような見栄え系機能はNS4非対応でもいいでしょう。




【JavaScript@Keynavi.Net : レイヤー編:基本 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

  - レイヤーの表示・非表示切替え:kl_layer_show/hide(id)
  - レイヤーを移動:kl_layer_moveto,by(id,x,y)
  - レイヤーを上下左右/中央寄せ:kl_layer_setpos(is,pos)
  - レイヤーの背景色を指定:kl_layer_setbgcolor(id,...)
  - レイヤーの背景画像を指定:kl_layer_setbgimage(id,...)
  - 前景色(文字色)変更:kl_layer_setfgcolor(id,...)
  - レイヤーの各種属性(位置,大きさ,...)を取得:kl_layer_xxx()
  - ウィンドウリサイズ時のNS4レイヤーバグ回避
  - レイヤーメニューとJavaScriptモジュール化

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] レイヤーメニューとJavaScriptモジュール化 ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─