ご案内
ここは個別記事ページです。
サイトのトップへ戻るWeb拍手
一言連絡などにもどうぞ。
サイト内検索
お気に入りサイト
英数字・記号 あ か さ た は ま や 特殊--
イラスト投稿
ネタ成分多めです。
--
このサイトのバナー
リンクフリーです。
--
同人サイトのバナー
更新情報載せてます。
--
DL販売始めました
好評発売中です！
ページの先頭です。
[記事本文へショートカット]
ここは個別記事ページです。
サイトのトップへ戻る一言連絡などにもどうぞ。
--
ネタ成分多めです。
--
リンクフリーです。
--
更新情報載せてます。
--
好評発売中です！
◆2008年10月28日追記
おやすみばっかの☆yasiさんが２バイト対応版に改造された為、
ふるぱでもありがたく、そのソースを導入させていただきました。
⇒javascriptで検索語句をハイライト表示
☆yasiさん、反応激遅ですけど使わせていただきました。
ありがとうございます。
（注意）サイト内の検索窓の中に、検索エンジンで使用した単語を
放り込む機能はなくなります。２バイト対応を優先しました。
それらの機能を使う場合はこの記事の続きをお読み下さい。
（今のところ、二つのスクリプトを読み込んで両方の機能を
実装させる予定はありません。）
◆以上追記終わり。
構想から一週間、遂に完成！！
（いや最終的には完成というのは
おこがましくて導入が正しいんですけどね。
結局ある２サイト様の作られた物を見つけただけです。）
それは検索エンジンから来訪された方の、
検索キーワードをハイライト表示する機能です。
（※動作にはブラウザのJavaScriptが有効になっている必要があります。）
サイト管理者、そして閲覧者の方にとって朗報ではないでしょうか。
サイト管理者にとっては導入が凄く楽で、
閲覧者の方にとっては検索結果を探すのがかなり楽になります。
では早速、判り易く具体例を載せます。
記事の詳細ページではサイト管理者さま向けの導入方法を紹介します。
１.先ずはGoogle先生で検索開始。
今回対応出来る検索エンジンは多岐に渡るのですが
先ずは皆さんお馴染みのGoogle先生で検索です。
■検索結果の画像■
今回は試しに「ふるぱ-しゃる ツンデレ サンデー」の３単語で
トリプル検索してみます。検索語の間は半角スペースを空けて下さい。
全角スペースだと検索エンジンは検索語の一部なのか
区切りなのか判断に迷いますので。
【参考】実際に検索するとこんな感じです。
⇒「ふるぱ-しゃる ツンデレ サンデー」で実際にGoogle検索
2.さて、Google検索結果のトップに
ウチへのURLが来ているのでクリックしてみます。
■Googleの検索結果をクリックしてサイトを開く■
画像が荒いので見づらいですが、
先ほどの検索語に色が付いて表示されているのが判ると思います。
3.おまけで検索エンジンに入力した検索語が、
サイト内検索欄の中に自動的に挿入されます。
■サイト内検索に語句を自動挿入■
いかがでしょうか？
秋月は仕事柄、Google検索する事が多いのですが
クリックして入室した先のサイトで、目的の語句が
ぱっと見では見つからず、Ctrl+Fでサイト内検索したり、
Googleでリンクをクリックする時にキャッシュから
開く事も少なくありません。
そう、正に今回の導入は、Googleキャッシュの
色付け機能を擬似的に取り入れる事でした。
今回の導入で検索エンジンからお越しいただく
一元さんのブラウジングの一助となれば幸いです。
ここから先は、この機能を導入する為の説明です。
サイト管理者さま向けです。
物凄く簡単なのでご心配なく、です。
■謝辞
機能の実装方法を説明する前に謝辞を。
この機能のオリジナルであり基本部分は
FuCoder.comのscott.yang様が作られたものです。（英語ページです。）
ここがスタート地点です。大感謝。
２バイト文字を扱わないなら、こちらのサイトのスクリプトで十分です。
⇒Search Engine Keyword Highlight with Javascript
さて、日本語は２バイト文字なので上記サイト様の
スクリプトだけでは対応出来ません。
結論から言うと、最終的に上記サイト様のスクリプトを改造して
２バイト対応にされたサイトを見つけてました。
中国のサイトなのですが、残念ながら元の著作者が判りません。
元スクリプト配布のscott.yang様がフリーで配布されているので
ありがたく使わせていただく事とします。
■動作説明
2011/03/15修正
もう３年前に書いた記事なのでうろ覚えなのですが、
コメントを頂いたので記事を読み返してみると、
秋月の説明が大雑把過ぎたと思い修正致しました。
JavaScriptにて検索エンジンに入力された検索キーワードを取得し、
（正確にはURIのリファラーという部分から判断）
任意のhtmlソースの文字列の検索を行います。
そして該当する文字列を、<span class=”hilite”>…</span>タグで
くくります。
以下、検索結果のURLをクリックしてから、
ブラウザに画面が表示されるまでの流れです。
１．任意の単語を検索サイトに入力して検索する。
２．ブラウザに検索結果が出力（表示）される。
３．出力されたサイトのURLをクリックする。
４．対象サイトを表示するのに必要なファイルがダウンロードされる。
htmlファイルや画像ファイル、スタイルシート、各種スクリプト等など。
＜この時のブラウザの動きはダウンローダーと言えます。＞
５．ブラウザがローカルのハードディスクにキャッシュしたhtmlソースの内容を
メモリに読み込む。
６．メモリに読み込んだ内容(html言語)を翻訳する。
＜この時のブラウザの動きはコンパイラと言えます。＞
７．翻訳した結果をブラウザに表示する。
＜この時のブラウザの動きはビューワもしくはレンダラーと言えます。＞
以上が、
検索サイトをクリックしてからブラウザにページが表示されるまでの
少し細かい流れになります。（今回の話をややこしくする余分な要素は端折っています。）
今回導入するJavaScript は、６と７の間で動作します。
その動きを6.5とします。
ただ6.5の説明をする前にリファラの説明をします。
ブラウザは、サイト情報をローカルにキャッシュするだけではなく、
HTTPヘッダの１つであるリファラという情報を持っています。
リファラには
「どのURLから（検索サイト経由ならどんな単語を検索して）きたか」
といった情報を持っています。
Googleで「ふるぱ」という単語を検索した時のリファラ（の一部）は、
http://www.google.co.jp/search?hl=ja&q=ふるぱ+++&lr=
になります。
さて上記を踏まえて6.5を説明します。
６．メモリに読み込んだ内容(html言語)を翻訳する。
6.5.リファラから検索単語を抜き出す。（おそらくメモリ上）
次に５．でメモリにロードしたhtmlのソースの中から検索単語とマッチする値を探す。
マッチした値を今回導入するスタイルシートで定義したタグでくくる。
そうして「検索単語を色付きタグでくくったhtmlソース」を
メモリ上に上書きでロードする。（つまりhtmlの翻訳作業を追加で行っています。）
７．翻訳した結果をブラウザに表示する。
如何でしょうか？
３年前に「Keyword Highlighter」を導入した時は、
導入後にブラウザのJavaScriptをわざとオフにして
検索結果の色付け機能を停止出来る事を検証したのですが、
追記を行っている今回は、「リファラから取得した検索単語を
元にメモリ上で作業を行っている」という事を実証する為に、
特定サイトにリファラを送信しないFireFoxのプラグイン「RefCotrol」を
導入してみました。
結果は、見事成功でした。
上記プラグインを導入後、リファラを吐かないサイトに
「http://fullpa.net/blog/」を指定して、
Googleで「ふるぱ」と検索して出力されたトップページの
URLをクリックしてページを開いても「ふるぱ」の文字は
色の変更は起こりませんでした。
■導入方法
1.先ずはJavaScriptファイルをダウンロードして下さい。
⇒ダウンロード：keyword.js（8.97kb）
2.ダウンロード後はお使いのサイトへＦＴＰ等でアップロードして下さい。
ファイルのパーミッションは特に変更は要らないと思います。
秋月は644で実行しています。
ご不明な場合はお使いのレンタルスペースのマニュアルを読まれるか、
管理者にお問い合わせ下さい。
3.機能を導入したいページに上記JavaScriptファイルへの
リンクを張ってください。
書式は下記のとおりです。<head>タグと</head>タグの間に記述して下さい。
<script type="text/javascript" src="http://fullpa.net/blog/common/js/keyword.js"></script>
http://fullpa.net/blog/common/js/keyword.js の部分は
ファイルをアップロードした先のURLへ変更して下さい。
4.最後に検索キーワードの色付けの設定です。
これはスタイルシートで設定します。
お使いのスタイルシートファイルに下記のコードを追加して下さい。
/*[.検索エンジンからの検索キーワードをハイライト表示]
-------------------------------------------------------------*/
.hilite { background-color: #99ffff;}
.hilite1 { background-color: #99ff99;}
.hilite2 { background-color: #ff99ff;}
.hilite3 { background-color: #99ffff;}
.hilite4 { background-color: #ff9999;}
スタイルシート(.css)ファイルが良く判らない、
htmlファイルに直接書式を指定したい、という方はこちら。
<style type="text/css">
.hilite { background-color: #99ffff;}
.hilite1 { background-color: #99ff99;}
.hilite2 { background-color: #ff99ff;}
.hilite3 { background-color: #99ffff;}
.hilite4 { background-color: #ff9999;}
</style>
上から順に検索キーワードの１つ目、２つ目に対応しています。
この設定だと５種類を用いた検索キーワードまで色付けされ
それ以降の検索キーワードには色が付きません。
通常は５つでも多いくらいなので問題ないでしょう。
これは必要なら増やす事が可能です。
増やす場合は.hiliteの末尾の数字を半角で足して下さい。
スクリプトファイルの変更は一切必要無いです。
以上で設定完了です。
色の変更はUIC様の色見本などを参考にされると便利です。
■動作確認
JavaScriptが動作する下記ブラウザで動作確認しています。
・Internet Explore5.0/6.0
・Lunascape3.5/4.0
・Firefox1.5
・Netscape4.7/7.1
・Opera8.5
・OperaMobile for Willcom W-ZERO3
■対応検索エンジン
・AllTheWeb
・百度（噂のバイドゥですね）
・Google
・Lycos
・MSN
・Yahoo
・他にも中国のサイトがいくつか。
（要望があれば対応サイトを増やす予定です。）
■その他
Q1.ライセンスはフリーですか？
A1.と思われます。理由は記事文中に書いたとおりです。
Q2.改造しようとしてエディタで開いたら文字化けしました。
A1.JavaScriptファイルの文字コードはUTF-8で保存しています。
もし文字化けが起こる場合はエディタで
文字コードを変えて保存し直して下さい。
Q3.どんなサイトでも導入出来るのですか？
A1.ブログどころかホームページならどこでも導入できます。
ちなみにふるぱ-しゃるは、htmlページにも
phpページにも導入しています。
ただしお使いのページが例えばWordPress 等の
専用ブログソフトウェアであれば、そのソフトに特化した
ツールをお探しになるのも１つの手かもしれません。
Q4.ハイライト以外に文字の加工は出来ないの？
出来ます。ふるぱ-しゃるではこの記事を書いた後に
文字を太くする設定を追加しました。
方法はスタイルシートにfont-weight: bolder; という
指定を追加しています。他にも色々とお試し下さい。。
ご質問があればコメント等でお聞き下さい。
凄く簡単な事ならお答え出来るかもしれません。
まさに今、勉強中です。
2011/03/16追記。私事多忙につきフォローが難しいです。
出来る限り記事に詳細を追記しておきますのでご容赦下さい。
記事へのリンク用ソース：
この記事をあなたのサイトの中で文中リンクされる場合は、
上記のリンク用ソースをコピーしてお使いになられるとお手軽です。
現在スタイルシートが読み込まれていない状態です。
スタイルシートはサイトのデザインを定義しています。
累計： 本日：
昨日：
Powered by MovableType Syndication via RSS.
コメント
お世話になります
文中の
（正確にはURIのリファラーという部分から判断）
任意のhtmlソースの文字列の検索を行います。>>
の意味がよくわかりません
ご教授ください。初学者なもので申し訳ありません
今はmysqlより登録された要素を表示してますが、キーワードだけではなくて全文ハイライト表示してしまいます
4945：投稿日時:2011年03月15日 19:40 投稿者:season [返信]
はじめまして、seasonさん。
秋月と申します。
説明記事が不親切だと思い
ブラウザの動作を細かく追記致しました。
ご参照いただけますでしょうか？
＞今はmysqlより登録された要素を表示してますが、キーワードだけではなくて全文ハイライト表示してしまいます
判る範囲で切りわけをさせて頂きます。
ハイライト表示されるという事は、
「ブラウザのJavaScriptは動作している。」
「検索結果のリファラ情報をブラウザは取得出来ていない」
「もしくはhtmlソースとマッチングしてスタイルシートで
ハイライトする時に対象文字列を誤読している。」
となります。
なので、記事に追記させていただいたブラウザ動作のフローの中の
6.5 にあたる「HTMLソースの再翻訳作業」に失敗していると思われます。
＞今はmysqlより登録された要素を表示してますが
あと、上記がどのようなサイトの構成でどういった動きを
期待されているのかがちょっと理解できませんでした。
詳細が判らないので、これは１つの提案ですが
一旦最小構成で、本スクリプトが動作するかテストされては如何でしょうか？
本家scott.yang様のサイトからダウンロードできるzipには、
JavaScriptとcssの内容が盛り込まれたhtmlがあります。
またhtmlの中には、検索エンジンの検索結果の一部であるリファラーを
擬似的に組み込んであります。
リファラーが私の記事の追記説明で判りづらい場合は、
検索エンジンのクエリーと思っていただいたら
ニュアンスがつかめるかと思います。
ご参考になれば幸いです。
4947：投稿日時:2011年03月16日 00:57 投稿者:秋月らせん [返信]