掲示板スクリプト「JibberBook2」- 設置編

http://www.chromasynthetic.com/scripts/jibberbook/

先日、本家ＨＰ「WooFla! – 気になったモノ、コトや日々の記録などを発信！」に設置したオープンソースの掲示板スクリプト「JibberBook2」の設置方法をできるだけわかりやすく説明していきたいと思います。

AJAXベースでサクサク動くのフリーの掲示板クリプト「JibberBook 2」:phpspot開発日誌

そもそもこのスクリプトの存在を知ったのは、上の記事を見たのがきっかけです。本家HPを今月初めに大幅リニューアルをして、何か良い掲示板はないものかと探していたところ、丁度この記事を見て、掲示板として設置することを決めました。なんていっても、とても珍しいクールな動作をするスクリプトですからね。オープンソースだし。

それでは早速設置方法を解説していきたいと思います。正直なところ、僕自身は詳しい技術的な点というのはほとんど分かっていません。しかしながら、それでも設置はかなり簡単にできてしまいます。

最初に注意しなければならないのが、このスクリプトを設置するための必須条件です。

ウェブサーバー
PHP5

この２点は必須です。JibbrBook2を設置するためのウェブサーバーがまず必要です。さらに、そのサーバーはPHP5に対応してなければ正常に動作しません。（更に言うとPHP5.2.2のサーバーではエラーがでて、PHP5.1.6のサーバーでは正常に動作しました。上のバージョンで何故エラーがでるのかは分かりません（汗））

ではまずJibberBook2のスクリプトをダウンロードしましょう。（説明はJibberBook2のスクリプトについてくるREADMEを自分なりに解釈して解説しています。）

サーバーにインストールする

http://www.chromasynthetic.com/scripts/jibberbook/

上のリンクをクリックして表示されたページにある「Download>>」をクリックし、スクリプトをダウンロードします。

ダウンロードが完了すれば、保存先フォルダに「jibberbookv2.zip」というZIPファイルがダウンロードされていると思うので、それを解凍します。

解凍できたら、そのフォルダにあるincフォルダを開き、「config.php」をテキストエディタなどで開きます。僕の場合はDreamweaverで開いて編集しました。

開くと、phpソースがずらっと表示されるわけですが、その19行目をまず編集します。

18 // password for admin area
19 define('JB_PASSWORD', 'password');

となっているので、「password」の部分を、自分が管理するためのパスワードに変更します。例えば1234というパスワードにしたい場合は以下のようになります。

18 // password for admin area
19 define('JB_PASSWORD', '1234');

パスワードの変更が出来たらJibberBook2をサーバーにアップします。jibberbookフォルダをそのまままとめてサーバーにアップしましょう。

ここでもし、デフォルトのXML版ではなくMySQLデータベース版でJibberBook2を使いたい場合、jibberbook>date_layer>mysqlフォルダ内にあるcomments.phpをjibberbook>incフォルダ内にコピー＆ペーストして上書きしてください。ただし、この場合サーバーがMySQLデータベースに対応している必要があります。よく分からない場合、デフォルトのままで問題ありません。

オプション設定をする

上記のインストール作業だけで、JibberBook自体は動作します。しかし、このスクリプトには他に様々なオプションを変更・設定できるので、それを解説していきます。

まず、一度に表示するコメントの数を設定します。パスワードを設定したときと同じファイルincフォルダにある「config.php」を開きます。表示するコメント数を設定は14行目になります。

14 define('JB_SHOW', 20);

デフォルトでは20個のコメントが一度に表示されます。20〜25個ほどが推奨数のようです。このJibberBook2というスクリプトは、コメント表示数を超えるコメントはFirefoxのGreacemonkeyのスクリプトとして有名なAutopagerizeのように、一番下までスクロールすると、次々と自動的に隠れていたコメントが表示されていきます。なので、あまり多いとロードに時間がかかってしまうので、25個以下が適当でしょう。

次に、時間の表示方法を設定します。デフォルトでは「November 24, 2007 at 00:00:00」という風に表示されます。設定を変更するには15行目を編集します。

15 define('JB_DATE_FORMAT', 'F j, Y \a\t H:i:s');

この「F j, Y \a\t H:i:s」と書かれた部分を編集するのですが、編集する場合は「PHP: date - Manual」を参照して、自分の表示させたい方法に編集します。例えば、「2007.11.24 AM 00:00」と表示させたい場合は

15 define('JB_DATE_FORMAT', 'Y.n.j A H:i');

となります。

次に、JibberBook2全体のデザインテンプレートの設定をします。この設定は16行目を編集します。

16 define('JB_THEME', 'default');

この「default」の部分を変更するとデザインテンプレートを変更できます。デザインテンプレート自体はjibberbook>themeフォルダの中にフォルダ毎にまとめられています。最初から用意されているテンプレートは「default」「black_and_blue」「under_the_sea」の３つになります。このどれかのフォルダ名を入れてやると、それぞれのデザインに変更することができます。このデザインテンプレートは自分で作ることも出来ます。その解説は「JibberBook2 - デザイン編」で解説しようと思います。

