- 2008-05-29 (木) 22:42
- web
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 : 検索エンジンリスト修正2009.12.11 : 検索エンジンリスト修正
js内に設定項目もありますが、基本的に設定しなくても動きます。
ハイライトのスタイルを変えたい場合はjsファイルのはじめの数行で設定してください。
文字コードはutf-8、改行コードはCRLFにしてありますので、windows付属メモ帳でも編集可能です。
■実装方法
1.アップロード
2.head内に
<script type="text/javascript" src="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! Bing goo ocn 百度 BIGLOBE @nifty AOL.JP livedoor au one Excite
正規表現がちょっとだけわかれば、見よう見まねで追加できます。
わからなければコメント欄やメールフォーム等からお聞き下さい。
(スクリプトの内容はあまり理解してませんが><)
- [Cat:web]
- Newer: 箒持ったあなたが好き~♪
- Older: 共通点
Comments:7
- jon 08-10-27 (月) 19:34
-
探していた物が見つかったといいますか、カスタマイズしやすい物が見つかった感じです。
ZenCartで使わせていただきました。
ありがとうございます。 - 秋月らせん 08-10-28 (火) 17:41
-
こんにちは☆yasiさん。
自宅謹慎(風邪)の秋月です。
というかお久しぶりです!凄い今更なんですけど(記事はリアルタイムで読ませていただきました)
☆yasiさん改造のjsを使用させていただいたのでご報告まで。
ではでは。 - ☆yasi 08-10-28 (火) 22:55
-
jonさん、
何番煎じかわからないくらいの記事ですが、
お役にたててなによりです。
また不具合等ありましたらなんなりとお申し付けください。
(対応できるかどうかあやしいですが)
わざわざコメントいただきありがとうございました。 - ☆yasi 08-10-28 (火) 23:30
-
秋月さん、ご無沙汰しております!
今回も風邪が長引いていらっしゃるようで、
野菜スープ飲んで温かくしてお休みください。実はこの記事書くまでは秋月さんとこのを
こっそり使わせていただいてたのですが、
どうもFireFox+Google検索でうまくハイライトできないことがあったので、
Scottさんとこみてみたら新ver.でてました。
うん、でも最近はほとんどutf-8エンコードうようになってる感じですね。
まぁ本当は自分でハイライトのスクリプト途中まで書いてたんだけど、
レスポンス悪すぎたのであきらめました。orzということでお大事に!コメントありがとうございました!
ps.またそのうちそちらで~ - pyon-yon 09-12-11 (金) 7:50
-
便利なツールをご紹介くださってありがとうございます。
このjavascriptを商用サイトに組み込む際に、ライセンス等の面で注意しなくてはならないことがありますか?
よろしくお願いします。 - ☆yasi 09-12-11 (金) 12:11
-
pyon-yonさん、
コメントありがとうございます。>商用サイトに組み込む際に、ライセンス等の面で注意
本家のScott Yangさんのコードもヌルコムさんのコードもライセンスに関しては何も触れてはいませんが、自由にページに組み込んでよいとの(意思)表示が見受けられます。商用サイトでも特に制限なく自由に組み込んだり改変したりしてもよいと思います。動作しない等不具合がございましたらまたご連絡ください。
- pyon-yon 09-12-11 (金) 13:15
-
ご親切な回答、ありがとうございました。スタイル等、デフォルト状態ですが、とても良く動いています。
Trackbacks:1
- Trackback URL for this entry
- Listed below are links to weblogs that reference
- javascriptで検索語句をハイライト表示 from おやすみばっか
- trackback from ふるぱ-しゃる 08-10-28 (火) 17:33
-
検索キーワードをハイライト表示化
検索エンジンで入力された検索キーワードを自サイト内でハイライト表示させる機能の紹介です。JavaScriptを使います。勿論2バイト(日本語)対応です。オマケ機能もあります。