PHP+Ajaxゲストブック（その9・独立ページタイプ／Movable Type小粋空間テンプレート版）

PHP+Ajaxゲストブックの独立ページ版の第2弾として、Movable Typeの小粋空間様のテンプレートと同じデザインのものを紹介します。

なお、このサンプルでは、小粋空間様のテンプレートとタグの構造が同じになるようにしていますので、小粋空間様のスタイルシートをカスタマイズしていれば、そのカスタマイズに沿った表示になります。

1.準備

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

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

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

GuestBookMTKoikiTmpl.zip

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

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

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

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

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

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

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

サーバー用ファイルのアップロード先ディレクトリ
- templatesディレクトリ
  - main.tpl
  - preview.tpl
  - posterror.tpl
  - post.tpl
  - delete_login.tpl
  - delete_main.tpl
  - dberror.tpl
  - mt_koikiディレクトリ
    - 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_koiki/main.tpl
post=mt_koiki/post.tpl
preview=mt_koiki/preview.tpl
posterror=mt_koiki/posterror.tpl
dberror=mt_koiki/dberror.tpl

[delete_template_set_2]
login=mt_koiki/delete_login.tpl
main=mt_koiki/delete_main.tpl
dberror=mt_koiki/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」にアクセスして、ゲストブックが動作することを確認します。

お知らせ