Blogger:検索キーワードを自動でセット - 検索ページにのみ検索ボックスを表示(display:none方式)

イントロダクション

「Blogger:検索ページにのみ検索ボックスを表示(display:none方式)」では、Blogger の検索ページにのみ表示される検索ボックスを作成しました。

今回は、その検索ボックスに対して、検索したキーワードを自動的に設定する機能を追加します。

検索ページにのみ検索ボックスを表示(display:none方式):検索したキーワードを自動的に設定

「Blogger:検索ページにのみ検索ボックスを表示(display:none方式)」に対して、以前作成した以下の検索ページの検索キーワードを、URLのクエリ文字列から取得する JavaScript を適用します。

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

以下のソースコードを、「Blogger:検索ページにのみ検索ボックスを表示(display:none方式)」と同じ要領で、HTML/JavaScript ガジェットに張り付けてブログに追加します。

ソースコード：

<form id="searchthis_searchpageonly" action="/search" method="get" style="display:none;">
<input type="text" name="q" style="width: 300px" title="検索" />
<a onclick="document.getElementById('searchthis_searchpageonly').submit();" title="このブログを検索" style="cursor: pointer;">検索！</a>
</form>

<script type="text/javascript">
<!--
    (function () {

        // 検索ページの場合には、検索ボックスを表示する
        if (location.pathname == "/search") {
            var search_box = document.getElementById("searchthis_searchpageonly");
            search_box.style.display = "inline-block";

            // 検索キーワードを検索ボックスに設定
            var search_word = Blogger_getSearchParameter();
            if (search_word) {
                search_box.getElementsByTagName("input")[0].setAttribute("value", search_word);
            }
        }

        /*
        検索ページの URL に含まれる検索キーワード(q=keyword の keyword部分)を
        デコードして返します

        戻り値：
        デコードした検索キーワード
        URL に検索キーワードが含まれていない場合、null を返します
        */
        function Blogger_getSearchParameter() {

            // URL のクエリ文字列から、エンコードされた検索キーワードを取得
            var match_result = location.search.match(/[?&]q=([^&]*)/);
            if (match_result) {

                // 検索キーワードをデコードして返す
                // なお、form でデータを送信すると、単語同士を隔てる空白が + に変換されるため、
                // デコード関数でデコードする前に、+ を半角スペースに変換している
                return decodeURIComponent(match_result[1].replace(/\+/g, " "));
            }

            return null;
        }
    })();

//-->
</script>

結果

Blogger の Navbar の検索ボックスを使用するなどして、検索ページへ移動すると、その時に検索したキーワードが既に入力された状態の検索ボックスが表示されています。

Blogger : 検索ページ
検索したキーワードが入力された状態の検索ボックスが表示されている

そのため、意図した検索結果が得られず、他の検索キーワードを試したい場合には、検索ボックスに入力されているキーワードに新しいキーワードを修正することや、入力されているキーワードの一部を修正するだけで、再検索可能です！

そのため、大幅に閲覧者の利便性を向上することが出来るでしょう！

ソースコード解説：

ソースコードの解説については、長くなるため、以下のページに記載しました。

Blogger:コード解説：検索キーワードを自動でセット - 検索ページにのみ検索ボックスを表示(display:none方式)
http://upa-pc.blogspot.com/2015/02/blogger-search-box-in-search-page-auto-set-word-explain.html

まとめ

このように、JavaScript を使用して、検索キーワードを取得し、そのキーワードを事前に検索ボックスに入力した状態にすることで、ブログの利便性を向上することが出来ました。

快適なブログを目指して、様々な改良を行っていきましょう！

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

2015年2月27日金曜日