ちょっと前の、ハンチングで書いたエントリー調べたくってMTの検索機能を久方ぶりに使ってみた。なんかキーワード検索すると、自分の感覚的にその対象キーワードが太文字強調で背景色が付いた「ハイライト表示」されてないと、どこにそのキーワードが書かれている記事なのか探すのが大変で気持ち悪い。
きっと、もう、カラダにGoogleの検索結果ページのハイライト表示がカラダに染み付いてるからじゃねーかと思った。Googleの影響はこんなとこにも及んでいたとは。
で、MT検索結果をキーワードハイライトしたくなっていろいろ考えてみた。最初はプラグイン作っちまおうかと思ったけど、プラグイン作ったことないしよくわかんないし何よりめんどくさいので、なんか簡単に、つか、JavaScript辺りでチャチャっと出来ないもんかと、日頃使ってないアタマをたまには使ってみる。
検索結果出力ってあくまでもMTのCGIが出力するのでその出力結果に対して操作を加えようと思ったらJavaScriptだけじゃできねーなー。HTMLの静的コンテンツをクライアントで好き勝手にいじるとしたらDHTMLで強引にスクリプツしようかと、DHTMLもよくわかってない俺が適当に「検索キーワードをハイライトするスクリプツ」を書いてみました。
最初に注意として、「このスクリプツはWindowsのIEでしか動きません。」つーことです。ごめんなさい。DHTMLだけならMacのIEでもイケないことも無いんだけど、今回使ってるメソッド「pasteHTML」がWin32プラットフォームでしか動かないらしいので、どうしてもこのスクリプツを使いたい場合はWindowsパソコンを買ってみると吉です。多分。
それからハンチングのMTが2.661なんで動作確認つーか、その辺の勝手は2.661が対象です。単なるキーワード文字列検索スクリプツなんで最新版とかでも使えるかもしれないですけど、よくわかんないので一応。
あと、このスクリプツの制限としては、「検索結果が大量だと鬼のように処理重たいよ。つか、ブラクラ並みの強大なナニかにWindowsが支配されるよ。」ってことと、「正規表現検索してもこのハイライトでは対象として該当を探せないよ。」ってこと。1つ目はハイライト最大数とかの制限かけることも可能なんだけど、今回はかけてない。2つ目は正規表現での比較のコード書くの難しかったから書いてない。それに、Perlの正規表現とJavaScript、DHTMLの正規表現って微妙に違うとこありそう。
で、肝心なスクリプツなんだけど、これは検索テンプレートに追加します。標準だと、「MTディレクトリ＞search_templates＞default.tmpl」ってファイルかな。このテンプレートのHTMLのHEAD内に追加します。（テンプレートの</head>って書いてある直前にでも追加して。）
<script language="JavaScript">
<!--
var fBrowser = false;
var hColor = ["ffff66","A0FFFF","99ff99","ff9999","ff66ff","880000","886800","004699","990099"];
if( navigator.userAgent.indexOf("MSIE") != -1
&& navigator.userAgent.indexOf("Windows") != -1
&& navigator.appVersion.substring(0,1) > 3 )
{ fBrowser = true; }
function highlight(){
if( fBrowser==true ) {
var tWord = "<$MTSearchString$>";
if(tWord.length!=0) {
tWord = tWord.split(' ');
var rng = document.body.createTextRange();
for(var i=0; i<tWord.length; i++) {
while(rng.findText(tWord[i])==true) {
var j = i;
if(j >= hColor.length) { j=j%hColor.length };
rng.pasteHTML("<b style='color:black;background-color:#"+hColor[j]+"'>"+tWord[i]+"</b>");
}
rng = document.body.createTextRange();
}
}
}
}
// -->
</script>
これを書く。簡単に内容説明すると、hColorってのがハイライト文字列の背景指定色。これ、今回の俺のGoogle病コンセプトを反映した「Googleハイライト仕様」になってます。このまま使えばGoogle気分のハイライト色。キーワードが半角スペースで区切られてれば、キーワードごとに背景指定色を変えてハイライト表示してくれます。実用的かどうかは別にして、9つ以上のキーワード指定があった場合はまた1つ目の指定色から使いまわす仕様です。ってGoogleの中の人が言ってました。
ほんで、その次にやってるのがブラウザのチェック。前述した通りWindowsのIEでしか動かないのでそれをチェックしてます。んで、highlightっつーファンクションが今回のハイライト表示する処理部分。ちなみに、<$MTSearchString$>って唯一使ってるMTタグに検索したキーワード文字列が入ってる構え。
で、最後に、このファンクション処理を検索結果が出力されたら呼び出すために、テンプレートHTMLのBODY部分にonloadイベントを追加して、上記のファンクションを呼び出してあげるようにします。（テンプレートの<body>って書いてあるところに上書きして。）
<body onload="highlight()">
これで完了。
もっといい方法とか、ほんと、プラグインとか作ればいんだろうけどソコまでは出来なかったのでこんな感じでちょっといじってみました。まあ、これでも意図してたようにキーワードがテキスト海原の中でもすぐに見つかるようになったのでチョー助かった。キーワード前後に書いてあることを簡単に探したいだけだったらこれだけで十分。なんとなく思いついた方法だけど、コストパフォーマンスよかったかも。
もし、こういうプラグインもうあるよ、とか、他に、JavaScriptだけでやる方法（Macでも使える方法）とかあるようだったら教えてちょんまげクオリティ。うびらー。（入信）
コメント (6) | トラックバック (0)
[書く]コメント
[レス]
思ったけど検索結果ページのテンプレートをPHP化すればモット簡単にサーバサイドで出来んじゃねーかと気が付いてｵｰｱｰﾙｾﾞｯﾄ。。
オオカワ 2005/03/02 #4761
[レス]
プラグイン化進行中かも。
オオカワ 2005/03/03 #4768
[レス]
(･∀･)イイ
名無しがーるど 2006/02/22 #7751
[レス]
MTのハイライトプラグインもよろしくね。
HuntingGirledCollective: 検索結果ハイライトプラグイン
http://girled.net/archives/000671.html
オオカワ 2006/02/22 #7752
[レス]
普通のケント掲示板しか持ってないからMT用は使えんとですよ。ううっ
でも、これはMTじゃなくてもハイライト表示されるから(･∀･)イイ
名無しがーるど 2006/02/23 #7753
[レス]
おお。掲示板で使ってるんですか。
それも(･∀･)イイ
オオカワ 2006/02/23 #7754