|
||||||
 |
||||||
|
||||||
|
|
||||||
|
||||||
|
||||||
|
各種カスタマイズ | − 独自ショートカットの追加など間単に行えます |
|
[sA]=Shift-A で移動できます
|
|
サンプル１：HTMLのみで指定 [sT]にカンタンなカスタマイズ例があります。
ソースを表示させコピー＆ペーストしてやればOKです。
以下の内容は より詳しく知りたい、 もっと高度なカスタマイズをしたい場合にのみ参照して下さい。
■ 多様な指定方法
KeyNaviはJavaScriptのプログラムです。
カスタマイズはスクリプトによるものが中心ですが
よく使われるものについてはHTMLのみでも可能になっています。
ショートカット、頭出しをする節、前後ページ指定など。
■ 拡張キー名：knx
以下では 拡張キー名「knx」がよく使われます。
これは押されたキーの名前を修飾キーの状態も含めて
１つの文字列で表したものです。
「F」キーなら「"F"」、
「Shift-F」なら「"sF"」、
「Ctrl-Shift-F」なら「"csF"」となります。
詳しくは 参考１：用語の説明 (このページ内) [sU]を見てください。
■ ラベルショートカット：[knx or (修飾キー)英数字] お勧め
以下のようにリンクやFormボタンのラベルに
括弧 "[ ]" を使うだけで簡単にショートカットを作れます。
【括弧を使ったショートカット指定例１：knx利用】 <!-- 「Shift-H」「Ctrl-1」「ALT-1」でHomeに移動 (クリック実行) --> <a href="/">Home [sH]</a> <a href="/">Home [c1]</a> <a href="/">Home [a1]</a> ラベル内に括弧で囲まれた拡張キー名「knx」の指定があると ショートカットとして解釈されます。 上の例では「Shift-H」入力でリンクに対しclickが実行され Homeに移動します。 以下のように「修飾キー」＋「英数字」という形で指定することも可能です。 【括弧を使ったショートカット指定例２：修飾キー指定】 <!-- 「Shift-H」「Ctrl-1」「ALT-1」でHomeに移動 (クリック実行) --> <a href="/">Home [Shift-H]</a> <a href="/">Home [Ctrl-1]</a> <a href="/">Home [ALT-1]</a> 「Shift」の指定が無い英数字１字の場合は「Shift」が補われます。
「Ctrl」や「ALT」も可能ですがブラウザの既定ショートカットと
重なることがあるため KeyNaviのデフォルトでは
「Shift」優先になっています。
【括弧を使ったショートカット指定例３：英数字１文字】 <!-- 「Shift-H」でHomeに移動 (クリック実行) --> <a href="/">[H]ome</a> <a href="/">Home [H]</a>
ユーザにショートカット指定を伝えるには リンクラベルで "[英数字]" とするのが 一般的ですが それだけでショートカットになるので便利です。
この機能を動作させたくない場合は オブジェクトの id or name属性として 「"kl_skip"」で始まるものを 指定します。 するとそのリンクは処理の対象になりません。 またカスタマイズ定数によりこの機能自体を無効にして 括弧内を処理させないこともできます。 なおクリック対象が２つ以上ある場合は 画面中心に近いリンクやボタンが優先されます。 またクリックではなくフォーカスを実行させることもできます。 ページ内のリンク数が多く アルファベットが足りなくなる場合は この方法を使うのも1つです。
当該キー及び「<・>」の連続入力で順番にフォーカスが移ります。 フォーカス開始時は「Tab」によるフォーカス移動と異なり スクロール位置がずれない工夫がされています。 さて、括弧で挟んだ英数字の代わりに 頭文字で指定 することもできます。 英文のみのページでは内容を 全く編集しなくてもショートカットを使える ようになるので特に便利です。
Zopeでの活用
[sX]では任意のオブジェクトに
「Shift-英数字」でフォーカスさせています。
英語版KeyNavi(keynavi_en.js)ではこのモードが既定です。
この機能のカスタマイズについては 参考５：ラベルショートカットのカスタマイズ (このページ内) [sY]を参照。
■ タグ属性でショートカット：id,name="kl_(動作)_(knx)_..."
リンクやアンカー、Formオブジェクトのid,name属性として
"kl_(動作)_(拡張キー名)[_任意文字列(略可)]" といった値を与えると
ショートカットとして解釈されます。
動作には focus,click,nameを指定できます。 画像リンクやText入力系Formでは 先のラベルショートカットで処理できないので この方法で指定するといいでしょう。
【id,name属性を利用したショートカット指定例】 <!-- 「Shift-H」でHomeにアクセス --> <a href="/" id="kl_click_sH">ホーム</a> <!-- 「Shift-S」でサイトマップリンクにフォーカス --> <a href="/sitemap.html" id="kl_focus_sS">サイトマップ</a> <!-- 「Shift-T」でtitleアンカー位置へ移動 --> <a name="title" id="kl_name_sT">タイトル</a> 複数指定も可能です。 その場合、IDやname値で重複するものが出てくるので 一意性を保ちたい場合は "_..."を追加します。 例えば上の「サイトマップ」リンクでは「id="kl_focus_sS"」としていますが 「id="kl_focus_sS_1"」「id="kl_focus_sS_foo"」などとしてもOKです。 重複したままでも動作上は問題無いようです。
また カスタマイズ定数「KL_KEY2XXX_PREFIX」を書き替えれば 接頭辞を "kl_"以外に変更できます。
■ スクリプトで指定：KL_KEY2...配列
これまでの方法と異なりJavaScriptを使った指定法です。
KL_KEY2xxx[knx]=登録内容 といった形で指定します。
スクリプトなので指定内容を外部ファイルにできます。 特に 各ページで共通の割当てをこの方法で記述するといいでしょう。 そうすると更新・保守対象が１つのファイルで済みます。
【ショートカット用配列：KL_KEY2...】
「Shift-H」が押された時に「Home」に移動するには
KL_KEY2FNCに登録した関数は 引き数としてキー状態「stat」が入るかたちで呼び出されます。 「stat」は連想配列で参考１：用語の説明 (このページ内) [sB]で説明されているキーイベント情報が 格納されています。 例えば stat["knx"]で押されたキーに対する「拡張キー名」が得られるので 処理を分岐できます。 関数の返り値に「false」を与えるとブラウザの既存の割当を上書きできます。 一方、複数のキー入力を一括で処理したい場合は 関数で柔軟にカスタマイズ (このページ内) [sC]にあるように ハンドラ関数を使うとラクです。
頭出し機能「Y/H」を利用したい場合に設定します。
■ 全てのアンカーで頭出し可能
KeyNaviのデフォルトでは
アンカー名が「"kl_"」「"_"」で始まるもの以外
ページ内の全てのアンカーが頭出し可能です。
【頭出しの指定例：name属性利用】 <a name="fmatter">始めに</a> 。。。。。 <a name="chap1">第一章</a> 。。。。。 <a name="_comment">コメント</a> 。。。。。 上の例では始めの「fmatter」「chap1」は頭出しされますが 「_comment」はスキップされます。
「KL_SEC_NAMES_PREFIX」で頭出しするアンカーの接頭辞を指定できます。 逆に「KL_SEC_NAMES_PREFIX2」でスキップしたいものを指定できます。 複数パターンある場合は配列にして代入します。
■ KL_SEC_NAMES配列
これはJavaScriptによる指定です。
以下のように頭出しするアンカー名を直接指定します。
【頭出しの指定例：KL_SEC_NAMES】 KL_SEC_NAMES=new Array("fmatter","chap1","chap2"); 上の例のようにアンカー名を配列で指定します。
頭出し「Y/H」や自動ナビ「T/G」ではページの最後に達して
移動しきれなくなると指定した前後ページへ移動します。
■ id,name=kl_prev/kl_next
リンクタグ<a href=...>のidかname属性として
"kl_prev"、"kl_next"を与えると
前後ページとして解釈されます。
【前後ページの指定：id,name属性利用】 <a href="prev.html" id="kl_prev">前のページ</a> <a href="next.html" id="kl_next">次のページ</a>
■ KL_SEC_PREV/KL_SEC_NEXT
これはJavaScriptによる指定です。
前後ページのパスを直接指定します。
【前後ページの指定例：KL_SEC_PREV/NEXT】 KL_SEC_PREV="prev.html"; KL_SEC_NEXT="next.html";
このサイトのようにサイト構造をプログラムで管理している場合には この値をHTML内に自動出力するといいでしょう。
KeyNaviのフォーカス移動機能「Ctrl-矢印・I/K/J/L」のカスタマイズです。
■ 初回フォーカス位置の指定
キー入力初回時にフォーカスする位置は
表示エリア内先頭＆真ん中付近が優先されます(デフォルト)。
定数KL_FOCUS_CENTERXにX座標(整数値)、 乃至はWindow全体に対する割合(0から1の値)を指定します。 例えば ページの左側200pxがメニューリンク列、 右側全体が本文となっているレイアウトのページを考えます。 メニューリンクに対し より少ないキー入力でフォーカスするには 例えば 200/2 = 100を指定します。 一方、本文中のリンクにできるだけ早くフォーカスするには 例えば 200+(kl_windowwidth()-200)/2 = kl_windowwidth()/2+100 を指定します。
「kl_windowwidth()」はブラウザのウィンドウ幅を返すKeyNavi関数です。
ウィンドウサイズの取得はKeyNaviの機能の実装でも必要なので
このように関数化されています。
そして一般の開発者も利用できるよう整理されています。
JavaScriptを始めから記述するのと異なり 各ブラウザでの動作確認も取れており 互換性やバグを気にせず使えるので積極的な活用をお勧めします。
■ フォーカス移動先ウィンドウの指定
独立した異なるウィンドウ や フレーム間で
フォーカスを移すことができます。
KL_FWIN_DOWN/UP/RIGHT/LEFT にウィンドウオブジェクトか相対位置情報を配列で格納します。 Zopeでの活用 [sI]では３つのフレーム間で自然にフォーカスが移せる ようになっています。
キー入力を一括して処理したい場合は
ハンドラ関数「kl_keyfunc_ex(stat)」を定義します。
【押されたキーの情報をステータスバーに出力する例】 function kl_keyfunc_ex(stat){ kl_status( " ■キーコード："+stat["kc"]+ " ■キー名：" +stat["kn"]+ " ■拡張キー名："+stat["knx"]+ " ■ALT：" +stat["md"]["alt"]+ " ■CTRL：" +stat["md"]["ctrl"]+ " ■Shift：" +stat["md"]["shift"]+ " ■action：" +stat["action"] ); return true; }
「KL_KEY2FNC」のケースと同じく 関数の返り値に「false」を与えるとブラウザの既存の割当を上書きできます。 その他の注意点として 「kl_keyfunc_ex(stat)」が呼び出されるのは ブラウザでキー入力がきちんと処理できるタイミングです。 例えばIEの場合は「Ctrl」「ALT」の修飾キーがある入力は 「keydown」 無い場合は「keypress」のタイミングで呼ばれます。 「keydown」「keypress」「keyup」の 全てのタイミングで呼びたい場合は 「kl_keyfunc0_ex(stat)」を使います。 これを使う場合はブラウザ互換性や actionによるキーコードの違いに十分注意して下さい。
KeyNaviでは onload, onresize, onmousedown, onkeydown, press, up
に対しイベントハンドラを登録しています。
これらについては以下のようなハンドラ関数を利用できます。
JavaScriptをはじめから書く場合と異なり ハンドラ登録不要、関数を作成するだけでOK、 且つクロスブラウザなので便利です。
【KeyNavi拡張ハンドラ関数】
引き数「e」はイベントオブジェクト、「stat」はキーイベントの情報です。 動作の仕組みについては参考４：KeyNavi実行のプロセス (このページ内) [sM] を参考にしてみて下さい。 「kl_onkey..._ex(e)」関数内に記述する内容は 一般的なJavaScriptによるキーイベント処理のコードと同じものです。 KeyNavi導入前に独自のキーイベント関数が既にある場合は 「kl_onkey..._ex(e)」を定義し その中に既存コードを コピーしてもいいでしょう。 さて、複数メンバーによる大規模な開発になると スクリプトの記述(イベントハンドラ登録含む)を HTML内の複数箇所で独立に行いたいでしょう。 その場合は 「kl_addhandler_ex(イベント名,関数)」 「kl_delhandler_ex(イベント名,関数)」を使います。 ユティリティ関数(KeyNavi API リファレンス) [sN]も適宜参考にしてみて下さい。
一般オブジェクトに対するイベントハンドラ登録では
「_ex」を除いた「kl_addhandler(オブジェクト,イベント名,関数)」
といった関数もあり 大規模開発では特に有用です。
キーイベント処理でよく使われる用語について。
【キーイベント関連の用語】
カスタマイズをスクリプトを使って行う時は
その記述をどこにするか問題になります。
【カスタマイズの記述は適材適所】
このページでは編集の都合で全てHTML内に記述しています。 必要に応じて別ファイル化してください。
【一般的なカスタマイズ用スクリプトの記述例】 <html> <body> <!-- カスタマイズをkl_setup_ex()内に書いた例 --> <script language="javascript"><!-- function kl_setup_ex(){ //○カスタマイズ用定数の各種指定 KL_KEY2URL["sS"]="sitemap.html"; KL_KEY2URL["sH"]="help.html"; KL_SEC_PREV="prev.html"; KL_SEC_NEXT="next.html"; //○ブラウザ判別定数 KL_IE4/NS4/NS6... などが利用可能です。 //例：NS4ではウィンドウのリサイズ時に再読込みを実行 if(KL_NS4) KL_RELOAD_ONRESIZE=true; } //--> </script> <script language="javascript" src="keynavi_ja.js" ></script> 。。。。。 </body> </html> KeyNaviはHTML内で keynavi_ja.jsの指定 <script language="javascript" src="keynavi_ja.js"></script> があった時点で起動されます。 カスタマイズの設定は この後に書いても動作しますが 上の例のように予め関数「kl_setup_ex()」を定義し この中に記述するのが確実です。 動作の仕組みについては次項を参考にして下さい。
KeyNaviは以下のような順序で実行されます。
【KeyNaviの実行プロセス】
その他に 「キー」が押されると 「kl_onkeydown(e)」 「kl_onkeypress(e)」 「kl_onkeyup(e)」 が順に呼ばれます。 拡張子「_ex」がついた関数が定義されていれば それも呼ばれます。 マウスについては「kl_onousedown(e)」が同様に呼ばれます。
補足：KeyNaviはスクリプトが読まれた時点で起動
KeyNaviはkeynavi_ja.js読み込み完了時点で起動するよう工夫しています。 一般にJavaScriptではonLoadで動作開始とするプログラムが多いです。 この方法の問題点として onLoadイベントが発生するまで起動を待たされるといったことが 挙げられます。 大量のテキストや大きな画像を含むページでは onLoadイベントが発生するのに 数秒オーダーの時間がかかります。 KeyNaviはスクリプト指定があった時点で起動します。 そのためページ全体の読み込み完了を待たずに利用できます。
ラベルショートカット (このページ内) [sQ]
の動作をカスタマイズすることができます。
【ラベルショートカットカスタマイズ定数】
値の指定は文字列で 「パターン」と「デフォルト修飾キー」をアンダースコア "_" で 連結して行います。 「パターン」には括弧 "[]"、"()" や 頭文字を表す "initial" を、 「デフォルト修飾キー」には "alt" "shift" "ctrl" を指定できます。 例えば「"[]_shift"」は 「Shiftキー＋括弧"[ ]"内の英数字」、 「"initial_shift""」は「Shiftキー＋頭文字」となります。 この機能を実行させたくない場合は 各定数に偽値「0」などを指定します。 また各リンクで id or name属性として 「"kl_skip"」で始まるものを 指定すると そのリンクは処理の対象になりません。 なお、関数「キー文字列＝kl_elem_key(要素オブジェクト,パターン文字列)」 を再定義すると KeyNaviソースはそのままで 独自の処理法を実装できます。
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||
|
