2008-05-29

Wordpressにおいて検索語句のハイライト表示は
プラグイン：Search Word Highlight for Multibyte
で可能らしいのですが、wp-cacheと相性が悪いのと、
phpで実現しているため直接ハイライトのタグがガシガシと書き込まれるのは少しいやですので、
私はjavascriptでの実装にすることにしました。

javascriptでの検索語句ハイライトの実装は、
JavaScriptで検索ワードをハイライトする - Open MagicVox.net
検索キーワードをハイライト表示化 | ふるぱ-しゃる
といった記事がとても参考になりますが、日本語対応が完全ではないようです。
ということで本家Scott Yangさんの
Search Engine Keyword Highlight with Javascript
のversion1.5を日本語に対応させました。（といっても後述の通り自分はほとんど何もしてませんが）

se_hilite_jp.js
2008.06.20 ： 無限ループすることがあったので修正2008.08.28 ： 検索エンジンリスト修正

js内に設定項目もありますが、基本的に設定しなくても動きます。
ハイライトのスタイルを変えたい場合はjsファイルのはじめの数行で設定してください。
文字コードはutf-8、改行コードはCRLFにしてありますので、windows付属メモ帳でも編集可能です。

■実装方法
1.アップロード
2.head内に
<script type="text/javascript" href="http://～～～/se_hilite_jp.js"></script>

■設定項目
●4-10行目ぐらい
ハイライトタグのclassに対するスタイルを設定。

●11-16行目ぐらい
/*ハイライトを指定id内に絞り込み。未設定の場合bodyタグ内*/
 elementid:’container’,
/*ハイライト文字列の個数がこれ以上の値になったらいったん表示。*/
 max_nodes:1000,
/*ハイライトタグのベース名。*/
 style_name:’hilite’,
/*検索語句が複数のときそれぞれ別のスタイルにするか*/
 style_name_suffix: true

●17-33行目ぐらい
検索エンジン等の設定。正規表現で、よくわかりませんがエスケープ文字は「\\」ぽいです。
例えばGoogle検索の場合、[".*google\\.","q"]ですが、
第一要素が検索エンジンを識別する正規表現
第二要素のqは、、、例えば、、、
「純白 Maria White 17」で検索すると
http://www.google.co.jp/search?hl=ja&q=%E7%B4%94%E7%99%BD+Maria+White+17
といったアドレスが表示されますが、赤部分が検索語句を表しています。q=のqを指定。
といった感じで新しい検索エンジンを設定できます。

■改点
●3種類のurlエンコード(UTF-8,EUC-JP,Shift_JIS)のデコードに対応。
ヌルコムアーカイブス・デジタル制作室さんのところで公開されているライブラリ、Escape Codec Libraryの一部をマージさせていただきました。
javascriptに実装されているurlデコード関数decodeURIComponentとかdecodeURIは、utf-8でエンコードされた文字列しか扱えないようです。日本語の検索エンジンは、utf-8の他に、EUC-JP、Shift_JISでurlエンコードを行っているものもあるので、その場合、標準実装されている関数ではデコードができません。そこで上記ライブラリを使用させていただきました。

●全角スペースでの語句の区切りに対応。
日本語検索では全角スペースで区切ることも多いので。

●検索エンジンの追加編集等。
日本語の主要検索エンジンはある程度網羅しているつもりです。
Google Yahoo! MSN Live Search Ask.jp goo ocn 百度 BIGLOBE @nifty JP.AOL.COM livedoor au one Excite Technorati
正規表現がちょっとだけわかれば、見よう見まねで追加できます。

わからなければコメント欄やメールフォーム等からお聞き下さい。
（スクリプトの内容はあまり理解してませんが＞＜）