【Javascript】jQueryとPHPとSqliteを使ったAjaxのシンプルなチャット

jQueryを使ったシンプルなAjaxのチャットです。

実装にはjQueryと1つのプラグイン、そしてsqliteのデータベースが必要です。下記に必要なものを全てまとめたファイルがあるので、サーバーにアップするだけですぐ使えます。

サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

ご自由に利用・カスタマイズ・再配布OKです。連絡やコピーライト(入ってないけど)もなくてだいじょぶです。

データベース(Sqlite)もまるごとファイルに含まれているので、ほんとサーバーにあげてすぐ使えます。サーバーのPHPの設定が変じゃないかぎり。
こんな感じにデータベースごとファイルにまとめられるのが軽量で使い勝手のいいSqliteの強みですね。

今回は今までよりちょっとだけ凝った作りになってますので、概要だけご紹介します。
主要なファイルは下記です。

【HTMLファイル】
index.html ・・・基本となるファイル。他のスクリプトを呼び出す。

【PHPファイル】
action.php ・・・コメントを送信されたときに実行されるファイル
read.php ・・・既にデータベースに登録されているコメントを表示するファイル

【Javascript】
jquery.js ・・・すばらしいライブラリ。無論私が作ったものではない。
jquery.easing.js ・・・いい感じにアニメーションさせるためのプラグイン。私が作ったものではない。
jquery.ajaxchat.js ・・・必要に応じてaction.phpとread.phpを呼び出すファイル。これでAjaxを実現してまする。

では具体的なスクリプトを。長くてやんなっちゃうかもしれませんが、一応ね。

<html> 
<head> 
<title>シンプルなAjaxチャット</title>
<link href="css/recet.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.ajaxchat.js"></script>
</head> 
<body> 
	<div> 
		<textarea name="message" id="message"></textarea> 
		<p name="button" id="button">送信</p> 
	</div> 
	<div id="results"></div> 
</body> 
</html> 
必要なファイルをhead内で読み込んでいます。bodyにはコメントデータを送信するフォーム、データを表示するスペースの3つだけがあります。

index.htmlから呼び出された「jquery.ajaxchat.js」が今回核となるファイルで、内容は下記のようになってます。
$(function(){
	
	//データ抽出用PHPの呼び出し
	$.post("./read.php", {default_val : 1}, function(data){
		if (data.length>0){ 
			$("#results").html(data); 
		} 
	})
	
	//コメント送信時のアクションを呼び出す
	$("#button").click(function(e){ 
		$("#results").prepend("<div class='loading'><img src='img/loading.gif'></div>");
		var t = setTimeout(ajax_send, 500);
	}); 
	
}); 

//コメント送信時のアクション
function ajax_send(){
	
	//送信されたデータを変数に格納
	var comment_val = $("#message").val();
	
	//データ投稿用PHPの呼び出し
	$.post("./action.php", {message : comment_val}, function(data){
		
		if (data.length > 0){ 
			$(".loading").remove();
			$("#results").prepend(data);
			$("#results div:first-child").animate({'opacity':'0'},		0); 
			$("#results div:first-child").animate({'opacity':'1'},		1000); 
		}
		else{
			$(".loading").remove();
		}
	}) 
} 
まず最初に既にデータベースに登録されているデータを表示するため、表示するPHPプログラム「read.php」にアクセスし、受け取ったデータを表示します。
次に、コメントのボタンがクリックされた時のアクションajax_send関数を呼び出しています。ajax_send関数で、実際にコメントデータをデータベースに登録してAjaxで表示するための「action.php」にアクセスし、受け取ったデータを表示します。

では次にread.php
<?php

mb_internal_encoding("UTF-8");

//DB接続
$dbname = "sql/bbs";
$conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ");

$comment = '';

//データの抽出
if($_POST['default_val'] == 1){
	
	$sql = "SELECT * FROM comment ORDER BY id DESC;";
	$res = sqlite_unbuffered_query($sql,$conn) or die ("データベースを接続できませんぜ");
	
	while ($row = sqlite_fetch_array($res, SQLITE_ASSOC)){
		$message .= "<div>" . nl2br(htmlentities($row["message"], ENT_QUOTES, "UTF-8")) . "</div>";
	}
}
else{
	$message = "Hey You! What are you doing?";
} 

