JavaScriptで検索ワードをハイライトする

Posted by
ぴろり
Posted at
2007/04/12 22:38
Trackbacks
関連記事 (1)
Comments
コメント (1)
Post Comment
コメントできます
Category
ソフトウェア カテゴリ

 ユーザがGoogleやYahoo!などの検索エンジンを経由してサイトを訪問をした際に、そのユーザが検索に使ったページ中の検索語彙をハイライト表示する方法を紹介します。ユーザはハイライト表示された部分を流し読みすることで、必要とする情報を素早く発見できるようになります。JavaScript のファイルを一つ読み込むだけなのでとてもお手軽です。

この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  

実装の例

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

組込み方

 既存のページへの組込みは至って簡単です。ハイライト表示機能を使いたいページで 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; }

高度な組込み方 その1

 se_hilite.js ファイルを組み込んだだけではページ全体が処理の対象となってしまうため、例えばコメントの名前欄やアフィリエイトの商品名などの意図しない部分までもが対象になってしまいます。
 そこで、ハイライト表示を有効にしたい領域を content または container という ID を持つ DIV などで囲むと、その要素の中の文章だけが対象になります。

ここはハイライト表示の対象になりません!
<div id="content">
ここはハイライト表示の対象となります。
記事の本文などハイライト表示の対象となる文章を記述します。
</div>
ここはハイライト表示の対象になりません!

高度な組込み方 その2

 このサイトでは、記事の概要文、本文、トラックバック欄、コメント欄についてハイライト表示を行なっていますが、元のコードでは複数の領域に対してハイライト表示を有効にする方法が見つかりませんでした。そこでスクリプトに少し改造を施して、ハイライト表示を有効にする領域を自由に設定できるようにしてみました。元のコードに 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>
この記事を Delicious に追加する   このエントリーをはてなブックマークに追加  


この記事を読んだ人はこんな記事も読んでいます記事リコメンデーションについて

カバー画像:MovableType の記事を mixi 日記にお手軽コピーするプラグイン:mixiSync

関連記事/トラックバック (全 1 件中、最新 5 件まで表示しています)

星屋工作室 のスクリーンショット
タイトル
検索語の部分をハイライト表示するJavascript
Trackbacked at
2009/07/03 14:49
from
星屋工作室
概要
他のサイトで見たことがあると思いますが、 検索語をハイライトで見やすくする方法で...

この記事にトラックバックを送るには?

寄せられたコメント (全 1 件中、最新 5 件まで表示しています)

Posted by
碇敏昭碇敏昭
at
2007/09/19 11:52
ID
zfdzsxDc
上西 宏幸 様
『検索ワードをハイライトする』機能で困っておりコメントさせて
頂きました。もし情報をお持ちでしたら教えてください。
職場でWebcelというソフトでキーワードを3個設定し、アクセスの
DBより情報を検索する仕様を運用してます。
その際、利用者より『検索ワードに色を付けてほしい』との要望が
あり、上西様のサイトにたどり着きました。
検索エンジン経由でなく、『検索キーワード』を認識したところから
スタートする展開で『検索ワードをハイライトする』機能ができない
ものかと考えているのですが。
以上 宜しくお願いします

コメントを投稿する

 
 (必須, 匿名可, 公開, トリップが使えます)
 (必須, 匿名可, 非公開, Gravatar に対応しています)
 (必須)
スパム コメント防止のため「投稿確認」欄に ランダムな数字 CAPTCHAについて を入力してから送信してください。お手数ですがご協力のほど宜しくお願いいたします。