技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] ・サイトマップ [Shift-S]
ページタイトル:JavaScript小技集
KeyNaviライブラリでJavaScriptを簡単に

 更新情報
(準備中)

 KeyNaviコードを開発に
 KeyNaviの本体であるJavaScriptコードを開発に利用できます。

ブラウザ判別、キーイベント、レイヤー処理など良く使われる機能が 関数化されており手軽に利用可能です。

説明図:KeyNaviライブラリでブラウザ間差異を吸収  一般にJavaScript特有の問題としてブラウザ間互換性が挙げられます。 ユーザが使用するブラウザはInternet Explorer以外にも Netscape, Opera, Mozillaなど様々です。

 KeyNaviライブラリは各ブラウザ、各バージョン間の差異を吸収し 開発者に共通のインターフェースを提供します。

 これにより現在使用されている殆ど全てのブラウザに対応したスクリプトを ラクに記述できます。

 また 各機能が1つのファイルにカプセル化されているため 将来新しいブラウザが登場した場合でも個々のHTMLのUpdateは不要です。 ライブラリファイルのUpdateだけで対応可能なので ページの保守コストを低減できます。

 関連技術資料

  - KeyNavi対応方法メインページ
  - KeyNavi API リファレンス

HTMLで使用されている文字コードに合わせて 下記から適切なファイルを選び外部スクリプトとして指定します。
  - keynavi_ja.js :SJIS版
  - keynavi_ja_euc.js :EUC版
  - keynavi_ja_utf8.js :UTF-8版
  - keynavi_en.js :英語版
  - keynavi_tools.js :ツール集 (各文字コード共通)

 目次

 ○ 基本編
JavaScriptで注意すること
ブラウザ互換性問題について
デバッグなど開発効率を上げるための工夫
関数の可変引数、デフォルト引数、動的作成など
JavaScriptでのオブジェクトの扱いについて
ブラウザ判別:KL_IE/NS/OP/MZ

 ○ キーイベント処理編
キーやマウスが押されたことを確認したい
キーイベント処理の工夫

 ○ 一般イベント処理編
マウス位置取得:kl_mousex,y()
Focus/Click先の要素を取得:kl_target()
イベントハンドラの登録:kl_addhandler()
ページ全体に対するイベントハンドラの登録
レイヤーにイベントハンドラを登録
フォームやリンクにイベントハンドラを登録

 ○ タイマー編
タイマー機能を簡単に利用:kl_timer_...()
レイヤー アニメーション:移動・背景色・透明度・出力
レイヤー アニメーション:補間関数を工夫する
タイムテーブルによる制御:kl_timer2_...()

 ○ ナビゲーション編
スクロール位置取得:kl_slx/y()
スクロール実行:kl_slto/by()
自動スクロール・自動ページ移動:kl_sla_...
紙芝居的表示:kl_sla_flip_...
前後節,ページへの移動:kl_sec_move()
スクロール位置付URL:kl_urlat_get()
戻る/進む/再読込みの実行

 ○ ウィンドウ編
ウィンドウサイズ取得:kl_windowwidth/height()
スクリーンサイズ取得:kl_screenwidth/height()
ウィンドウの使用可否判定:kl_closed()
フルスクリーン:kl_fullscreen(url,name)
フォーカスするウィンドウの切替え

 ○ DOM編
id値からオブジェクト取得:kl_getelem(id)
要素の位置、大きさなど各種属性を処理したい
要素の中身を動的に変更:kl_replace(id,s,mode)
要素の属性リストを取得

 ○ レイヤー編:基本
レイヤーの表示・非表示切替え: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モジュール化

 ○ レイヤー編:応用
レイヤーをウィンドウ内の中心位置に固定
動的にレイヤーを作成:kl_layer_new()
動的にレイヤーの中身を書き替え&URLロード:kl_layer_write/load()
半透明レイヤー:kl_tlayer_new()
レイヤーのドラッグ設定・解除:kl_drag_set()
レイヤークリックで手前に移動:kl_raise_set()

 ○ その他編
status出力をリダイレクト:kl_status(s,opt)
外部スクリプトを動的に読み込む
フレームページでも個別URL指定を可能に
文字列の暗号化:kl_encrypt/decrypt()
Try,Catch文の互換性対策
クッキー処理:kl_cookie_set/del/get()

 このサイトのラクな見かた
 このサイトでは全てのページで「KeyNavi」が利用でき ラクに ナビゲーションできます。

上下スクロール「I/K」 前後移動「Y/H」 フォーカス「Ctrl-I/K/J/L」等々

スクロール位置付URL「-」
通常のURLではページのスクロール位置を表現できません。 このサイト内のページでは マイナスキー「-」で スクロール位置も含めたURLを取得できます。

長いページでは便利。 しおりに登録しておくと後で直接その位置へ戻れる。

自動で見る「T/G」
まず「G」を押す。 自動で下にスクロール。繰り返し押すと速くなる。 ページの最後になりスクロールしきれなくなると 一定時間後に次のページに自動でJump。

停止するには何かキー(Shift,Escなど)を押すか ページ内でクリック。

リンク移動はフォーカス&リターン
「Ctrl-I/K/J/L」や「Ctrl-矢印」でフォーカスを上下左右に移動。 目的のリンクにフォーカスしたらリターンキーでそのページにJump。

 

ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─