//データを書き出し
echo $message;
?>
特に変わったことはしていないと思うので(たぶん、たぶんね!)、説明は省いちゃいます。

次にaction.phpです。
<?php

mb_internal_encoding("UTF-8");

//DB接続
$dbname = "sql/bbs";
$conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ");


//データの投稿
if(($_POST['message'] != "") and (!mb_ereg_match("^(\s| )+$", $_POST['message']))){
	
	//エスケープ
	$message = htmlentities($_POST['message'], ENT_QUOTES, "UTF-8");
	$message = sqlite_escape_string($message); 

	//データベースに追加
	$sql = "INSERT INTO comment (message) VALUES ('$message') ";
	$res = sqlite_unbuffered_query($sql,$conn) or die ('$error');

	$message = "<div>" . nl2br($message) . "</div>";
	echo $message;
}

?>
半角スペースだけ、および全角スペースだけの場合は送信できないように、正規表現(!mb_ereg_match(“^(\s| )+$”, $_POST[‘message’])の部分)で制御しました。

ぶっちゃけ正規表現をしっかり理解していないので、ここはどっかから拾ってきました。シェイシェイ!!


Twitterみたいにしっかりしたものを作りたいですけれども、それはまだ先のようですなぁ。。。そもそも、JQuery使わないと作れない時点でこまったちゃんですね。
どこかで時間を作って、通常のJavaScriptだけで作るバージョンを試してみようかと思います。

僕がまだピカピカの新卒だったころ、Gmailが誰でも使えるようになって(それまで確か招待制だった)使ってAjaxすげーってなって、なんか「Ajaxって新技術がすごい!」みたいな雰囲気になってましたが、今ではどこでも見かけるようになりましたね。
もっともっとがんばりまってちゃんとしたの作れるようになりまっしょい。目指せGmailとかGoogleスケジュール。

なお、このブログで公開してるプログラムなどに「ここ、おかしくない?」や、「ここはこうした方が効率いいのに知らないの?ププ・・・」などのアドバイスをいただけると非常にうれしいですので、ぜひぜひお気軽にドシドシ教えてください。

さぁ、ピルクルを飲んで寝ようっと。

【Javascript】メモ:イベントのバブリングってなに?

Ajaxを調べてて、なんじゃそりゃって思ったのでメモとして書いておきます。

JavascriptでAの要素の中にBがあるとして、この場合Aは親要素、Bは子要素という立ち位置になります。

ソースでいうとこんな感じ。

<div>
	<div></div>
</div>
この場合、親の要素にも子の要素にもonclickなどのイベントハンドラが設定されてると、子供をクリックしたときに親のイベントハンドラまで実行されてしまう、ということ。
これはCSSのposition:relativeなどで親と子が見た目的に重ならないようにしても同じです。

この現象をバブリングと言います。泡が下から上へプクプク上がっていくことからそう呼ばれてるそうです。

これを避けるにはeventオブジェクトのstopPropagation();を使います。まぁ今回はバブリングってなーに?ということのメモなので、そのあとのことはまた今度。
jqueryを使っている場合はこちらのサイトにいろいろ書いてあります。jQuery日本語リファレンス

【JavaScript】jQueryを使って画像を切り替えるシンプルなスクリプト

恋に焦がれて眠れないジョナサンは、どうか安らかに眠れるように女神さまに祈りました。

すると女神はこう言いました。

「そなたにオライリーのサイ本を与えよう。DOMの章にいくまでには安らかな眠りにつけるだろう。」

なんかjQueryを使いたくなったので、jQueryでランダムに表示される画像ギャラリー、の ようなもの を作ってみました。
ローディングのグルグル回る画像を使ってみたかったので、なんか始めて使ってうれしいです。

サンプルデモはこちらです。
ファイルのダウンロードはこちらから。

HTMLはこんな感じです。jQueryと今回作成したスクリプトを外部から読み込んでいます。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>

<body>

<p id="button">CLICK</p>
<div>
	<p id="gallery"><img src="img/default.gif" /></p>
</div>

</body>
</html>

次に今回作成したloading.jsのスクリプトです。

