実装の例

　例えば、Google で"movabletype mixi プラグイン"を検索すると、上位にこのサイトの 1 ページである mixiSyncの紹介ページが表示されると思うのでリンクを開いてみてください。ページの中にある "MovableType" や "mixi" といった単語がハイライト表示されているのがご覧になれると思います。
　対応している検索エンジンは、AllTheWeb、Google、Lycos、MSNとYahooとのことで、日本語でもほぼ期待した通りに動作してくれました。また検索エンジン以外からの訪問の場合にはハイライト表示は機能しないので、 他のビジタの方には従来通りにサイトを閲覧して頂けます。

組込み方

　既存のページへの組込みは至って簡単です。ハイライト表示機能を使いたいページで JavaScript ファイルを一つ読み込むだけで、ページ全体に含まれる文字列を対象にしてハイライト表示が行なわれるようになります(特定の要素内でだけハイライト機能を有効にする方法は後述)
　JavaScript ファイルを読み込むだけなので、MovableTypeやWordPress、XOOPS、WikiなどのCMSから、一般的なホームページでも幅広く使用することができます。

se_hilite.js のダウンロード

　Scott Yang氏が Search Engine Keyword Highlight with Javascript で公開されている se_hilite.js 1.2 (最新版)を使用します。

se_hilite.js の書換え

　ダウンロードした 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 の組込み

　ハイライト表示機能を使いたいページで 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>