ブログ記事詳細検索プラグイン(その16・検索フォーム作成の基本)

SearchEntriesプラグインでは、いくつかのプラグインを組み合わせることで、フォームを使った動的な検索を行うこともできます。
今回は、検索フォームを作る際の基本を解説します。

1.必要なプラグイン

検索フォームでの検索を行う場合、まずリアルタイム再構築プラグイン(RealtimeRebuild)が必要です。
また、リアルタイム再構築プラグインは、「RebuildHelper」というプラグインと協調して動作します。

これら2つのプラグインは、リアルタイム再構築プラグインのページからダウンロードすることができます。
ダウンロードページの指示に従って、インストールを行ってください。
なお、RealtimeRebuild/RebuildHelperプラグインは、それぞれ1.72/1.04以降のバージョンが必要です。

また、フォームで入力された値をテンプレートの中で扱うために、GetQueryParamプラグインのバージョン1.14以降が必要です。
GetQueryParamプラグインは以下からダウンロードすることができます。

GetQueryParam_1_14.zip

ダウンロードしたZipファイルを解凍すると、「GetQueryParam」というフォルダができます。
このフォルダを、Movable Typeの「plugins」ディレクトリにアップロードします。

2.検索フォームの基本的な書き方

フォームを使った検索では、以下のような処理手順を取ります。

  • フォームで入力された条件を、リアルタイム再構築プラグインのCGIに送信します。
  • CGIによって、検索結果を出力するためのテンプレートが読み込まれ、再構築されて、検索結果として表示されます。

この処理手順に沿うように、HTMLのform要素を使って検索フォームを作ります。
検索フォームの基本的なHTMLの組み方は、以下のようになります。

<form method="get" action="<$mt:RealtimeRebuildCGIPath$>">
  <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
  <input type="hidden" name="tmpl_id" value="<$mt:GetTemplateID tmpl_name="検索結果表示テンプレートの名前"$>" />
  検索条件を入力する各要素
</form>

1行目のformタグで、フォームのデータの送信先を、リアルタイム再構築プラグインのCGI(MTRealtimeRebuildCGIタグ)にします。
また、hiddenタイプのinput要素を使って、以下の2つの値をCGIに渡すことが必要です(2行目と3行目)。

name属性内容
blog_id検索結果表示テンプレートが属するブログのID
tmpl_id検索結果表示テンプレートのID

検索結果もテンプレートで出力します。
そのテンプレートのIDと、テンプレートが属するブログのIDをCGIに渡します。
テンプレートのIDは、「MTGetTemplateID」というテンプレートタグで表すことができます(このテンプレートタグは、RealtimeRebuildプラグインによって追加されます)。

そして、「検索条件を入力する各要素」の部分に、一般的なフォームの要素(inputやselectなど)を入れて、検索のフォームを作っていきます。

なお、検索結果表示テンプレートの基本的な作り方は、次回解説します。

3.検索フォームの基本的な例

例えば、タイトルに特定のキーワードを含むブログ記事を検索するために、検索フォームを作りたいとします。
キーワードはテキストで入力すれば良いので、フォームに「<input type="text"・・・>」のinput要素を入れます。

テキスト入力欄のname属性を、「title」にするとします。
また、検索結果を「詳細検索結果」というテンプレートで出力するとします。
この場合の検索フォームは、以下のように組みます。

<form method="get" action="<$mt:RealtimeRebuildCGIPath$>">
  <input type="hidden" name="blog_id" value="<$mt:BlogID$>" />
  <input type="hidden" name="tmpl_id" value="<$mt:GetTemplateID tmpl_name="詳細検索結果"$>" />
  <p>
    <label for="title">キーワード</label><br />
    <input type="text" id="title" name="title" />
  </p>
  <p>
    <input type="submit" value="送信" />
  </p>
</form>

4.検索フォームをテンプレートに入れる

検索フォームを実際に使うには、何らかのテンプレートに入れます。

例えば、検索フォームを独立したページにしたい場合は、インデックステンプレートを新規作成し、メインページ等のテンプレートの内容を元にして、検索フォームを出力するようにテンプレートを作ります。
また、サイドバーに検索フォームを出力するなら、検索フォーム部分をウィジェット化して、サイドバーのウィジェットセットにそのウィジェットを入れると良いでしょう。

テンプレートを作り終わったら、保存しておきます。
ただし、今の時点ではまだ再構築しません(検索結果表示用のテンプレートがないため、再構築するとエラーが発生します)。
検索結果表示用のテンプレートを作ってから、再構築を行います。

なお、サンプルのテンプレートとして、「タイトルに○○を含む」という条件で検索するフォームを、独立したページに入れた例を用意しました。
Movable Type標準の「クラシックブログ」テーマに合わせた構造になっています。
以下のリンクからダウンロードすることができます。

searchform01.mtml

5.SearchEntriesプラグイン関係の記事の一覧

SearchEntriesプラグイン関係のその他の記事は、以下のリンクから参照できます。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください