技 巧 鍵 盤 ─ KeyNavi:キーボードを活用してホームページを快適に─    
キー割当表示[Shift-H]        
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] スクロール位置付URL ・サイトマップ [Shift-S]

■ スクロール位置付URL:kl_urlat_get()

一般にHTMLで扱われるURLではスクロール位置を表現できません。 長いページで特定位置のURLを取っておきたい、誰かに伝えたい場合でも いい方法がありません。
当該位置に偶然名前アンカー<a name=foo></a>があれば 「...html#foo」とできますが望み薄です。

そこでKeyNaviでは「-」(マイナス)キーで任意位置のURLを取得します。

「-」キーを押すとアドレスバーにそのURLが表示され そのままブックマークなどとして保存できます。

【スクロール位置付URL取得「kl_urlat_get()」<keynavi_ja.js】

//---------------------------------
//kl_urlat_get(win)
//返り値:スクロール位置付URL
//win:ウィンドウオブジェクト(略可=selfで代替)
//---------------------------------
KL_URLAT_PREFIX="kl_url_";
KL_URLAT_SPLITTER="?"; //or #
function kl_urlat_get(win){
        .............
}
function kl_urlat_go(){ //「-」キーが押された時に実行
        location=kl_urlat_get();
        return 1;
}
function kl_urlat_restore(){ //onLoad時に実行
        var sp=KL_URLAT_SPLITTER;
        var px=KL_URLAT_PREFIX;
        var v=kl_urlsplit(location.h
        .............
}

上の関数では スクロール位置を通常のURLに続けて 「http://...foo.html?kl_url_(X座標)x(Y座標)x(窓巾)=1」 という形式で表現します。 例えばスクロール位置(0,200)で 窓巾が700の場合は 「http://...foo.html?kl_url_0x200x700=1」となります。

「KL_URLAT_SPLITTER="#"」とした場合は 「http://...foo.html#kl_url_0x200x700」となる。 「?」を使う場合と異なり 「-」キー入力時にページの再読込みがされないので速いが 移動先が同一ページ内の場合、onLoadが呼ばれず指定位置に移動しないのでコメント。

Note:現在のURLが既に「?a=b&c=d」という形式だった場合、 上記の「kl_url_...」の指定は後ろから追記される形になる。 「?a=b&c=d&kl_url_0x200x700=1」となる。

さて、KeyNaviを組み込んだHTMLでは 「onLoad」時に「kl_urlat_restore()」が実行され アクセス時のURLが上記の形式だと指定位置にスクロールします。 もしこのとき 窓巾が異なっていればWindowを リサイズして元の環境を復元し 指定位置にピッタリ来るようにしています。

ブラウザ互換性への配慮

上述の方法により ページ内の任意スクロール位置をURLとして表現できます。 「しおり」に登録しておけば 後からその位置にピンポイントで 戻ることが出来ます。

このURLを私的に利用する場合はいいのですが、 URLをメールなどとして誰かに送る、 Web上のリンクとして公開する場合、困った問題があります。 自分以外の第三者が使用するブラウザが自分の物とは異なるかもしれません。

一般にページ内の同じ位置(段落など)であっても ブラウザにより実際に表示される スクロール位置は異なります。 例えば字の小さいNetscape4.xでは スクロールの位置座標が小さめになります。 異なるブラウザに配慮したい場合はURLを以下の様にします。

【スクロール位置付URLの一般形】

http://...foo.html?kl_url_(UA1)_(X座標)x(Y座標)x(窓巾)_ _(UA2)_(X座標)x(Y座標)x(窓巾)_ _ (UA3)...=1

「UA1」,「UA2」はブラウザの種類を表す簡易文字列。 IE4以上なら「IE4」、Netscape4.xでは「NS4」などとなる。 KeyNaviのブラウザ判別定数「KL_IE4/NS4/NS6/OP6...」などと同義。 詳しくはブラウザ判別:KL_IE/NS/OP/MZ

ブラウザのウィンドウ巾が750pxだったとして 同じ内容を表すスクロール位置が Netscape4.xでは(0,160)、IE6では(0,220)になる場合以下の様に 表現できます。

上の様に「UA」を略した場合はデフォルトの位置として扱われます。 Netscape4.xでアクセスした場合は(0,160)に移動し それ以外のブラウザでは (0,220)に移動します。

IE4-6,NS6-7,Operaではデフォルトの文字サイズが「16px」で共通なので スクロール位置が前のほうだとそれほどブラウザ間差異が出ません。 逆にNS4では14pxで小さいので随分ずれます。
参考:各種フォントサイズとブラウザ互換性(<テキスト指定例リスト)

不特定多数の人にURLを配布したい場合は このような工夫をしたものを使うといいでしょう。

厳密にはユーザがブラウザの文字サイズを変更している可能性も 考慮する必要があります。 これは技術的に対応が難しいので考慮外としています。



【JavaScript@Keynavi.Net : ナビゲーション編 】
「Ctrl-矢印」でフォーカスを上下左右に移動できます。

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

トップへ戻る [1]
ホーム KeyNavi対応方法 [0] JavaScript@Keynavi.Netトップ [1] スクロール位置付URL ・サイトマップ [Shift-S]
キー割当表示[Shift-H] ─ KeyNavi Project 2003 ─