前回途中まで作った「検索結果」テンプレートに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要素" />のすぐ後ろに，こういう風に足してね。

<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>までを，次のようにまるっと書き換えてね。

<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>の直前にこれを書いてね。

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

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

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