ユーザがGoogleやYahoo!などの検索エンジンを経由してサイトを訪問をした際に、そのユーザが検索に使ったページ中の検索語彙をハイライト表示する方法を紹介します。ユーザはハイライト表示された部分を流し読みすることで、必要とする情報を素早く発見できるようになります。JavaScript のファイルを一つ読み込むだけなのでとてもお手軽です。
例えば、Google で"movabletype mixi プラグイン"を検索すると、上位にこのサイトの 1 ページである mixiSyncの紹介ページが表示されると思うのでリンクを開いてみてください。ページの中にある "MovableType" や "mixi" といった単語がハイライト表示されているのがご覧になれると思います。
対応している検索エンジンは、AllTheWeb、Google、Lycos、MSNとYahooとのことで、日本語でもほぼ期待した通りに動作してくれました。また検索エンジン以外からの訪問の場合にはハイライト表示は機能しないので、
他のビジタの方には従来通りにサイトを閲覧して頂けます。
既存のページへの組込みは至って簡単です。ハイライト表示機能を使いたいページで JavaScript ファイルを一つ読み込むだけで、ページ全体に含まれる文字列を対象にしてハイライト表示が行なわれるようになります(特定の要素内でだけハイライト機能を有効にする方法は後述)
JavaScript ファイルを読み込むだけなので、MovableTypeやWordPress、XOOPS、WikiなどのCMSから、一般的なホームページでも幅広く使用することができます。
Scott Yang氏が Search Engine Keyword Highlight with Javascript で公開されている se_hilite.js 1.2 (最新版)を使用します。
ダウンロードした se_hilite.js そのままでは日本語の単語区切りを正しく判断しません。そこでエディタで se_hilite.js を開いて次の行を書き換えてください。書換えが終わったら上書き保存してサーバにアップロードしておきます。
// Configuration: Hilite = { /** * Whether we are matching an exact word. For example, searching for * "highlight" will only match "highlight" but not "highlighting" if exact * is set to true. */ exact: false, // 'true' を 'false' に書き換えます
ハイライト表示機能を使いたいページで se_hilite.js を読み込みます。
<script src="se_hilite.js"></script>
最後にハイライト表示される領域のスタイルを定義します。se_hilite.js の標準では、ハイライトされる領域は検索語彙の 1 番目が htlite1
、2 番目が hilite2
...という名前のクラスが適用されます。そこでお使いの CSS に以下のようなスタイル定義を追加します。
/* * Hilite for se_hilite.js */ .hilite1, .hilite4, .hilite7 { background-color: #ffa; } .hilite2, .hilite5, .hilite8 { background-color: #faf; } .hilite3, .hilite6, .hilite9 { background-color: #aff; }
se_hilite.js ファイルを組み込んだだけではページ全体が処理の対象となってしまうため、例えばコメントの名前欄やアフィリエイトの商品名などの意図しない部分までもが対象になってしまいます。
そこで、ハイライト表示を有効にしたい領域を content
または container
という ID を持つ DIV などで囲むと、その要素の中の文章だけが対象になります。
ここはハイライト表示の対象になりません! <div id="content"> ここはハイライト表示の対象となります。 記事の本文などハイライト表示の対象となる文章を記述します。 </div> ここはハイライト表示の対象になりません!
このサイトでは、記事の概要文、本文、トラックバック欄、コメント欄についてハイライト表示を行なっていますが、元のコードでは複数の領域に対してハイライト表示を有効にする方法が見つかりませんでした。そこでスクリプトに少し改造を施して、ハイライト表示を有効にする領域を自由に設定できるようにしてみました。元のコードに Hilite.addTarget
というメソッドを追加して、このメソッドを使って処理の対象となる要素を自由に追加できるようになっています。
<script type="text/javascript"> // 検索エンジン経由のアクセスの場合に検索語彙をハイライト表示にする Hilite.addTarget( document.getElementById( 'text' )); Hilite.addTarget( document.getElementById( 'more' )); Hilite.addTarget( document.getElementById( 'trackback' )); Hilite.addTarget( document.getElementById( 'comment' )); </script>
寄せられたコメント (全 1 件中、最新 5 件まで表示しています)
『検索ワードをハイライトする』機能で困っておりコメントさせて
頂きました。もし情報をお持ちでしたら教えてください。
職場でWebcelというソフトでキーワードを3個設定し、アクセスの
DBより情報を検索する仕様を運用してます。
その際、利用者より『検索ワードに色を付けてほしい』との要望が
あり、上西様のサイトにたどり着きました。
検索エンジン経由でなく、『検索キーワード』を認識したところから
スタートする展開で『検索ワードをハイライトする』機能ができない
ものかと考えているのですが。
以上 宜しくお願いします