小粋空間  -  a cheap joke and a play on words site

ページ分割の Ajax 化

Movable Type で MTPaginate を利用したページ分割の Ajax 化です。

このカスタマイズは1年以上前に作ったもので、実装がいまひとつなため公開していなかったのですが、「こういうやり方もあります」という、案レベルの位置づけで公開します。

サンプルを用意しましたのでお試しください（ファイルサイズが小さいため効果が分かりにくいです）。

• MTPaginate の Ajax 化サンプル

仕組みは、ページナビゲーションのリンクをクリックした時、リンク先のページを Ajax 経由で呼び出し、取得したファイルから必要な部分だけを切り出して、ページに表示させるというものです。

以下、カスタマイズ方法です。

ページ分割用プラグインは MTPaginate バージョン 1.28 を利用しています。プラグインは「MT Extensions: MTPaginate」よりダウンロードし、Movable Type に予めインストールし、ページ分割の設定まで行っておいてください。ページ分割の方法については「ページ分割」のカテゴリーを参照願います。

本エントリーのカスタマイズはトップページまたはエントリー・アーカイブ以外のアーカイブページでのみ有効です。またブログの文字コードが UTF-8 のみ適用可能です。

１．prototype.js のダウンロード・アップロード

Prototype JavaScript Framework

上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js は index.php と同じディレクトリにアップロードしてください。

２．paginate.js のダウンロード・アップロード

下記の paginate.js をダウンロードし、index.php と同じディレクトリにアップロードしてください。

paginate.js

３．プラグインファイル修正

MTPaginate/lib/MTPaginate.pm

を任意のエディタで開き、下記の赤色部分を青色の内容に書き換えます。

sub PaginateNavigator {
　　　　：
　　（中略）
　　　　：
    } else {
        my $target = $args->{target} || "";
        if($pg->{mode} eq 'cgi') {
            $target = " target=\"$target\"" if $target;
            if ($format_all && $place_all ne 'after') {
                my $title = "";
                $title =  sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
                if($pg->{current_page} eq 'all') {
                    $res .= "$all_current$separator";
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
                }
            }
 
            $start = ($list_pages eq 'after') ? $pg->{current_page}+1 : 1;
            $end = ($list_pages eq 'before') ? $pg->{current_page}-1 : $num_pages;
            $format_title = " title=\"$format_title\"" if $format_title;
            for(my $i = $start; $i <= $end; $i++) {
                $res .= $separator if($i > $start);
                if($i eq $pg->{current_page}) {
                    $res .= sprintf("$format_current", $i);
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=$i$anchor\"$target" .  sprintf($format_title, $i) .  sprintf(">$format", $i) . '</a>';
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=$i$anchor')\"$target" .  sprintf($format_title, $i) .  sprintf(">$format", $i) . '</a>';
                }
            }
 
            if ($format_all && $place_all eq 'after') {
                my $title = "";
                $title =  sprintf(" title=\"$format_all_title\"", $num_pages) if $format_all_title;
                if($pg->{current_page} eq 'all') {
                    $res .="$all_current$separator";
                } else {
                    $res .= "<a href=\"" . $pg->{paginate_self} . "=all$anchor\"$title$target>$all</a>$separator";
                    $res .= "<a href=\"\#\" onclick=\"changePage('" . $pg->{paginate_self} . "=all$anchor')\"$title$target>$all</a>$separator";
                }
            }
        } else {
            $target = " target=\\\"$target\\\"" if $target;
            $res = "<?php\n";
            if ($format_all && $place_all ne 'after') {
                my $title = "";
                $title =  sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
                $res .=<<PHP
    if(\$paginate_current_page == 'all') {
        echo '$all_current$separator';
    } else {
        echo "<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>$separator";
        echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>$separator";
    }
PHP
            }
            
            $format_title = " . sprintf(' title=\"$format_title\"', \$i)" if $format_title;
            $res .=<<PHP;
for(\$i = $start; \$i <= $end; \$i++) {
    if(\$i > $start)
        echo '$separator';
    if(\$i == \$paginate_current_page) {
        echo sprintf("$format_current", \$i);
    } else {
        echo "<a href=\\\"\$paginate_self=\$i$anchor\\\"$target" $format_title .  sprintf('>$format', \$i) . '</a>';
        echo "<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=\$i$anchor')\\\"$target" $format_title .  sprintf('>$format', \$i) . '</a>';
    }
}
PHP
            if ($format_all && $place_all eq 'after') {
                my $title = "";
                $title =  sprintf(" title=\\\"$format_all_title\\\"", $num_pages) if $format_all_title;
                $res .=<<PHP
    if(\$paginate_current_page == 'all') {
        echo '$separator$all_current';
    } else {
        echo "$separator<a href=\\\"\$paginate_self=all$anchor\\\"$title$target>$all</a>";
        echo "$separator<a href=\\\"\#\\\" onclick=\\\"changePage('\$paginate_self=all$anchor')\\\"$title$target>$all</a>";
    }
PHP
            }
            $res .=<<PHP;
?>
PHP
        }
    }
    return $res;
}

修正後、保存して元のディレクトリにアップロードしてください。

４．テンプレートに script 要素追加

ページ分割を行いたいテンプレートに、下記の script 要素を追加します。

<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>paginate.js"></script>

５．Ajax 対象部分にHTMLコメント追加

Ajax 化を行ないたい部分に、下の HTML コメント（青色）を追加します。ここでは当サイトの配布テンプレートを使用しているので、中央カラム全体を括っている div 要素（id 属性 content）のすぐ内側に設定します。

　　　　　：
<div id="content">
<!-- AjaxStart -->
　　　　　：
　　　（中略）
　　　　　：
<!-- AjaxEnd -->
</div>
　　　　　：

2007.12.06
最後のリストより、<!-- /content --> を削除（MT4でコメントタグを削除したため）

• 
• Tweet

<!-- /content -->

<div class="paginate">

<div id="content">