チャレンジ! Movable TypeをCMSとして使ってみよう!

第13回 検索用テンプレートに着手しよう!

この記事を読むのに必要な時間:およそ 4 分

検索結果を表示させるサブテンプレートを追記する

くれま先輩:そうだね。他のテンプレートの場合とだいたい一緒だっただよね。じゃあまずは,div id="primary"の中の「パンくずナビゲーション」の直後に,検索結果を表示させるサブテンプレートを書いていこう。

div id="primary"内「パンくずナビゲーション」の直後に記述するサブテンプレート

<mt:SearchResults>
	<mt:BlogResultHeader>
	<h1>「<mt:SearchString />」での検索結果</h1>
	</mt:BlogResultHeader>
	<div class="serchResult">
		<h2><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h2>
		<mt:SetVarBlock name="entry_category"><mt:EntryCategory></mt:SetVarBlock>
		<mt:If name="entry_category" eq="最新情報">
			<p><mt:EntryBody words="50" /></p>
		<mt:Else>
			<dl>
			<dt>著者名</dt>
			<dd><mt:author_name /></dd>
			<dt>発売日</dt>
			<dd><mt:release_date /></dd>
			<dt>対象年齢</dt>
			<dd><mt:readers_age /></dd>
			<dt>版型</dt>
			<dd><mt:book_size /></dd>
			<dt>説明</dt>
			<dd><mt:EntryBody words="50" /></dd>
			</dl>
			<p><mt:coverAsset><a href="<mt:EntryLink />"><img src="<mt:AssetThumbnailURL width="100" />"alt="<mt:EntryTitle />" title="<mt:EntryTitle />" /></a></mt:coverAsset></p>
		</mt:If>
	</div>
</mt:SearchResults>

ほげ山くん:この連載で初めて,mt:SearchResultsというのが出てきましたね!

くれま先輩:そうだね!これは「検索結果」テンプレートの中で,実行した検索の結果を表示するブロックタグなのよ。条件に当てはまるブログ記事に関するデータを,mt:Entriesなどと同じようにループで出力するイメージだね。なので,このブロックタグの中で,mt:Entryxxxxxxxというタグを使えるわけだ。

ほげ山くん:なるほど,このサブテンプレート内に,mt:EntryLink,mt:EntryTitleなどが入っていますね。んー,mt:BlogResultHeaderってなんでしたっけ?

くれま先輩:テンプレートタグリファレンスを見ると,⁠実行した検索の結果は,ブログごとにグループにまとめられています。まとめられたグループの中の最初の結果を表示するときに,その内容を表示するブロックタグです。」とあるんだよね。

ほげ山くん:じゃ,複数のブログがあるときは,検索結果のブログごとのグループの頭に,この中身が表示されるっていうことですよね?

くれま先輩:そうなんだけれど,その前に,⁠ヘッダ領域」というテンプレートモジュールの中にこんな書き方をしたのを覚えてるかな?

「ヘッダ領域」テンプレートモジュール内の,検索フォーム内の記述

<form method="get" action="<mt:CGIPath /><mt:SearchScript />">
	<p><input type="hidden" name="IncludeBlogs" value="<mt:BlogID />" /><input name="search" type="text" id="search" value="<mt:SearchString />" />
	<input name="submit" type="image" src="<mt:BlogUrl />img/btn_search.gif" alt="検索" id="submit" />
	</p>
</form>

ほげ山くん:ちょ,ちょっと待ってください…。探します…。あぁ,書いてありましたね!

くれま先輩:2行目のname="IncludeBlogs" value="<mt:BlogID />"って書いてある部分で,特定のIDのブログに含まれる記事だけを検索結果に含めるように指定しているの。詳しくは,以下のページを参考にしてみてね。

【参考ページ】
MTSearchResults | テンプレートタグリファレンス
http://www.movabletype.jp/documentation/appendices/tags/
searchresults.html

ほげ山くん:要するに,このブログのIDだけが「IncludeBlogs」の値として設定されるわけですね。

くれま先輩:そうそう。そうすると,mt:SearchResultの中には,いつもひとつのブログに含まれる検索結果だけがリストアップされるってことだから,mt:BlogResultHeaderもループの中で1回しか表示されないってことになるよね。

