29日目:すべてに検索がかけられるようにする
どんな Webサイトもサイト内検索をつけるべき。以上。
良いサイト内検索のためのルール:
- 全ページに検索ボックスをつけよう。できれば "above the fold(ページが表示された時、スクロールせずに閲覧可能な可視領域。)"に。 (スクロールしなくても見えるようにね)
- 初期設定ではすべてを検索の対象にようにしておこう。投稿、コメント、両方を検索の対象にするオプションがついてるなら、「両方」を選んでおこう。
- 検索のボックスを詳細オプションをつけすぎてゴチャゴチャにならないように。オプションには、ブーリーン値(trueかfalse)、大文字小文字の区別、正規表現などなどがあるね。まずは Google をマネした初期設定(すべてのキーワードを含む、大文字小文字を無視、正規表現は使わない)にしておいて、あとは全部「詳細検索オプション」のほうへ移そう。
- 検索のボックスには 適したラベルとアクセスキーを設定しよう。
accesskey="4"
がオススメ。(注:15日目で、どうやってaccesskey
を検索フォームに指定するか言ったけど、間違ってた。クロスブラウザ率を高めるためには、accesskey
は<input>
じゃなくて<label>
につけたほうがいいや。以下の正しい例を参照してください。
誰がトクする?
ジャッキー、マイケル、ビル、リリアン、マーカスと、まぁその他世界中すべてのひとが、うまく作られた検索エンジンには助けられると思うよ。特にブログとかニュース系のサイトだと、コンテンツがまず時系列で整理されてるから、メインのページから外れた特定の記事を探すのはすごいイライラする。Google で使える "site:domainname.com" っていうの(検索対象を特定のドメインのみに絞ってくれる)を知ってる人は少ないし、Google がインデックスをするのはどうせ月に1回だからね。自分でサイト検索をつけよう。
どうしたらいい?
Movable Type ユーザは MT-Search プラグインを使ってみるといい。これから僕が MT でサイト作るときにはコレ使うことに決めてる。メインのブログ(投稿数900強)で使ったら割と遅かったけど、ページ数がそこまでないサイトならイイ感じらしい。アップデートはされてないみたいだけど使えるよ。(訳者注:MovableType 2.5 からは本家に導入されたので、プラグインの必要なし。バージョン2.5以降にはMovableType自体にすでに組み込まれている。)
独自ドメインでブログを運営してる人は、サードパーティの検索機能をつけてコンテンツをインデックス、検索結果をオンデマンドで表示することもできる。Atomz Express Search は Blogger.com のオススメ。(訳者注:2003年に Google が Blogger.com の運営会社 Pyra Labs を買収。以後 Blogger.com でも Google フリー検索 を奨めている。)Google フリー検索は、僕も自分のブログで使ってる。どっちもある程度カスタマイズできて、なかなか早い。ただコンテンツのインデックスは分刻み秒刻みで最新ってわけにはいかないけどね。検索ボックスの見ためがカスタマイズできるよ。僕のはこんなふう(<label>
と accesskey
の使いかたに注目):
<form id="searchform" method="get" action="http://www.google.com/custom">
<p id="searchlabel"><label for="q" accesskey="4">このサイトを検索:</label></p>
<p id="searchinput"><input type="text" id="q" name="q" size="18" maxlength="255" value=" " /></p>
<p id="searchsubmit"><input type="submit" value="Search" />
<input type="hidden" name="cof" value="LW:116;L:http://diveintomark.org/images/eyes.jpg;LH:68;AH:left;GL:0;S:http://diveintomark.org/;AWFID:0d8ffcebe359c844;" />
<input type="hidden" name="domains" value="diveintomark.org" />
<input type="hidden" name="sitesearch" value="diveintomark.org" />
</p>
</form>
注:これは自分のブログにカット&ペーストできないから気をつけて。Google フリー検索を使うには、サインアップして、見えない cof
部分に入れるための自分専用のコードをもらってね。
さらなる情報源(英語)
- Phil Ringnalda: mt-search.cgi and MySQL。MT-Search を Movable Type 2.2 と MySQL で動かすための重要な情報。
- Atomz Express Search。
- Google フリー検索。
- Jukka Korpela:
accesskey
で HTML のフォームとリンクのアクセシビリティを高める。終わりのほうに、なんでサイト検索のaccesskey
に "4" を使うといいかが書いてある。 - Jakob Nielsen: ナビゲーションは役立っているか?
ユーザは多くの場合、情報探しの戦法として検索機能に頼っている。
- Jakob Nielsen: 検索のユーザビリティ。5年のもの(注:2002年時点で。2005年の今では8年前のもの)だけど、今でも驚くほど通用する。
- PHP.net: URL ハウツー。 PHP.net には最強のサイト検索がついてる。よくある検索ボックスだけじゃなくて、カスタマイズされた 404 エラーのページ(普通は「ページが見つかりません」のエラーを返すだけのもの)を使って、URL に応じて賢い検索をしてくれる。php.net/phpinfo をブラウザのロケーションバーに入れて検索すると、php.net は phpinfo ファンクションの情報ページへとリダイレクトしてくれるんだ。