連載:Ajaxで作るインタラクティブWebアプリケーション (3)

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


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


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

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

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

・ファイル一覧

 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での通信ではかなり有用である。

 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オブジェクト>







古くて新しいAjaxの真実を見極める
「Webインターフェイスの新しい手法」「画期的なWebアプリケーションの仕組み」であるとして開発者たちの人気を集めるAjaxとは何なのか、その真実を見極めてみよう
最終更新 2005/8/2


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間