画面上にはないキーワードでも検索できるページ内検索「Cinnamon.js」
Cinnamon.jsはHTMLコードに検索キーワードを埋め込むことでよりユーザビリティの高いページ内検索を提供します。
Webブラウザでページ内検索を行うことは多いと思いますが、あくまでも表面上のテキストに対してしか検索できません。その垣根を越えて、別なワードを仕込めるようにするのがCinnamon.jsです。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-19 11.21.37.1361366746.png)
Twitterでページ内検索するとTwitterアカウント名がハイライトされています。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-19 11.21.50.1361366751.png)
メールで検索するとReachという部分がハイライト。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-19 11.22.04.1361366755.png)
こんな感じでdata-*に仕込んであります。
[](http://images.moongift.jp/2013/02/Screenshot 2013-02-19 11.22.31.1361366759.png)
Spriceというワードに反応する場所も。
Cinnamon.jsはdata-*を使ってキーワードを仕込むことができます。例えば画像のaltを検索ワードに入れておけば、ページ内検索においてハイライトさせられるようになります。また、メールという検索ワードに対してメールアドレス部分をハイライトさせることもできるようでしょう。ユーザビリティが向上しそうです。
Cinnamon.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
GoogleのWeb検索で言えば入力ミスとおぼしき検索キーワードであれば自動的に補正したり、○○ではないですか？といった通知がされます。これは巨大なデータベースをもってして行われるものではありますが、他の検索でも同じような仕組みが欲しいと思うことが多々あります。
例えばページ内検索では複数のワードを設定することができません。また、migemoのようにローマ字で検索するのも標準ではできません。カタカタなひらがなの曖昧検索ですらできないのが実情です。そういった不満点を解消して欲しいというニーズは強くあるのではないでしょうか。
via Enhance Built-in Find Function with Cinnamon.js | Web Resources | WebAppers