連載：Ajaxで作るインタラクティブWebアプリケーション （3）

JSONによるデータ通信でAjaxアルバムを完成させる

田中 孝太郎
dotimpac.to
2006/3/17

通信機能を搭載したPhtoAlbumサンプル

　それではPhtoAlbumの解説に入っていこう。今回のサンプルのファイル構成は次のようになる。

　 今回のサンプルのような、JavaScript側でほとんどの画面処理を行うWebアプリケーションでは、サーバ側でのデータ処理やHTML生成などのルーチンが通常に比べてかなり少なくなる。今回はサーバ側にRubyによるCGIを用意するが、同様の機能はPerlやPHPなどでも簡単に実現できるだろう。自分の得意な言語で試してみてほしい。

・ファイル一覧

index.cgi　アルバムページの表示、非同期通信の応答を行うcgiスクリプト imagesize.rb　JPEG画像のサイズを取得するためのライブラリ 　　　　　　　（水谷敏行氏開発のものを使用させていただいた） header.txt　前回までのphotoalbum.htmlの前半部分 footer.txt　前回までのphotoalbum.htmlの後半部分 photoalbum.css　スタイルシート jsディレクトリ 　　　prototype.js 　　　scriptaculous.js 　　　photoalbum.js　PhtoAlbumクラスのスクリプト　（前回から修正） 　　　photoframe.js　PhotoFrameのサンプルスクリプト　（前回と同じ） imagesディレクトリ 　　　spinner.gif　処理中状態を示すスピナー albumsディレクトリ　 　　　アルバム画像ファイルを収めたディレクトリが入っている

　index.cgiでは、

PhtoAlbumページのhtml表示 アルバム名を指定されたら、そのディレクトリの画像ファイルの情報一覧を返す

という2つの処理を行っている。html表示は基本的に前回までのサンプルのhtmlページを出力するのみなので、解説は省略させていただく。PhtoAlbumデータの出力については、Ajaxでのデータ通信形式も含め解説していこう。

JSONによるデータ通信

　通常のWebアプリケーションの場合、リクエストされると必ず次の画面を表示する必要があるため、常に完結したHTMLを返すことになるが、Ajaxアプリケーションでは通信内容が画面にそのまま表示されるとは限らないので、場合に応じたデータ形式で応答することができる。Ajaxの「X」はXMLであるといわれているが、実際にはXMLで通信しなければならないわけではない。画面の表示内容を差し替えるような場合には、部分的なhtmlを返信し、そのまま変更要素のinnerHTMLを書き換える方が簡単なため、実はかなり多用されている。

　このサンプルでは「JSON」と呼ばれる形式でファイル名などのPhtoAlbumデータを返信するようにしている。JSON（JavaScript Object Notation）とは、JavaScriptのオブジェクト定義リテラルを、汎用のデータ記述形式として一般化したフォーマットである。非常にシンプルな形式で読み書きしやすく、またJavaScript側で使用する際はリテラルとしてそのまま変数に収めればオブジェクトとして使用できるため、Ajaxでの通信ではかなり有用である。

• Introducing JSON（brazil氏による翻訳）

　cgiのJSON出力処理と、実際に出力されるJSONを見ておこう。実際にはRubyほか各言語にJSONライブラリが提供されており、それを用いて配列やオブジェクトを直接JSONテキストに変換することができるが、今回のサンプルではなるべく単体で動作するように、直接出力している。本来はライブラリを使うことが望ましいだろう。

if Cgi.params['dir'][0] 　# PhtoAlbumのJSONを出力 　dname = Cgi.params['dir'][0] 　 　if File.exist?(ALBUM_DIR+dname) 　　# アルバムディレクトリのJPEGファイルを取得 　　files = Dir["#{ALBUM_DIR+dname}/*"].delete_if{|f| f !~ /.*\.jpg$/i} 　　 　　images = [] 　　files.each do |fname| 　　　# 画像ファイルのサイズを取得 　　　jpegsizefactory = ImageSize.factory('image/jpeg') 　　　sz = jpegsizefactory.readsize(fname) 　　　 　　 # 画像ファイルの情報を配列に格納 　　images << "{title:'#{File.basename(fname)}', fname:'#{fname}', width:#{sz.width}, 　　height:#{sz.height} }" 　end

　 出力されるJSONは、次のようになる。

{title:'album1', 　images:[ 　　　　{title:'photo1.jpg', fname:'albums/album1/photo1.jpg', width:640, height:416 }, 　　　　{title:'photo2.jpg', fname:'albums/album1/photo2.jpg', width:640, height:475 }, 　　　　{title:'photo3.jpg', fname:'albums/album1/photo3.jpg', width:640, height:319 }, 　　　　{title:'photo4.jpg', fname:'albums/album1/photo4.jpg', width:640, height:496 } 　] 　}

　今回のサンプルではテキストが含まれないためあまり関係ないが、XMLHTTPの通信を使用する場合、日本語文字コードに注意する必要がある。文字コードとブラウザの組み合わせによっては、文字化けが発生することがあるからだ。現状では、UTF-8に統一しておくのがトラブルが少ないため、サンプルでもUTF-8で出力している。

前のページへ

2/3

INDEX
Ajaxフォトアルバムのフェードイン画像フレームを作ろう
	Page1＜PhtoAlbumを完成させよう＞ Ajaxの「非同期」とは非同期通信ではない／JavaScriptライブラリの最新状況
	Page2＜通信機能を搭載したPhtoAlbumサンプル＞ JSONによるデータ通信／指定要素の位置まで画面をスクロールするエフェクト
	Page3＜PrototypeのAjaxオブジェクト＞

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）