PHP+Ajaxゲストブック(その8・独立ページタイプ/Movable Type標準テンプレート版)

  • 投稿日:
  • by
  • カテゴリ:

PHP+Ajaxゲストブックは、サイドバーに組み込むだけでなく、独立したページとして表示することもできます。
そのサンプルとして、Movable Type標準テンプレートと同じデザインのものを紹介します。

なお、このサンプルでは、Movable Type標準テンプレートとタグの構造が同じになるようにしていますので、Movable Typeのスタイルシート(styles-site.css)をカスタマイズしていれば、そのカスタマイズに沿った表示になります。
また、StyleCatcherでスタイルシートを変えれば、そのスタイルシートに沿った表示になります。

↓Movable Typeの標準スタイルシートでのゲストブックの表示例
Movable Typeの標準スタイルシートでのゲストブックの表示例

↓StyleCatcherで「Baby」スタイルシートに変えた場合のゲストブックの表示例
StyleCatcherで「Baby」スタイルシートに変えた場合のゲストブックの表示例

1.準備

ファイルのアップロードやデータベースの初期化等をまだ行っていない方は、こちらのエントリーの手順に沿って、必要なファイルのアップロードと、データベースの初期化の作業を行っておきます。

2.MT用テンプレートのダウンロード

次に、以下のリンクをクリックして、MT用のテンプレートをダウンロードします。

GuestBookMTStandardTmpl.zip

ダウンロードが終わったら、ファイルを解凍します。
「mt_standard」と「mt_template」の2つのフォルダができますが、今の時点ではまだアップロードしません。

3.テンプレートのアップロード(独立ページ型のみを使う場合)

独立ページ型のゲストブックのみを使い、サイドバー埋め込み型を使わない場合は、サイドバー埋め込み型のゲストブックのテンプレートに、独立ページ型のテンプレートを上書きでアップロードします。

サーバー用ファイルをアップロードしたディレクトリの中に、「template」→「guestbook」のディレクトリがあり、そこに「main.tpl」などのゲストブックのテンプレートがあります。
そのディレクトリに、先程解凍した「mt_standard」フォルダ内のファイルをアップロードし、main.tplなどのファイルを上書きします。

4.テンプレートのアップロード(サイドバー埋め込み型と併用する場合)

独立ページ型とサイドバー埋め込み型のゲストブックを併用したい場合は、独立ページ型のテンプレートを、サイドバー埋め込み型のテンプレートと別のディレクトリにアップロードします。

サーバー用ファイルをアップロードしたディレクトリの中に、「template」→「guestbook」のディレクトリがありますが、そのディレクトリの中に「mt_standard」フォルダを丸ごとアップロードします。
以下のようなディレクトリ構造になるようにすることになります。

  • サーバー用ファイルのアップロード先ディレクトリ
    • templatesディレクトリ
      • main.tpl
      • preview.tpl
      • posterror.tpl
      • post.tpl
      • delete_login.tpl
      • delete_main.tpl
      • dberror.tpl
      • mt_standardディレクトリ
        • main.tpl
        • preview.tpl
        • posterror.tpl
        • post.tpl
        • delete_login.tpl
        • delete_main.tpl
        • dberror.tpl

