ページ分割の Ajax 化

ページ分割の Ajax 化

Posted at July 2,2007 2:35 AM
Tag:[Ajax, Customize, MovableType, MTPaginate]

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

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

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

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

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

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

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

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

Prototype JavaScript Framework

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

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

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

paginate.js

3.プラグインファイル修正

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;
}

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

4.テンプレートに script 要素追加

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

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

5.Ajax 対象部分にHTMLコメント追加

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

     :
<div id="content">
<!-- AjaxStart -->
     :
   (中略)
     :
<!-- AjaxEnd -->
</div>
     :

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

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

MTのPHP化とページ分割 from 八代目日記
今更ですが、MTで作ってるページを全てPHP化しました。 ちゅうのは、祇園観光案... [続きを読む]

Tracked on July 7, 2007 8:45 PM

ダイナミックパブリッシング化&PHP化 from ムジログ
Movable Typeにしてから最も不満だったのが、再構築の時間が長いという... [続きを読む]

Tracked on March 16, 2008 3:45 PM
コメント

yujiroさま。こんにちわ。いつもお世話になっております。

<!-- /content -->とは、何処の場所にあるのでしょうか?
それと<div id="content">とは・・・
メインページ・ウェブページ・ブログ記事・ブログ記事リストそれぞれに
ありますが・・・全部に<!-- AjaxStart -->を挿入した方が
いいのでしょうか?

また初歩的の質問だとは思いますが(^▽^;)
ご指導を宜しくお願い致します。

[1] Posted by アプル logo : December 6, 2007 2:48 AM

>アプルさん
こんにちは。
ご質問の件ですが、この記事はMT3の時に書いたものですので、MT4の配布テンプレートには

<!-- /content -->

はありません(先ほど削除しました)。

また、埋め込むテンプレートは、折りたたみを行いたいページに対応するテンプレートに設定すればOKです。
ただし、複数ブログ記事を表示しない「ブログ記事」や「ウェブページ」に設定を行っても意味がないので、対応するのは「メインページ」か「ブログ記事リスト」のいずれかになると思います。
それではよろしくお願い致します。

[2] Posted by yujiro logo : December 6, 2007 10:27 AM

yujiroさま。こんにちわ。いつもお世話になっております。
早速のご指導をありがとうございます。

「メインページ」か「ブログ記事リスト」の両方へ入れても
何もなりません。どちらか1つでも同じ状態です。

MTPaginate.pmプラグインは、利用可能(無効化)で
いいのですよね?

またご指導を宜しくお願い致します♪

[3] Posted by アプル logo : December 6, 2007 1:28 PM

>アプルさん
こんにちは。
ご質問の件ですが、ページ分割の設定はお済みでしょうか。再度ご確認頂ければ幸いです。
なお、このカスタマイズは冒頭に記してます通り、案レベルの内容ですので、予めご承知ください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : December 10, 2007 11:57 AM

yujiroさま。こんにちわ。いつもお世話になっております。
お返事が遅れてしまいすいません(^▽^;)
ページ分割をしていませんでした。ページ分割をする事で
と表示するようになりました。
ありがとうございました♪
これからも宜しくお願い致します。
何かと忙しくなるこの時期・・・体調にはお気をつけ下さい。

[5] Posted by アプル logo : December 13, 2007 2:36 AM

こんばんわ><
また少し お伺いします
今回 メインページをページ分割 Ajax化してみたのですが
表示がまえと 少しちがってきてしまっています
右サイドバーの表示が少しおかしくなったのです
ウィンドウを縮小表示してみるとよくわかるのですが。。。
わたしのやりかたが おかしかったのかどうか 不明なので><

表示がおかしくなるのは Ajax化した メインページのみで
ほかの月別カテゴリーなどや エントリーのタイトルなどから 表示させるとふつうなのですが
これとおなじように 表示させることはできますか?
Ajax化しないで ページ分割だけの場合はきちんと表示されるので もしダメならAjax化はやめようとおもいます なおせるなら直してみようかなと思っています

解りづらい説明ですみません><
HPみてもらえばわかるとおもうので お時間あるときに よろしくお願いいたします

[6] Posted by ましゅ : December 15, 2007 4:57 AM

すいません
上記の追加です
Opera Mozilla Firefox では表示は きちんとされてるようですが
IE7でみると、、、、表示がおかしいです
よろしくお願いします

[7] Posted by ましゅ : December 15, 2007 3:35 PM

