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

第14回 検索結果が多いときにページを分割する

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

前回途中まで作った「検索結果」テンプレートにJavaScriptを追加して,20件ごとにページ分割する方法を紹介します。

ほげ山くん:先輩!また今回もアップデート情報が出てるらしいじゃないですか!

くれま先輩:だね。2009年3月18日に,前回も触れた4.25が出荷されたのよ!

ほげ山くん:今回はあっという間でしたねぇ。前にも話題に出たMotionが使えるようになったんですよね?

くれま先輩:そうそう!TwitterなどのWebサービスでの活動を集めるアクションストリーム機能も使えるようになってるから,触ってみたらどうでしょう?蒲生さんのサイトで「アクションストリーム」の活用方法が記事にされていたので,興味のある方は,ぜひチェックしてみてくださいね。

【参考ページ】
【Movable Type 4.25公開】Action Streamをブログに追加して楽しもう: 世界中の1%の人々へ
http://www.dakiny.com/archives/mt42/movable_type_425action_stream/
Movable Type 4.25 出荷開始 | MovableType.jp
http://www.movabletype.jp/blog/movable_type_425.html

ページを分割するために必要な手順を確認

くれま先輩:っじゃ,前回の続きをやっていきましょ。今日はいつもと違って,ちょっと複雑なことをするので,よーく説明を聞いてね。まず,今日やることは大まかに分けて次の4ステップになるよ。

  1. 「検索結果」テンプレート内に,必要な記述を追加する
  2. デフォルトのテンプレートセットからmt.jsを持ってくる
  3. デフォルトの「検索結果」テンプレートから,必要なJavaScriptをとってくる
  4. ヘッダ領域の検索フォームにCGIに渡す引数を足す

ほげ山くん:了解です!

「検索結果」テンプレート内に,必要な記述を追加する

ほげ山くん:では,最初に,「検索結果」テンプレートの編集画面を開きますね。上部メニューの[デザイン→テンプレート]を選択して,「ステムテンプレート」のセクションにある「検索結果」をクリックしましたー。

くれま先輩:足す部分が多いので,一ヶ所づつ説明していくね。最初はhead要素内の<mt:Include module="head要素" />のすぐ後ろに,こういう風に足してね。

 <mt:Include module="head要素" />直後に追加する記述

<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="<mt:BlogURL />mt.js"></script>
<mt:Include module="ページ分割用Javascript" />

ほげ山くん:あれ?「mt.js」って第4回で削除したんじゃなかったでしたっけ?

くれま先輩:ごめんね…。あの時は,「検索結果」テンプレートにAjaxを使う説明をする計画がなかったの…。だけどそれをするには,必要な関数が記述されている「mt.js」が必要だから,あとでデフォルトのテンプレートセットから持ってくるようにさせてね。

ほげ山くん:ふーん。分りました。あと,「ページ分割用JavaScript」っていうテンプレートモジュールも作ってないですよね?

くれま先輩:うん。それはこれから作るからね。次は,<mt:SearchResults>~</mt:SearchResults>までを,次のようにまるっと書き換えてね。

<mt:SearchResults>~</mt:SearchResults>だった部分に置き換えるサブテンプレート

<div id="search-results">
	<mt:SetVarTemplate id="search_results" name="search_results">
		<mt:SearchResults>
			<mt:BlogResultHeader>
				<span id="current-page" class="hidden"><mt:CurrentPage /></span>
				<h1>「<mt:SearchString />」での検索結果</h1>
			</mt:BlogResultHeader>
			<div class="serchResult">
			<h3><a href="<mt:EntryLink />"><mt:EntryTitle /></a></h3>
			<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>
			<!-- end div.serchResult --></div>
			<mt:SearchResultsFooter>
				<div class="content-nav">
				<mt:IfPreviousResults><a href="<mt:PreviousLink />" rel="prev" onclick="return swapContent(-1);">< 前</a>&nbsp;&nbsp;</mt:IfPreviousResults><mt:PagerBlock><mt:IfCurrentPage><mt:Var name="__value__" /><mt:Else><a href="<mt:PagerLink />"><mt:Var name="__value__" /></a></mt:IfCurrentPage><mt:Unless name="__last__">&nbsp;</mt:Unless></mt:PagerBlock><mt:IfMoreResults>&nbsp;&nbsp;<a href="<mt:NextLink />" rel="next" onclick="return swapContent();">次 ></a></mt:IfMoreResults>
				<!-- end div.content-nav --></div>
				</mt:SearchResultsFooter>
		</mt:SearchResults>
	</mt:SetVarTemplate>
	<mt:Var name="search_results" />
<!-- end div#search-results --></div>

ほげ山くん:長いですね!!!ちょっと解説してくださいよ!

くれま先輩:<div id="search-results">はJavaScriptのソースからDOM要素を取得するために必要なので足しているんだよ。<span id="current-page" class="hidden"><mt:CurrentPage /></span>も記述しないとAjaxによる動作ができないので,足してね。

ほげ山くん:後は,<mt:SearchResultsFooter>のところが物凄く追加されましたねぇ。

くれま先輩:mt:SearchResultsFooterの中身は,ページ分割されるときに表示されるこんなナビゲーションを作っている部分なのよ。

ページ分割をしたときに表示されるナビゲーション

ページ分割をしたときに表示されるナビゲーション

ほげ山くん:なるほど,ページ数が多いとき「ページ番号」「< 前」「次 >」などを出して,前後ページに移動させるアレですね。

くれま先輩:<mt:IfPreviousResults>は,いま見ているページよりも前のページがある場合に中身を処理するんだよ。つまり,「< 前」を出力してる。mt:PagerBlockの中身は,検索結果ページの総ページ分繰り返し処理されるの。

ほげ山くん:1 2 3 4…っていう数字が出されてる部分ですか?

くれま先輩:そうよ。その数字を出力するのは,<mt:Var name="__value__" />の部分だね。「__value__」を使って,繰り返した数を出力しているんだよ。

ほげ山くん:<mt:Unless name="__last__">の部分っていうのは,「~でないとき」に実行されるんですよね?

くれま先輩:そうだね。「__last__」は,繰り返しの最後を表しているから,繰り返しの最後で無い場合は「&nbsp;」が数字の間に挟まるってことね。

ほげ山くん:なるほど,長いけど少しづつ見ていくと,理解できそうですね。

くれま先輩:うんうん。後は「< 前」「次 >」を囲っているa要素の中に「onclick」があるけれど,この部分でJavaScriptを動作させているわけだ。

ほげ山くん:はーい。

くれま先輩:最後に,<!-- end div#primary --></div>の直前にこれを書いてね。

<!-- end div#primary --></div>の直前に追加する記述

<mt:Include module="ページ分割用Javascript002" />

ほげ山くん:できましたー。

くれま先輩:はい,じゃあここまで書けたら,「保存」をクリックしておいてね。

著者プロフィール

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

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

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

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

著書:

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

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

URL:http://cremadesign.jp/

コメント

コメントの記入