ユーザが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 を開いて次の行を書き換えてください。 書換えが終わったら上書き保存してサーバにアップロードしておきます。
ハイライト表示機能を使いたいページで se_hilite.js を読み込みます。
最後にハイライト表示される領域のスタイルを定義します。
se_hilite.js の標準では，
ハイライトされる領域は検索語彙の 1 番目が htlite1，
2 番目が hilite2…という名前のクラスが適用されます。
そこでお使いの CSS に以下のようなスタイル定義を追加します。
se_hilite.js ファイルを組み込んだだけではページ全体が処理の対象となってしまうため，
例えばコメントの名前欄やアフィリエイトの商品名などの意図しない部分までもが対象になってしまいます。
そこで，ハイライト表示を有効にしたい領域を content または container という ID を持つ DIV などで囲むと，
その要素の中の文章だけが対象になります。
このサイトでは，記事の概要文，本文，トラックバック欄，コメント欄についてハイライト表示を行なっていますが，
元のコードでは複数の領域に対してハイライト表示を有効にする方法が見つかりませんでした。
そこでスクリプトに少し改造を施して，
ハイライト表示を有効にする領域を自由に設定できるようにしてみました。
元のコードに Hilite.addTarget というメソッドを追加して，
このメソッドを使って処理の対象となる要素を自由に追加できるようになっています。
開発の継続のためには、技術書の購入やバグの修正、新機能の追加、コメント欄でのユーザサポートなど、意外にお金と時間を費やします。そこで、「ビールでも奢ってやるか」ですとか「これで牛丼(並)でも食え」と仰るお方からのお申し出をいつでも受け付けております。どうぞ、よろしくお願いいたしますm(_ _)m
寄付金の送付には PayPal の小額決済をご利用いただけます。
寄せられたコメント (全 1 件中、最新 5 件まで表示しています)
上西 宏幸 様
『検索ワードをハイライトする』機能で困っておりコメントさせて
頂きました。もし情報をお持ちでしたら教えてください。
職場でWebcelというソフトでキーワードを３個設定し、アクセスの
ＤＢより情報を検索する仕様を運用してます。
その際、利用者より『検索ワードに色を付けてほしい』との要望が
あり、上西様のサイトにたどり着きました。
検索エンジン経由でなく、『検索キーワード』を認識したところから
スタートする展開で『検索ワードをハイライトする』機能ができない
ものかと考えているのですが。
以上 宜しくお願いします