>ましゅさん
こんにちは。
ご利用ありがとうございます。
確認ですが、「右サイドバーの表示が少しおかしい」というのはIE7のみでしょうか。またどのようにおかしいかを「ウィンドウを縮小表示」と併せて具体的にお知らせ頂ければ幸いです。
またこのカスタマイズは冒頭に記してます通り、案レベルなのでご要望にお応えできない可能性がありますので予めご容赦ください。
なおサンプルではIE7でも動作しているようですので、基本的な設定での問題はないように思われます。
それではよろしくお願い致します。

[8] Posted by yujiro logo : December 17, 2007 1:34 PM

お返事ありがとうございます
一応確認したところ 上記でものべましたが Opera Mozilla Firefoxでは
もんだいないようです

IE7では縮小表示したとき右サイドバーが エントリー記事とかぶってしまっています それと 右サイドバーの サイドタイトルなどが なぜか サイドバーのボーダーぎりぎりに表示されてしまっています
リキッドレイアウトなのでそれは なにか関係あるのでしょうか、、、、
お手を和ずれ早生手申し訳ありません アドレスはいっているので 一度確認していただければ うれしいです うまく説明できてないので><

お手すきのときに よろしくおねがいします 

[9] Posted by ましゅ : December 17, 2007 4:10 PM

すいません
いろいろ いじってみたのですが どうにもうまくいかず
リキッドレイアウトのせいでは?とおもい ふつうの 3カラムにデザイン変更してみたとこ
なぜか サイドバーがブログ記事(中央カラム)の下に表示されてしまうという事態になってしまい わかけが わからくなってしまいました;;
リキッドにすると サイドバーは右に表示されるのですが、、、、

頭がこんがらがってきたので 3カラムリキッドにもどし
メインページの分割化のみにもどしました;;
いろいろ お手数かけましたが これで問題ないのでこれで行こうかと考えています
いろいろカスタマイズしているのが関係しているのか わたしの設定ミスなのか不明なのですけど。。。

[10] Posted by ましゅ : December 17, 2007 6:48 PM

なんども コメントして すみません
一応 トップページのみを 分割化して 3カラムにもどしたときの症状
(サイドバーがエントリー記事の下に表示される)は 
http://mashyu.sakura.ne.jp/newで みれるようにしておきましたので
お手すきのときに 確認してわかることがあればよろしくお願いします
公開してるブログは上記のコメントのように ページ分割リキッドでしばらく様子みるつもりですので お返事はほんとに お手すきの時で結構です^-^
いつもいつも もうしわけありません

[11] Posted by ましゅ : December 17, 2007 7:28 PM

>ましゅさん
こんばんは。
ご質問の件ですが、

<div class="paginate">

に対応するdivの終了タグがありません。
なお、レイアウト崩れが発生した場合はマークアップ誤りがほとんどですので、Another HTML-lint gatewayで確認されることをお勧めします。
それではよろしくお願い致します。

[12] Posted by yujiro logo : December 18, 2007 11:42 PM

こんばんわ
お返事ありがとうございます
yujiroさんのご指摘で テンプレートを いろいろみなおしたところ
ページ分割する際にメインページに挿入する
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
の</div>をもともとある</div>と勘違いしておりました><
それをなおしたところ 3カラムでも きちんと 表示されました
それと ききたいののですが Ajax化するのに
挿入する
<!-- AjaxEnd -->
</div>
はこの
</div>
</MTPaginateIfMultiplePages>
</MTPaginate>
のところでしょうか? それともその下の行にあるもともとあった</div>のとこですか?
一応もともとあったところに挿入して4項のscriptをヘッダーに記述しましたがそれであっていますでしょうか?
一応機能していますがちゃんとAjax化されてるのどうかとかよくわからないので^^;


[13] Posted by ましゅ : December 19, 2007 4:12 AM

>ましゅさん
こんばんは。
ご質問の件ですが、MTPaginateIfMultiplePagesのすぐ上のdiv終了タグではありません。

言い換えると、

<div id="content">

に対応したdiv 終了タグです。
話がかみ合っていなかったらすいません。
それではよろしくお願い致します。

[14] Posted by yujiro logo : December 23, 2007 2:42 AM

こんばんわ
いつもいつも 丁寧にお返事ありがとうございます
お返事の内容からすると たぶんわたしが挿入した場所であってるようなので
なんtか安心しましたw
ほんとに いつもお世話になってばかりで申し訳ないです
これからも ヘンなご質問するかもですが どうぞよろしくです^-^
yujiro様にとって 素敵なクリスマスがすごせますように^-^
「Merry Christmas!」そして これからもよろしくおねがします_(._.)_

[15] Posted by ましゅ : December 24, 2007 3:42 AM

>ましゅさん
こんばんは。
ご連絡ありがとうございました。
ではでは!

[16] Posted by yujiro logo : December 27, 2007 1:51 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)