ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Cinnamon.jsはHTMLコードに検索キーワードを埋め込むことでよりユーザビリティの高いページ内検索を提供します。

Webブラウザでページ内検索を行うことは多いと思いますが、あくまでも表面上のテキストに対してしか検索できません。その垣根を越えて、別なワードを仕込めるようにするのがCinnamon.jsです。


Twitterでページ内検索するとTwitterアカウント名がハイライトされています。


メールで検索するとReachという部分がハイライト。


こんな感じでdata-*に仕込んであります。


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

Cinnamon.js: Find In-Page Text using Synonyms | Thomas Park

thomaspark/cinnamon.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2