PHP+Ajaxゲストブック（その5・Serene Bachへの基本的な組み込み手順）

昨日に引き続いて、PHP+Ajaxゲストブックの解説です。
今日は、Serene Bachの標準テンプレート（Summer Breeze）にゲストブックを組み込む手順を解説します。
また、Summer Breezeをベースにした他の方のテンプレートでも、同じ手順で組み込むことが可能だと思います（ただし、スタイルシートの関係で、配色は合いません）。

1.ヘッダー部分にJavaScriptを追加

まず、ベースHTMLテンプレートのヘッダー部分（<head>～</head>）に、以下のJavaScriptを追加します。 

<script type="text/javascript" src="http://アップロード先/js/prototype.js"></script>
<script type="text/javascript" src="http://アップロード先/js/prototype_add.js" charset="utf-8"></script>
<script type="text/javascript" src="http://アップロード先/js/guestbook/guestbook.js" charset="utf-8"></script>

例えば、「http://www.foo.com/phpajax/～」に各ファイルをアップロードした場合は、以下のJavaScriptを追加します。 

<script type="text/javascript" src="http://www.foo.com/phpajax/js/prototype.js"></script>
<script type="text/javascript" src="http://www.foo.com/phpajax/js/prototype_add.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.foo.com/phpajax/js/guestbook/guestbook.js" charset="utf-8"></script>

2.スタイルシートの追加

次に、ベースHTMLテンプレートのヘッダー部分に、以下のように、スタイルシートを組み込む行を追加します。 

<link rel="stylesheet" href="http://アップロード先/css/guestbook/guestbook_sb.css" type="text/css" />

例えば、「http://www.foo.com/phpajax/～」に各ファイルをアップロードした場合だと、以下の行を追加します。 

<link rel="stylesheet" href="http://www.foo.com/phpajax/css/guestbook/guestbook_sb.css" type="text/css" />

ただし、このスタイルシートでは、Summer Breezeテンプレートの標準のスタイルシートと同じ配色になるようにしています。
スタイルシートをカスタマイズして配色を変えている場合、guestbook_sb.cssもそれに合わせてカスタマイズする必要があります。
guestbook_sb.cssのカスタマイズ方法は、後日解説します。

3.ゲストブックを表示する位置にタグを追加

最後に、各テンプレートのサイドバー部分の中で、ゲストブックを表示したい位置に、以下のタグを追加します。 

<dl id="guestbook">
<dt id="guestbookname">Guestbook</dt>
<dd id="guestbooklist">

<div id="ajax_guestbook"></div>
<div id="ajax_guestbook_msg"></div>
<script type="text/javascript">
//<![CDATA[
ag_obj =
    new AjaxGuestBook({
        main_url : 'http://アップロード先/app/guestbook/guestbook.php',
        edit_url : 'http://アップロード先/app/guestbook/edit.php'
    });
ag_obj.view_page(1);
//]]>
</script>

</dd>
</dl>

例えば、「http://www.foo.com/phpajax/～」に各ファイルをアップロードした場合は、以下のJavaScriptを追加します。 

<dl id="guestbook">
<dt id="guestbookname">Guestbook</dt>
<dd id="guestbooklist">

<div id="ajax_guestbook"></div>
<div id="ajax_guestbook_msg"></div>
<script type="text/javascript">
//<![CDATA[
ag_obj =
    new AjaxGuestBook({
        main_url : 'http://www.foo.com/phpajax/app/guestbook/guestbook.php',
        edit_url : 'http://www.foo.com/phpajax/app/guestbook/edit.php'
    });
ag_obj.view_page(1);
//]]>
</script>

</dd>
</dl>

4.動作の確認

ここまでで、ゲストブックの組み込みの作業は終わりです。
組み込み先のBlogを開いてみて、ゲストブックが表示されることを確認します。