画面内に付箋を貼るようなUIの掲示板を作れるPHP＆jQueryなサンプルプログラム:phpspot開発日誌を改良しつつこのブログに設置してみました。

日本語もOK!Ajaxとphp,JQueryで作る付箋メモシステム「Sticky Notes With AJAX, PHP & jQuery」 | DesignDevelopでも紹介されていますね。

動作は以下からご確認下さい。
⇒ペタペタ掲示板
2011/01/11追記
削除対応版の記事書きました。

設置にあたってデフォルトからカスタマイズした点は以下の通りです。

• 表示条件
• 日本語化
• 書き込み時にメール送信

それでは設置の手順を紹介して行きたいと思います。

全体の流れ兼目次

• 必要ファイルの入手
• まずはデータベースを作成
  • SQLファイルをインポート
• DB接続情報の編集-connect.php
• 表示条件を変更する-demo.php
  • phpMyAdminを利用してSQL文を書き直す
  • このエントリー長くね？って場合
• 日本語化する
  • エラーメッセージの日本語化
  • 付箋追加用HTMLの日本語化
• PHPで書き込みがあったらメールを送る
• 総括

必要ファイルの入手

まずはAJAX-enabled Sticky Notes With PHP & jQuery - Tutorialzineから必要なファイルをDLします。

DLしたzipファイルを解凍すると

• ajax
  • post.php（追加処理php）
  • update_position.php（位置情報処理php）
• fancybox
  • fancyboxファイル群、jQueryもここにあります。
• img
  • 画像ファイル群
• add_note.html（fancyboxで呼び出される追加用HTML）
• connect.php（DB接続情報）
• demo.php（表示用php）
• script.js
• styles.css
• table.sql（MySQLへのINSERT文）

まずはデータベースを作成

データベースを作成します。
これはお使いのサーバにより手法は異なると思いますが、エックスサーバの場合で記述して行きますので、適宜読み替えて下さい。

[サーバパネル]→[MySQL設定]より[MySQLの追加]へ遷移します。
次のページで「MySQLデータベース名」「文字コード」を指定します。

MySQLデータベース名は任意で構いません。
文字コードはUTF-8を指定して下さい。
作成出来たら、自分のユーザーにアクセス権を与えます。

SQLファイルをインポート

続いてphpMyAdminにログインして、先ほど作成したデータベースを選択します。

選択後、インポートタブをクリックして、先ほどDLしたtable.sqlをインポートします。

これで、必要なテーブルがデータベースに作成されました。

DB接続情報の編集-connect.php

データベースが出来上がったところで、接続情報の編集を行います。
テキストエディタなんかでconnect.phpを開き、以下を修正します。

$db_host		= '';//接続先ホスト名、phpMyAdminの上部に出ています
$db_user		= '';//先ほどアクセス権を与えたユーザー
$db_pass		= '';//↑のパスワード
$db_database	= '';//先ほど作成したデータベース名

MTをお使いの方は見慣れているかも知れません。mt-config.cgiに書いているものと同じ項目です。

ここまで完了して、全てのファイルをサーバにアップロードすると一応動作します。
jQueryの素晴らしさを感じます。
とりあえず色々書き込みしてみましょう。

以下からはカスタマイズです。

表示条件を変更する-demo.php

色々書き込みした後にDBを覗くとイメージが湧きやすいです。

DB上ではこんな構成になっています。これを踏まえて以下見て行って下さい。

デフォルトの表示条件はdemo.php内の以下箇所で指定されています。

// Removing notes that are older than an hour:
mysql_query("DELETE FROM notes WHERE id>3 AND dt<SUBTIME(NOW(),'0 1:0:0')");
$query = mysql_query("SELECT * FROM notes ORDER BY id DESC");

id3番以上で追加日（dt）が一時間以内なら表示、となっています。（多分・・・MySQLとか初心者なので間違っていたらご指摘下さい＞＜）

そんな条件だと、何も表示されていない時ばっかになっちゃいそうなので表示条件を考えます。
今回は直近20件に変更してみようと思います。