ほげ山くん:そういう使い方を前提として,mt:BlogResultHeaderの中に「<h1>「<mt:SearchString />」での検索結果</h1>」って書いてあるんですね。この部分は「⁠⁠検索キーワード⁠⁠』での検索結果」って出力されるんですよねー。

くれま先輩:うん。この部分をこの検索結果の大見出しにしたいから,h1でマークアップしているんだよね。

ほげ山くん:でもそうするんだったら,mt:SearchResultsの外側に「<h1>「<mt:SearchString />」での検索結果</h1>」って書いてもいいんじゃないんですかね?

くれま先輩:そうしたいんだけど,検索結果が見つからなかった時の処理も考えておかなければいけないわけですよ。

ほげ山くん:はぁ。

くれま先輩:そのときは,h1に「⁠⁠<mt:SearchString />』と一致する結果は見つかりませんでした。」って出したいんだよね。

ほげ山くん:あ,なるほど。mt:SearchResultsの外側に固定されたh1を書いてしまうと,検索結果が見つからなかった時に不整合が生じるんですね。

くれま先輩:ではどうするかというのは次のセクションで説明するから,先に,mt:SetVarBlockとmt:Ifを使って条件分岐をしているところについて話しておくねー。

ほげ山くん:そうそう,mt:SearchResultsの中で条件分岐をしてるのが,気になってたんですよね。

くれま先輩:「最新情報」カテゴリとそれ以外のカテゴリで,投稿内容の体裁が全然違うでしょ?それぞれに合った体裁で,結果を出力したいわけ。だからmt:SetVarBlockを使って,mt:EntryCategoryの値を変数「entry_category」の中に設定しているの。

ほげ山くん:mt:EntryCategoryというのは,⁠ブログ記事に指定されたメインカテゴリ」が出力されるんですよね…。そうか,そのブログ記事のメインカテゴリが「最新情報」かそうでないかを判別して,条件分岐してるんですね。

くれま先輩:うん,その通り!

検索結果が見つからなかったときの処理を加える

くれま先輩:っじゃ,さっき言っていた「検索結果が見つからなかった時の処理」について話をしようかな。

ほげ山くん:お願いしまーす。

くれま先輩:さっきのmt:SearchResultsのサブテンプレートの下に,こんな風に書いてみてね。

mt:SearchResultsのサブテンプレートの下に記述するサブテンプレート

<mt:NoSearchResults>
<h1>「<mt:SearchString />」と一致する結果は見つかりませんでした。</h1>
<a href="<mt:BlogUrl />">トップページに戻る</a>
</mt:NoSearchResults>

ほげ山くん:NoSearchResultsって,検索結果が無かった時に実行されるタグってことですか?

くれま先輩:そうよ!ほら,この中に<h1>「<mt:SearchString />」と一致する結果は見つかりませんでした。</h1>って書いているでしょ?こうして,状況によって異なるh1を出力し分けているってこと。

ほげ山くん:なるほどです。

くれま先輩:さて今回はこのくらいにして,次回はもう少し検索用テンプレートについて理解を深めていこうね。Movable Type4.2以降では検索結果が多かった時にAjaxを使ったページ分割ができるようになっているから,それについても説明するよ!

ほげ山くん:楽しみにしてます!

次回予告

  • 検索結果が多かったときのページ分割について知る。
  • 検索用のオプションを追加する。
  • 検索用テンプレートを完成させる。

著者プロフィール

黒野明子(くろのあきこ)

1973年生まれ。1995年 武蔵野美術大学短期大学部専攻科グラフィックデザインコース修了。

ファッションカメラマン事務所、広告系デザイン事務所、Web制作会社勤務を経て、2003年よりフリー。Webデザイン・企画を中心に、DTPデザインなども行う。

現在、武蔵野美術大学共通デザイン研究室非常勤講師及び株式会社デジタルスケープ・PreJOBトレーニング講師も兼務。2005年秋頃から業務としてMTサイトの構築を始め、現在の業務のほとんどでMovable Typeを使用している。

著書:

『CMSとして使うMovable Typeガイドブック』 (翔泳社、共著)

『Movable Typeプロフェッショナル・スタイル』(毎日コミュニケーションズ、共著)

URL:http://cremadesign.jp/