Blogger:Navbarの検索ボックスはいかにして検索動作を実現しているのか？

イントロダクション

Google のブログサービス「Blogger」では、デフォルトでブログの上部に Navbar と呼ばれるバーが表示されます。

Blogger の Navbar (上部の黒い帯の部分)

Navbar で行えること、Navbar の消し方、Navbar の表示負荷については、以下のページにまとめました。

Blogger:Navbarの負荷を考える-ページの読み込み時にどの程度影響を与えているか

http://upa-pc.blogspot.com/2015/02/blogger-navbar-on-off-diff.html

Navbarの検索ボックス

Navbar が提供する機能の中で、私が特に気に入っているのは画面の左上に表示される「検索ボックス」です。

Blogger の Navbar
左側に検索ボックスが配置されている

この検索ボックスを使用することで、ブログの中をキーワードで簡単に検索できます。

効率的ブログ執筆術：過去の記事は検索で探そう！ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/01/blog-search-old-post.html

過去に書いた記事を探すのには、もってこいです。
ブログアーカイブやラベルなどからも探せますが、いつかいたのか忘れていたり、どんなラベルを付与したのか忘れていたりすることや、そこまでたどり着くのに手間がかかります。

その点、Navbar の検索ボックスなら、ブログを表示して、すぐにキーワードから検索を実行出来るため、とても重宝しています。


さて、その検索ボックスですがどのような原理で、ブログ内の検索を実現しているのか気になりませんか？

そこで、今回はその検索ボックスの検索動作を実現している方法について、調査してみました。

Navbarの検索ボックスの動作原理

まず、Blogger の Navbar の検索ボックスの部分を、Chrome のデベロッパーツールの Elements で調べてみます。

検索ボックスを構成している HTML コードのうち、検索を行うのに必要な部分のコードのみを抜き出してみました。

[検索ボックス全体を囲む form]
<form id="searchthis" action="http://upa-pc.blogspot.com/search" method="get" style="display:inline;">

[検索キーワードを入力するテキストボックス]
<input type="text" id="b-query" name="q" tabindex="3" style="width: 120px" title="検索">

[検索を実行する虫眼鏡アイコンのボタン]
<a id="b-query-icon" onclick="document.getElementById(&quot;searchthis&quot;).submit();" title="このブログを検索"></a>

</form>


[] の部分は、分かりやすくするために入力した説明部分です。
重要な部分を赤字・太字にしました。

検索ボックス全体を囲む form

まず、form タグについて、見てみましょう。

<form id="searchthis" action="http://upa-pc.blogspot.com/search" method="get" style="display:inline;">

ここで特に重要なのが、action 属性と、method 属性です。

action 属性では、このフォームで入力されたデータを送信する先の URL を入力します。
そのため、この form 内でサブミット(submit)動作(テキストボックス内でエンターキーを押すなど）を実行すると、その URL に対して、データが送信されます。

method 属性では、get を指定しています。
従って、action 属性に指定した URL にデータを送信する方法として、HTTP の GET メソッドにてデータが送信されます。

GET メソッドでは、フォームのデータは、URL の後に ? を付与したクエリ文字列として送信されます。


input タグの属性についての詳しい説明は、以下のページに詳しく記載されています。

input 要素 - HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

以上の設定によって、フォーム内のテキストボックスに入力された検索キーワード(keyword)は、

http://upa-pc.blogspot.jp/search?q=keyword

という形式で Blogger のサーバに送信されることになります。
この形式、どこかで見たことがありませんか？

そう、Blogger の検索ページの URL の表記そのものなのです。

Bloggerユーザなら知っておきたい、BloggerブログのURL構成まとめ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-summary.html

BloggerのURL構成：ブログ内の構造>検索ページ - Dr.ウーパのコンピュータ備忘録
http://upa-pc.blogspot.jp/2015/02/blogger-url-search.html

つまり、フォーム内のテキストボックスに検索キーワードが入力された後に、フォーム内でサブミット動作が発生すれば、そのテキストボックスに入力された検索キーワードが検索ページの URL 表記でサーバに送信されます。

あとは、Blogger のサーバがその検索キーワードを見て、検索結果のページを返しているわけです。

検索キーワードを入力するテキストボックス

<input type="text" id="b-query" name="q" tabindex="3" style="width: 120px" title="検索">

検索キーワードを、クエリ文字列として送信する場合には、

http://upa-pc.blogspot.jp/search?q=keyword

という形式で送信します。
入力されたテキストボックスの内容は、q= の形式で送るため、name 属性で q が指定されています。


input タグの属性についての詳しい説明は、以下のページに詳しく記載されています。

input 要素 - HTML | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

検索を実行する虫眼鏡アイコンのボタン

<a id="b-query-icon" onclick="document.getElementById(&quot;searchthis&quot;).submit();" title="このブログを検索"></a>


クリックすると検索を実行できる虫眼鏡アイコンのボタンです。
これをマウスでクリックしたときには、onclick イベントにて、検索ボックス全体を囲む form を取得し、その submit を実行しています。

つまり、このフォームのサブミット動作を実行し、form の action 属性で記載した URL へ method 属性の方式でデータを送信しています。従って、入力された検索キーワードで、Blogger の検索ページを表示していることになります。

まとめ

以上の仕組みによって、Navbar の検索ボックスが実現されています。


どうでしょうか、これだけ見ると Blogger の HTML/JavaScript ガジェットで自力で実装できるように見えてきませんか？

そこで、実際に HTML/JavaScript ガジェットで実装してみました。