phpMyAdminを利用してSQL文を書き直す

表示条件を変更するにはSQL文を書き直す必要がありますが、分からなくても大丈夫です。

↑の画像のように、phpMyAdmin上で実際に表示したい条件を指定します。
表示結果を確認して問題無ければ[PHP コードの作成]を押します。
これでSQL文が分かっちゃうのです！

$sql = 'SELECT * FROM `notes` ORDER BY `notes`.`id` DESC LIMIT 0, 20 '; 

これをdemo.phpの該当箇所に埋め込みます。

// Removing notes that are older than an hour:
//mysql_query("DELETE FROM notes WHERE id>3 AND dt<SUBTIME(NOW(),'0 1:0:0')");
//↑はもう要りません
//↓にさっきの右辺部分を埋め込みます
$query = mysql_query("SELECT * FROM `notes` ORDER BY `notes`.`id` DESC LIMIT 0, 20 ");

これで表示条件の変更が完了です。

このエントリー長くね？って場合

さて、ここら辺であなたは、このエントリー長いなと思っているころでしょう。
とりあえずブクマして、あとで読むにでもしておいて下さいｗ

日本語化する

まずは、付箋追加時に出るエラーメッセージを日本語に置き換えます。

エラーメッセージの日本語化

これはscript.js内で指定されています。

alert("The note text is too short!")
↓
alert("もっと長いコメントが欲しいです!")

alert("You haven't entered your name!")
↓
alert("お名前を教えてください!名無しでもOK!")

としてあげます。これだけだと文字化けするのでdemo.phpの方で

<script type="text/javascript" src="script.js" charset="Shift_JIS"></script>

script.jsの文字コードを指定します。

付箋追加用HTMLの日本語化

これは単純に文字列を置き換えるだけでいけるのかな、なんて思っていましたが文字化けしました。
解決方法ですが、ファイルの文字コードを変換出来るエディタなんかでUTF-8に変換してあげる事で解決しました。
私は秀丸エディタで変換しましたが、シェアウェアなので微妙ですね。
ただ、他のエディタの事は良く分からないのでファイル　文字コード　変換 - Google 検索等から探してみて下さい。

PHPで書き込みがあったらメールを送る

書き込みがあったら、多分もの凄い嬉しいので一刻も早く知りたいなと思い、メールを送信するようにしました。

追加時にAJAXで呼び出されるpost.phpの以下箇所にメール送信Scriptを埋め込みます。

/* Inserting a new record in the notes DB: */
mysql_query('	INSERT INTO notes (text,name,color,xyz)
				VALUES ("'.$body.'","'.$author.'","'.$color.'","0x0x'.$zindex.'")');
//↑こいつがDBに書き込みしてるので、その時に
//メール送信
	$mailto="caraldok@gmail.com,";
	$result=$body;
	$subject="掲示板書き込みがありました";
	$subject=mb_convert_encoding($subject, "EUC-JP","auto");
	$result=mb_convert_encoding($result, "EUC-JP","auto");
	mb_send_mail($mailto, $subject, $result);

こんな感じでメールが飛んでくるようになります。

総括

このブログでは、CSSをいじるのが面倒だったのでMTのインデックステンプレートを新規作成し、全体をiframeで読み込む形にしています。
↑一部本音を隠しました。

こんな感じで全て公開されていると、実装は簡単な上に、読み解いているだけで勉強になりますね。

非常に楽しかったです。

なんかコメントとか下さいｗ
⇒ペタペタ掲示板

10/01/25追記

掲示板の方で、

ふと疑問。これってブラウザを開いている限りSQLの接続繋ぎっぱなしなのかな？

コメンター

と、ご指摘頂きました。確かになんか危うそう。

なので切断方法調べて

mysql_close($link);

の記述をメインのPHPへ追加しました。
これでDBへの接続は切れてるはずです。

ありがとうございました。

Tumblr

Tweet

2010年1月23日