「CTRL+F？なにそれ？」が9割。に対する救済案を考えてみた

文字列を検索する「CTRL+F」機能。
webデザイナーやプログラマーは必須で使いますよね。

画像ではなくテキストを使うメリットの一つに、この機能の恩恵を受けられることだと思っているのですが、実は”9割のユーザーが知らない”というのは衝撃です。

【日本語ソース】「CTRL+F？なにそれ？」が9割
【英語ソース】90 Percent of People Don’t Know How to Use CTRL+F


すごく便利な機能なので、どうにかしてユーザーに恩恵を与えられないものだろうか･･･


文字検索はやっぱり便利！

「CTRL+F」機能を広めることは難しいにしても、同等の恩恵をユーザーに与えられる事ができるんじゃないか？
そう思って解決案を考えてみました。

  • 検索ボックスのようなものを用意
  • ユーザーが検索するキーワードを想定し、Clickするとハイライト

といった使い方が解決案として妥当だと考えられます。
さっそく前者のデモを用意してみました。



highlight demo
DEMO / text higlight



キーを打つタイミングでキーワードを検索しているので、CTRL+Fと同じ使用感で使うことができます。
これをサイト内に何らかの形で設置すると、CTRL+Fと同じ恩恵をユーザーに与えることができそうです。

ただ、このまま単純に設置するだけだと検索と勘違いされる可能性が高いので、考えてデザインする必要があると思います。


text higlighting jQuery plugin

先ほどのデモで仕様したプラグインをご紹介します。
簡単に実装できるので、少しの工夫で使い方が広がると思います。

ハイライトを適用する

$("p").highlight("検索キーワード");

デモではこんな風に書きました。
$("#key").bind("keyup", function(e){
	var $t = $("p");
	var val = $(this).val();
	if(val == ""){
		return false;
	}
	$t.removeHighlight();
	$t.highlight(val);
})
入力フィールドから値を取得し、その値を検索キーワードに当てはめています。

何も入力していない状態「””」で検索を実行すると無限ループに突入するのか、フリーズしてしまいます。
なので、空文字の場合はreturn falseで実行されないようにしました。


ハイライトを消す

$("p").removeHighlight();
検索範囲と同じセレクタを渡してください。


ハイライトの装飾

.highlight {
	background-color: yellow
}
ハイライトする個所は、で括られています。
自分で装飾を行いたい場合は、highlightクラスに書いてあげると変えることができます。


ダウンロード


Recommend Posts