インライン検索結果のハイライト Firefox Hacks 翻訳日記/ウェブリブログ

インライン検索結果のハイライト

<< 作成日時： 2007/06/25 01:02 >>

Safari 3 のベータ版がリリースされてから、Safari のインライン検索結果ハイライト方式に
注目が集まっている。
Lifehacker の How To: Get Safari's best features in Firefox
（ITmedia Biz.ID の和訳 Safariの長所をFirefoxの拡張機能で再現する）では、
Firefox が Safari に負けている唯一の点、という扱いのようだ。

我が国ではすでに、こんなに月も紅いのにさんが userChrome.js 用のスクリプトを書いてるし、
それを受けて Piro さんが XUL/Migemo に取り入れたりしているので、出遅れた感はあるが、
ページ検索ツールバー関係の拡張機能作者としては黙って見ているわけにはいかない。
というわけで、日曜日を潰していろいろ試行錯誤してみた。

いやー、難しいっすね (^^;
z-index もさることながら、opacity でいらないところを薄くしようとしてたんだけど、
親要素の <body> に opacity を指定して薄くすると、子要素ももれなく薄くなったままで濃くできない。
数時間格闘して煮詰まりかけたあたりで、ふと面白い効果ができる事に気付いた。

「逆に考えるんだ。必要なところをもっと強調すればいい」

スクリーンショットをご覧いただきたい。

（画像は開発中のものであり、実際のものとは異なる場合があります）

見ておわかりのように、検索でヒットした語句を含む親要素を丸ごと強調表示する、
というコンセプトだ。
ヒットした語句そのものの強調には Safari 風の色使いをしているが、
Safari の表示方式を超えた、と作者は思い込んでいる。

客観的に見てどうなんでしょう？＞誰ともなく。

2007年7月1日追記
上記の機能を実装した開発版 (beta2) を公開しました。
Find Toolbar Tweaks（開発版）