5.設定ファイルの書き換え((サイドバー埋め込み型と併用する場合)

独立ページ型とサイドバー埋め込み型のゲストブックを併用したい場合は、設定ファイルも書き換える必要があります。

サーバー用ファイルをアップロードしたディレクトリの中に、「config」→「guestbook」ディレクトリがあり、その中に「config_gb1.cfg」というファイルがあります。
そのファイルをいったんパソコンにダウンロードします。

そして、そのファイルをメモ帳等で開き、以下の赤字の箇所を追加して、元のディレクトリにアップロードしなおします。

[main_template_set_1]
main=main.tpl
post=post.tpl
preview=preview.tpl
posterror=posterror.tpl
dberror=dberror.tpl

[delete_template_set_1]
login=delete_login.tpl
main=delete_main.tpl
dberror=dberror.tpl

[main_template_set_2]
main=mt_standard/main.tpl
post=mt_standard/post.tpl
preview=mt_standard/preview.tpl
posterror=mt_standard/posterror.tpl
dberror=mt_standard/dberror.tpl

[delete_template_set_2]
login=mt_standard/delete_login.tpl
main=mt_standard/delete_main.tpl
dberror=mt_standard/dberror.tpl

[require_input]
author=0
・
・(以下略)
・

6.ゲストブック表示用テンプレートの作成(独立ページ型のみを使う場合)

次に、Movable Typeにログインして、ゲストブックを表示するためのテンプレートを作成します。
まず、独立ページ型のゲストブックのみを使い、サイドバー埋め込み型を使わない場合から解説します。

ダウンロードしたファイルの「mt_template」フォルダに、「guestbook.tmpl」というファイルがあります。
このファイルをメモ帳等で開きます。
そして、そのファイルの中で、「サーバー用ファイルのアップロード先」と書かれている箇所(全部で5箇所)を、ご自分の環境に合わせて置換します。

↓置換が必要な箇所(赤字の部分)

・
・(途中略)
・
   </MTBlogIfCCLicense>

<script type="text/javascript" src="サーバー用ファイルのアップロード先/js/prototype.js"></script>
<script type="text/javascript" src="サーバー用ファイルのアップロード先/js/prototype_add.js" charset="utf-8"></script>
<script type="text/javascript" src="サーバー用ファイルのアップロード先/js/guestbook/guestbook.js" charset="utf-8"></script>

</head>
・
・(途中略)
・
                  <div id="alpha-inner" class="clearfix">

<div id="ajax_guestbook"></div>
<div id="ajax_guestbook_msg"></div>
<script type="text/javascript">
//<![CDATA[
ag_obj =
    new AjaxGuestBook({
        main_url : 'サーバー用ファイルのアップロード先/app/guestbook/guestbook.php',
        edit_url : 'サーバー用ファイルのアップロード先/app/guestbook/edit.php',
        scroll_to_top : 'page' });
ag_obj.view_page(1);
//]]>
</script>
                  
                  </div>
・
・(以後略)
・

例えば、サーバー用ファイルを「http://www.foo.com/server/~」にアップロードした場合、「サーバー用ファイルのアップロード先」を「http://www.foo.com/server」に置換します。

置換が終わったら、ファイルの内容を全てコピーします。
そして、Movable Typeにログインし、インデックス・テンプレートを新規作成して、今コピーした内容を「テンプレートの内容」の欄に貼り付けます。
また、「テンプレート名」の欄には「ゲストブック」と入力し、「出力ファイル名」の欄には「guestbook.html」と入力します。

ここまでが終わったら、テンプレートを保存して再構築します。

7.ゲストブック表示用テンプレートの作成(サイドバー埋め込み型と併用する場合)

独立ページ型とサイドバー埋め込み型のゲストブックを併用したい場合、上の6の手順でテンプレートを作成した後、JavaScriptを一部書き換えて、以下の赤字の部分を追加します。
そして、テンプレートを保存して再構築します。

・
・(途中略)
・
<div id="ajax_guestbook"></div>
<div id="ajax_guestbook_msg"></div>
<script type="text/javascript">
//<![CDATA[
ag_obj =
    new AjaxGuestBook({
        main_url : 'サーバー用ファイルのアップロード先/app/guestbook/guestbook.php',
        edit_url : 'サーバー用ファイルのアップロード先/app/guestbook/edit.php',
        tid : 2,
        scroll_to_top : 'page' });
ag_obj.view_page(1);
//]]>
</script>
・
・(途中略)
・

8.動作の確認

ここまでで、ゲストブックの設置の作業は終わりです。
「http://BlogのURL/guestbook.html」にアクセスして、ゲストブックが動作することを確認します。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください