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

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

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

デフォルトのテンプレートセットからmt.jsを持ってくる

ほげ山くん:次は「mt.js」ですよね?

くれま先輩:うん,そう。さっきも話したけど,これを削除してしまったので,新規のブログを作って,そこからコピーして持ってきましょ。

ほげ山くん:新規のブログを作る…。えーっと,右上の[システムメニュー→ブログ]を選択するんですよね。で,⁠ブログを作成する」をクリック,と。

くれま先輩:ブログの名前とサイトURL+サイトパスのディレクトリ名は,は,いままでのものと被らないように何か入力してみてね。試しに「test」とかでいいよ。

ほげ山くん:はいー。テンプレートセットは「プロフェッショナルウェブサイト」にしときます。で,⁠ブログを作成する」をクリック。

くれま先輩:そうしたら,上部メニューの[デザイン→テンプレート]を選択して,⁠インデックステンプレート」のセクションの「JavaScript」をクリックしてね。

ほげ山くん:すごく長いソースが入ってますね…。

くれま先輩:ここは詳しく解説しないので,全部のソースをコピーしておいてね。で,左上のプルダウンメニューから「絵本出版のリブリート」のブログの方に戻ろう。

ほげ山くん:戻りました。

くれま先輩:そうしたら,上部メニューの[デザイン→テンプレート]を選択して,⁠インデックステンプレートを作成」をクリックして。名前を「JavaScript⁠⁠,出力ファイル名を「mt.js」にして,他はとくに触らずに「保存」をクリックしてね。

デフォルトの「検索結果」テンプレートから,必要なJavaScriptをとってくる

ほげ山くん:デフォルトの「検索結果」テンプレートを使うということは,またさっき作った「test」ブログに移動すればいいんですね?

くれま先輩:うん。⁠test」ブログの「検索結果」テンプレート編集画面を開いてね。デフォルトのソースが記述されているけど,その中で次の2つの部分を使うので,コピーしておいてね。

ページ分割用Javascriptに使う部分

<script type="text/javascript">
/* <![CDATA[ */
var user = <$mt:UserSessionState$>;
<mt:IfMoreResults>
function getResults(page) {
    page = parseInt(page);
    if (timer) window.clearTimeout(timer);
    var xh = mtGetXmlHttp();
    if (!xh) return false;
    var res = results[page];
    if (!res) return;
    var url = res['next_url'];
    if (!url) return;

    xh.open('GET', url + '&format=js', true);
    xh.onreadystatechange = function() {
        if ( xh.readyState == 4 ) {
            if ( xh.status && ( xh.status != 200 ) ) {
                // error - ignore
            } else {
                try {
                    var page_results = eval("(" + xh.responseText + ")");
                    if ( page_results['error'] == null )
                        results[page + 1] = page_results['result'];
                } catch (e) {
                }
            }
        }
    };
    xh.send(null);
}

function swapContent(direction) {
    if ( direction == undefined ) direction = 1;
    var page_span = document.getElementById('current-page');
    if (!page_span) return true;
    var next_page = direction + parseInt(page_span.innerHTML);
    var res = results[next_page];
    if (!res) return true;
    var content = res['content'];
    if (!content) return true;
    var div = document.getElementById('search-results');
    if (!div) return true;
    div.innerHTML = content;
    timer = window.setTimeout("getResults(" + next_page + ")", 1*1000);
    window.scroll(0, 0);
    return false;
}
<mt:Else><mt:IfPreviousResults>
function swapContent(direction) {
	return true;
}</mt:IfPreviousResults>
</mt:IfMoreResults>
/* ]]> */
</script>

ページ分割用Javascript002に使う部分

<mt:Ignore>Used with the ajax search capability of the new search class</mt:Ignore>
<mt:IfMoreResults>
<script type="text/javascript">
<!--
var div = document.getElementById('search-results');
var results = {
    '<$mt:CurrentPage$>': {
        'content': div.innerHTML,
        'next_url': '<$mt:NextLink$>'
    }
};
var timer = window.setTimeout("getResults(" + <$mt:CurrentPage$> + ")", 1*1000);
//-->
</script>
</mt:IfMoreResults>

ほげ山くん:あぁ,じーっと見てたら,発見できましたw これって,テンプレートモジュールにすればいいんですよね?

くれま先輩:うん,それぞれ名前をつけて,新規テンプレートモジュールにしておいてね!

ヘッダ領域の検索フォームにCGIに渡す引数を足す

くれま先輩:最後に,検索結果1ページに表示させる結果の数をコントロールするために,ヘッダ領域に入ってる検索フォームのところに要素を追加するよ。上部メニューの[デザイン→テンプレート]を選択して,テンプレートモジュールのセクションにある「ヘッダ領域」をクリック。

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

くれま先輩:そうしたら,<input type="hidden" name="IncludeBlogs" value="<mt:BlogID />" />っていう行を書いたと思うので,その直後にこの一行を追加してね。

<input type="hidden" name="IncludeBlogs" value="<mt:BlogID />" />の直後に追加する記述

<input type="hidden" name="limit" value=":<mt:SearchMaxResults />" />

ほげ山くん:mt:SearchMaxResultsって,なんでしたっけ?

くれま先輩:検索で返される結果の最大数を出力するタグなのよ。

ほげ山くん:なるほど。その最大値って,どこかで設定するんですか?

くれま先輩:環境設定ファイル(mt-config.cgi)で設定できるんだけど,今回はデフォルトの値「20件」のままで行こうと思うので,設定はこれにて終了!今回はちょっと長くなってしまったので,この辺で。

ほげ山くん:今日の作業で,ページ分割ってできるようになったんですか?

くれま先輩:うん,なってるよ!次回は必ず,検索用テンプレートを完成させて,動作の確認をしようね!

次回予告

  • 検索用のオプションを追加する。
  • 検索用テンプレートを完成させる。

著者プロフィール

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

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

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

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

著書:

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

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

URL:http://cremadesign.jp/