次に、コメントに許可するHTMLを設定します。この設定は25行目になります。

25 define('JB_ALLOWED_ELEMENTS', 'a[href|title],blockquote,p,em,strong,i,b,br,cite');

例の如く「a[href|title],blockquote,p,em,strong,i,b,br,cite」の部分を編集します。ここに書いたHTMLコードはコメント欄に書くと書き込んだときにコメントに反映されます。逆に、ここに書かれていないHTMLコードはコメント欄に書くと弾かれます。特に問題ない場合はこのままでいいかと思います。

最後に、「Akismet」という強力なスパムフィルターを設定できるので、その設定方法を解説したいと思います。

スパムフィルター「Akismet」を設定する。

これを設定するにはまず、ユーザー登録する必要があります。

WordPress.com

上記リンクにアクセスして、必要情報を記入し、ユーザー登録をしてください。正常に登録できたら、登録したメールアドレスにメールが届き、そこにAPIキーというものが書かれています。

Your WordPress.com API key allows you to use services like Akismet @ http://akismet.com/
API Key: **********

メールの下のほうにこのような記述があると思います。この「**********」部分がAPIキーになります。これをconfig.phpの28行目に記入します。

27 // Akismet settings
28 define('JB_AKISMET_KEY', '');
29 define('JB_GUESTBOOK_URL', '');

28行目の''の部分にメールで届いたAPIキーを、29行目の''の部分にアップしたJibberBookのURLをそれぞれ記入します。

以上でオプション設定は終了です。設定が終わったら、保存してconfig.phpをサーバーのほうに上書きしましょう。他にも変更できるところはありますが、変更しなくても問題ない部分は説明を省きました。

タイムゾーンを設定する

READMEには書かれていませんが、JibberBookに書き込まれた時間を表示するタイムゾーンはデフォルトでは世界標準時になっています。日本標準時間とは9時間の差があるので、日本で0時に書いたのに、JibberBookでは13時に書いたことになってしまいます。なので、これを日本標準時間で表示されるように編集します。

jibberbook>actionsフォルダ内にあるtransformxml.phpを開きます。するとこの11行目が

11 date_default_timezone_set('UTC');

となっていると思うのでこれを

11 date_default_timezone_set('Asia/Tokyo');

と変更してください。日本以外の標準時を使いたいときは「http://phpdoc.m-takagi.org/timezones.html」を参考にして「UTC」の部分を変更してください。これで、書き込まれた時間が日本標準時間で表示されるようになります。

変更できたら保存し、transformxml.phpをサーバーに上書きしましょう。

つぎに、コメント削除やスパム指定などの方法を説明します。

管理画面の使い方

管理画面へはJibberBookのアドレスの最後をadminとすることで入ることが出来ます。例えば「http://***.***.com/jibberbook/admin」といった感じです。

すると画像のようなページに飛ぶので、一番最初に設定したパスワードを入力して「Go」を押します。

そうすれば、画像のようなバーが上に表示され、その下には書き込まれたコメントが表示されます。それぞれのボタンを説明します。

Recent:最新のコメント、スパムコメントを表示します。
Ham：書き込まれたコメントを表示します。
Spam：書き込まれたスパムコメント（こちらでスパムと指定したもの）が表示されます。
Logout：管理画面からログアウトします。

コメントを削除するには、RecentかHamで表示されているコメントの下部に「Delete」という文字があるので、それをクリックするとそのコメントを削除できます。また、「Spam」という文字をクリックすると、そのコメントはスパムコメントとして処理され、JibberBookには表示されず、またその投稿者からのコメントはスパムコメントとして扱われ、JibberBookには表示されなくなります。スパムコメントとしての扱いを解除するには「Spam」ページで「Not Spam」という文字をクリックすればその投稿者からのスパム扱いを解除できます。

以上がJibberBook2の設定と基本的な操作方法です。かなり長々しくなってしまいましたが（汗）

しかしながら、このスクリプトはかなりクールな動きをしてくれます。コメントを書いて投稿ボタンをおすと、ページが切り替わることなくコメントが追加され、そのまま書き込んだコメントにスルスルーっとフォーカスされます。

文字での説明だけでは分かりにくいと思うので、下記のデモページでその新しい感覚を味わってみてください。

http://www.chromasynthetic.com/scripts/demo/jibberbook/

また、僕が設置したJibberBookはこのようになっています。

http://ooze-flash.com/guestbook/

かなりデザイン面を変更しました。このスクリプトのいいところは、かなりデザインの融通が利くということです。しかもある程度のHTML、CSSの知識があれば簡単にデザイン変更できてしまいます。デザイン変更に関しては、後日デザイン編としてまたハウツーを書きたいと思います。

いやぁ本当に長くなった（笑）

今回このJibberBook２を設置するにあたり、「http://dreamizm.net/」のたけさんに多大なる協力を頂きました。この場を借りて再度お礼を。ありがとう！！