//画像の数
imgLength = 3;

//画像の拡張子
imgExtension = ".jpg";

//画像の保存ディレクトリ
imgDirectory = "img/";

//最初に表示する画像
randomInt = 1;

$(function(){

	$("#button").click(function() {
		$("#gallery").children("img").attr("src",function(){ return "img/loading.gif" })
		var waitng = setTimeout(loadImg, 1000);
	})

	function loadImg(){
		$("#gallery").children("img").css("opacity","0").attr("src",function(){ return imgDirectory + randomInt + imgExtension })
		.animate({'opacity':'1'},	600);

		if(randomInt < imgLength){
			randomInt = parseInt(randomInt) + 1;
		}
		else{
			randomInt = 1;
		}
	}
});

今回はグルグル回るローディン画像を表示したかったので、var waitng = setTimeout(loadImg, 1000);を追加して意図的に1秒間アニメーションを見せていますが、本番環境ではこちらをloadImg();に変えてください。

ちなみにグルグルローディングのアニメーションGIFはこちらから頂きました。Chimply generates your images

かなりいいグルグルがありますね!ページの下部では選んだ画像の速度や大きさなどをカスタマイズできます。

グルグルって見て魔方陣グルグルと勘違いしそうになった人は、お友達になれそうな気がします。

【JavaScript】画像をランダムで表示するスクリプト

さてさて、今回のスクリプトとはまったく関係ない話なのですが、私はJavaScript(Ajax)とPHPを使って、あるサービスを開発したいと考えています。

しかしそれを開発するためのJavascriptの技術と私の今のJavascriptのレベルが凄まじく離れており、今すぐに手をつけることはできません。
まずは基本をちゃんと抑え、それから一つずつステップアップしたいと思います。そのためには簡単なものから少しずつ作っていこう、と。

そんなわけで今回はjqueryなどを使わず、画像をランダムで切り返るスクリプトを作ってみました。なんだか初めて自分でJavascriptを書いた気がします。
やはりプログラムのレベルを上げるには、プログラミングすることですね。

まずはHTMLです

<head>
<script src="js/random.js" type="text/javascript"></script>
</head>
<body>
	<p><img src="" name="myImg"></p>
</body>


これだけ。

次に外部ファイルで読み込んだJavascriptです。

function randomImg(){

	//画像の数
	imgLength = 6;

	//画像の拡張子
	imgExtension = ".png";

	//画像の保存ディレクトリ
	imgDirectory = "img/";

	randomInt = Math.random() * imgLength;
	randomInt = Math.ceil(randomInt);
	imgDirectory + randomInt + imgExtension;
	test = document.myImg.src;

	document.myImg.src = imgDirectory + randomInt + imgExtension;
}

window.onload = randomImg;

これで、imgフォルダに1.png、2.pngといった画像を保存してください。
画像の数、拡張子、保存ディレクトリはスクリプトの「//」の注釈部分で変更できます。

完成のサンプルはこちらです。

また、完成サンプルをダウンロードするにはこちらです

どうもサイ本の難解さにハマってしまい、実際に手を動かさずに時間だけが過ぎてしまった感があるので、これからはちゃんとたくさん作って、たまにドキュメントを見直してみようと思います。

【JavaScript】項目の内容をチェックしエラーを自動表示するフォーム

前回の記事で紹介した選択した項目をアニメーション等で目立たせるフォームに、エラーチェックを追加したものを紹介します。

こちらがエラーチェックの機能を追加したフォームです。

PHPでこういったエラーを吐き出すのはCMSや動画投稿サイトを作ったときからやっていたのですが、やはりフォームなどでは項目に何かを書いた時点でエラーチェックをして表示してくれる方が、一度送信してから一括でエラーが表示されるよりもずっと使いやすいですね!

今回作ったもののエラーチェックは、上から「英語以外が入力されていたらエラー」、「メールアドレスっぽくなかったらエラー」、「URLっぽくなかったらエラー」、「何も入力されていなかったらエラー」です。ガーっと作ったのであんまり厳重ではありません。

今回のスクリプトをZipファイルでダウンロードするにはこちらからどうぞ。

自由に使用、改修して頂いて結構ですので、ご自由にお使いください。