Blogger:検索ページの検索キーワードを取得する方法について検討

イントロダクション

Google のブログサービス「Blogger」では、ページの上部に Navbar と呼ばれるバーが表示されています。（非表示にもできます。）

その左上には、ブログ内を検索できる検索ボックスがついています。

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

この検索ボックスが非常に便利でよく使っています。
更にこの検索ボックスを便利に利用できる方法を提供する下準備として、検索を実行した後に、検索キーワードを取得する方法について考えてみます。

検索ページの検索キーワードを取得する方法について検討

前提条件

Navbar の検索ボックスを使用して検索を行うと、検索結果を表示するページ(以下、検索ページ）へ移動し、そこにそのキーワードにマッチしたブログページのリストが表示されます。

例えば、このブログを”テスト”というキーワードで検索した場合の検索結果は、以下の URL のページに表示されます。

Dr.ウーパのコンピュータ備忘録: テストの検索結果
http://upa-pc.blogspot.jp/search?q=%E3%83%86%E3%82%B9%E3%83%88

そのとき、検索ページには、次のように検索キーワードが表示されます。

検索キーワード「テスト」に一致する投稿を関連性の高い順に表示しています。
日付順すべての投稿を表示

なお、検索ページに移動した時点で、Navbar の検索ボックスは空になります。

テンプレートの HTML にて、直接検索キーワードを取得できる Blogger のタグは無いか？

検索ページに、検索キーワードが表示されているということは、その部分に対応する Blogger のテンプレートの HTML(Bloggerで出力されるページの構造を表現するHTML)があるはずです。

もし、検索キーワードそのものを示す Blogger のテンプレートのタグがあるならば、検索キーワードを取得する方法としては非常に楽です。

そこで、それを調べるために、まずは検索ページで検索キーワードが表示されている部分の HTML を見てみます。

検索ページで検索キーワードが表示されている部分の HTML：

<div class="status-msg-body">
検索キーワード「<b>テスト</b>」に一致する投稿を関連性の高い順に表示しています。 <a href="http://upa-pc.blogspot.com/search?q=%E3%83%86%E3%82%B9%E3%83%88&amp;max-results=20&amp;by-date=true">日付順</a> <a href="http://upa-pc.blogspot.com/">すべての投稿を表示</a>
</div>

class 属性として、"status-msg-body"が設定された div タグ内に、”検索キーワード「<b>テスト</b>」”という形で検索キーワードが含まれています。

この部分に対応する Blogger のテンプレートの HTML を見てみます。
検索ページで検索キーワードが表示されている部分に対応する Blogger のテンプレートの HTML：

                                    <div class='status-msg-body'>
                                      <data:navMessage/>
                                    </div>

どうやら、検索キーワードそのものを示す Blogger のテンプレートの HTML があるわけではなく、class 属性として"status-msg-body"が設定された div タグ内のデータすべてを表すものとして、<data:navMessage/> があるようです。

従って、検索キーワードのみを Blogger のテンプレートの HTML のタグを使って取り出すのは無理そうです。
（もしかしたら、Blogger 公式のドキュメントにも載っていない、検索キーワードのみを取り出すタグはあるのかもしれませんが、今のところ見つけられていないので、無いものとします。）

URL のクエリ文字列から検索キーワードを取り出す

上でも記載したように、例えば、このブログを”テスト”というキーワードで検索した場合の検索結果は、以下の URL のページに表示されます。

Dr.ウーパのコンピュータ備忘録: テストの検索結果
http://upa-pc.blogspot.jp/search?q=%E3%83%86%E3%82%B9%E3%83%88

このとき、検索キーワードが URL のクエリ文字列(? よりも後の部分) に付与されています。

検索キーワードは、以下の形式で与えられます。

q=keyword
(keyword:検索キーワード)

URL から検索キーワードを取り出す処理は、JavaScript を使用すれば実装できます。

なお、URL 内の検索キーワードはエンコードされているので、使用する前にデコードする必要があります。

%E3%83%86%E3%82%B9%E3%83%88
　↓デコード
テスト

→ この方法による、検索キーワードの取得について、実装してみました。

Blogger:検索ページの検索キーワードを、URLのクエリ文字列から取得するJavaScript
http://upa-pc.blogspot.com/2015/02/blogger-search-keyword-get-javascript-from-url.html

検索ページの検索キーワードを JavaScript で取り出す

検索ページでは、上に記載したように、検索キーワードがページ内に含まれています。

検索ページで検索キーワードが表示されている部分の HTML：

<div class="status-msg-body">
検索キーワード「<b>テスト</b>」に一致する投稿を関連性の高い順に表示しています。 <a href="http://upa-pc.blogspot.com/search?q=%E3%83%86%E3%82%B9%E3%83%88&amp;max-results=20&amp;by-date=true">日付順</a> <a href="http://upa-pc.blogspot.com/">すべての投稿を表示</a>
</div>

つまり、<div class="status-msg-body">要素内の、”検索キーワード「<b>テスト</b>」”の部分を JavaScript によって抽出すれば、検索キーワードを取得することができます。

現状の HTML 構造だと、JavaScript で検索キーワードの部分を取り出すのは手間がかかるため、Blogger のテンプレートの HTML に手を加えて、<div class="status-msg-body"> に id 属性を付与するなどして、目的のデータにアクセスしやすくすると良さそうです。

まとめ

検索ページの検索キーワードを取得するには、現状では JavaScript を使用してデータを処理する必要がありそうです。

Dr.ウーパのコンピュータ備忘録

2015年2月26日木曜日