連番画像をブラウザで再生する

PHP jQuery

前回の記事で作ったSoftimageから書き出した透過PNGをブラウザで確認できるようにしたいと思います。
確認といっても、画像をズラーっと並べるよりも、動画のように再生出来た方が良いだろうということで、そちらに挑戦してみます。

前回記事

連番画像を再生するということでパッと思いつくのが

だったんですが、SoftimageからGIFアニメーションを生成できないし、フリーソフトとかを使って作れたとしても色数の制限であまり見た目も良くないということで却下。
動画は何かしらで出来るかもしれないけど画像を別々に観ることが出来なくなるし、透過処理も出来ないのでこれもナシ。
結局行きついた答えはPHP&jQueryでした。
PHPは「サーバーサイドスクリプト言語」、jQuery(ジェイクエリー)は、「現在人気のあるJavaScriptライブラリの1つ」ですね。
お恥ずかしいことに自分はjQueryの存在を最近知りました。
PHP、javascriptは専用の書籍やサイトが沢山あるのは知ってたんですが、最近本屋に行くとjQuery専用書籍がかなり出ていてビックリしました…。
大したことができない自分でも使って便利さを実感。こりゃもう手放せないって状態です！
話がそれました…。
今回作った実際に動作するサンプルが以下になります。

使用している画像はhttp://www16.tok2.com/home/guttari8/からお借りしました。感謝！
今回の連番画像を再生するにはどうするかと言うことですが、ざっくり説明すると

jQuery(javascript)を使って一定時間間隔で画像の表示を変更する
　　↓　　↓　　↓　　↓
しかし、クライアント側のスクリプトであるjavascriptからはどのような連番素材があるか分からない
　　↓　　↓　　↓　　↓
そこでPHPを使って連番素材のリストを作成しjavasecriptに伝達

というカラクリです。
今回参考にさせてもらったのは以下のサイトです。

参考ページと今回自分がやろうとしていることで違う点は、「切り替える画像の枚数、名前が不確定」「フェードインはいらない」ですね。
その辺りを考慮すると以下のようなソースになりました。
（単純にするためにサンプルよりもシンプルな内容にしています。）

<!--
################################################################
######################### HTML #################################
################################################################
-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP & jQuery 連番画像再生テスト</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
	<td bgcolor=#ffffff id="gallery"><img src="img/1.jpeg">透過</td>
</body>
</html>

<!--
################################################################
#####################   javascript  ############################
################################################################
-->
<script type="text/javascript">
	//画像を切り替える速さ
	imgChangeSpeed = 50;

	//画像配列
	imgArray_png = new Array();//PNG

	<?php
		//PHPでディレクトリ内を検索、javascriptの配列としてデータを受け渡す
		$dir = "img/FumeFx_image_sq005/";//画像が置いてあるフォルダ
		$file_list = get_filename_arr($dir, "/\.png$/");//拡張子がpngのものだけ
		foreach( $file_list as $value ){
		  echo "imgArray_png.push(\"" . $dir  . $value . "\");\r\n";//javascirptの構文を出力
		}
	?>

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

	$(function(){
	    //一定時間毎にスクリプトを呼び出す
	    var t = setInterval(loadImg, imgChangeSpeed);
	    //呼び出されるスクリプト
	    function loadImg(){
			
			//画像を切り替える処理
	        $("#gallery").children("img").animate({'opacity':'0'},  0)
	        $("#gallery").children("img").attr("src",function(){ return imgArray_png[randomInt] }).animate({'opacity':'1'}, 0);
	        
	        if(randomInt < imgArray_png.length){
	            randomInt = parseInt(randomInt) + 1;
	        }else{
	            randomInt = 0;//配列の先頭に戻る
	        }
	    }
	});
</script>


<!--
###############################################################
#####################      PHP     ############################
###############################################################
-->
<?php
//第1引数 : 対象ディレクトリのパス
//第2引数 : ファイル名の正規表現(マッチしたファイル名を取得)
function get_filename_arr($dir, $match) {
    $filename_arr = array();
    $dh = opendir($dir);
    while(($filename = readdir($dh)) !== false) {
        if(preg_match($match, $filename)) {
            $filename_arr[] = $filename;
        }
    }
    asort($filename_arr);//昇順ソート
    return $filename_arr;
}
?>

ポイントとなるのはjavascript内にあるPHPの構文です。

	//PHPでディレクトリ内を検索、javascriptの配列としてデータを受け渡す
	$dir = "img/FumeFx_image_sq005/";//画像が置いてあるフォルダ
	$file_list = get_filename_arr($dir, "/\.png$/");//拡張子がpngのものだけ
	foreach( $file_list as $value ){
	  echo "imgArray_png.push(\"" . $dir  . $value . "\");\r\n";//javascirptの構文を出力
	}

PHPでフォルダ内の連番ファイルの一覧を取得して、javascriptの構文を出力しています。
こうすることで、ブラウザが表示された際にjavascriptの構文が生成され、画像の切り替えが行えるわけですね。
実際にブラウザがページを表示された時には上記の構文が以下のように変わります。

	imgArray_png.push("img/FumeFx_image_sq005/0000000.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000001.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000002.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000003.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000004.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000005.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000006.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000007.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000008.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000009.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000010.png");
	imgArray_png.push("img/FumeFx_image_sq005/0000011.png");
				・
				・
				・

今回は配列のpushを使ってますが、javascriptに情報が伝達できればどのような手法でも多分良いと思います。
フェードインが入らないという部分ですが

$("#gallery").children("img").attr("src",function(){ return imgArray_png[randomInt] }).animate({'opacity':'1'}, 0);

の最期の0の数字を変更しました。これであたかも画像がアニメーションしているように再生してくれるようになりました。
背景の色や画像を変更すれば、どのように透過されているかも確認することが出来ます。
javascriptで背景を変更するのは良く行われていますから、それと組み合わせると良いかもしれません。
PHPの部分も読み込む対象のフォルダを変更すれば、様々なケースに対応できます。
ただ、今回インターネット上にサンプルを上げた際に、当初上手く画像が表示されませんでした。
iPhoneだと大丈夫だったのでデスクトップPCがへっぽこなのかもしれませんが…。
どうやら画像切り替えの間隔が短すぎて、画像を読み込み切れていないのが原因だったようです。
なので、アニメーションさせている下側に元画像の一覧を表示することで、安定した動作をさせるように工夫してみました。
まだ気づいてないだけで、いろいろ課題はありそうな予感です…。