L
次のページ
H
前のページ
U
上のページ

« テンプレート要素 EntryBody の置換機能に制約 | Main | ブログにショートカットキーを入れる - 設置 »

2008年11月06日

ブログにショートカットキーを入れる - 機能紹介

このブログに記事やページ間を移動するためのショートカットキーを入れてみたのでその設置について解説します。まずは今回入れたショートカットキーがどんな機能を実現するものかについて説明します。

ブログのフロントページ、カテゴリページ、アーカイブページ、エントリページのメイン側の段の先頭に次のような表示が増えています。

J
次の記事
K
前の記事
L
次のページ
H
前のページ
O
記事のページ
U
上のページ

機能の説明はこれで大体わかると思いますがちょっと補足しましょう。

これは特定のキーを押すと対応するサブ機能が呼び出される機能です。キーボードから手を離さなくてもブログ内を行ったり来たりしやすくなります。マウス操作に困難さがあってキーボード操作の方がいいという人にも効果があるでしょう。

ただし、キーを押しただけでページ内検索が始まるようなオプションや機能追加を付けているカスタマイズされたブラウザではこの機能までキーが押されたという情報が届かないので効果がありません。多くのブラウザではそういうオプションが用意されていてもデフォルトでは有効ではありませんし、そういうオプションがなくサードパーティ製の機能追加を導入する必要があるブラウザも多いです。ですからキーを押すという行為をページ内検索に使用するというのは多くの場合ユーザの選択です。ページ提供者はそれを尊重すべきです。

また、ただキーを押すのではなく ctrlalt という装飾を付けたキーに対応するという選択肢はありません。なぜならそういう装飾が付いたキーは、OS のショートカット、ブラウザのショートカット、HTML に元々あるアクセスキーに割り当てられているからです。空いているキーが少ない上にページ内検索よりもユーザがカスタマイズしている場合が多いと予想できます。環境依存度合いが大き過ぎます。

次の記事

フロントページ、カテゴリページ、アーカイブページではそのページに複数の記事が掲載されています。この記事群を上から順に「カレント」にする機能です。カレントになった記事はそれの先頭がウィンドウの上の方になるようにスクロールされ、記事の部分にクラス current が割り当てられます。クラス current が割り当てられた部分の表現は CSS 次第ですがこのブログでは左側に灰色のボーダーが付くようにしています。

ページの種類で機能を区別していないので一つしか記事がないエントリページでも「カレント」にしてしまいます。

前の記事

「次の記事」と方向が逆であること以外は同じです。記事群を下から順に「カレント」にします。

次のページ

カテゴリページ、アーカイブページ、エントリページで、今のページの後のページを開きます。

前のページ

カテゴリページ、アーカイブページ、エントリページで、今のページの前のページを開きます。

記事のページ

フロントページ、カテゴリページ、アーカイブページで「次の記事」や「前の記事」によって現在カレントになっている記事のページを開きます。

上のページ

カテゴリページ、アーカイブページ、エントリページでフロントページを開きます。

「次の記事」「前の記事」「記事のページ」以外の機能は HTML ヘッダーの link 要素の rel 属性に Prev, Next, Start を使ってリンクを示したのと情報としては同じです。今のページとそのように関連づけられたページを開くためのインターフェースが用意されている Opera のようなブラウザではなくても容易にページ間を移動できるようにするという効果があります。

また「次の記事」「前の記事」は複数ある記事への論理的なジャンプを実現します。ブラウザに備えられているスクロール等は現在どこが表示されているのかを確認しながら行わなければ行き過ぎたりしてしまいます。このブログでは一覧されている記事の概要だけ載せているので比較的容易ですが、フロントページなどに各記事の全文を載せている場合には特に効果があります。

そして「記事のページ」はこの少しわかり難い記事の固定リンクへのジャンプを実現します。このブログで採用している「続きを読む」リンクは概要を読んだ後のポイントへジャンプします。読むという行為にはこちらの方が親切ですが、必ずしもそういうジャンプ先を用意している記事ばかりでもありません。そういうときは「続きを読む」リンクは現れません。確実なジャンプ先は固定リンク先です。