ActionScriptでJSONを扱う方法

先日、昔の後輩からJSON(ジェイソン)について教えて欲しいとリクエストをもらったので、JSON のメリットと使い方(AS3)をまとめてみます。

JSONとは何か？

XMLのようにデータを文字列で格納するファイル形式。Flashの外部データには一般的にはXMLが使用されることが多いですが、JSONはECMA標準のObject/Array形式で保存するため、解析の手間が少なく扱いやすいという利点があります。

JSONのメリット

• EMCA標準のObject/Array形式で保存するため、解析後のデータが扱いやすい
• ファイル容量が少なくてすむ

JSONのデメリット

• 人が読んで分かりにくい(手更新するならXMLのほうがいいかも)
• 書式が正しいかのチェックが面倒(XMLならブラウザに放り込めば、バリッドかどうか簡単にチェックできます)

ActionScriptでの使い方

ライブラリ「as3corelib」にJSON形式へのデコーダー/エンコーダーが搭載されているので、それを利用します。

• as3corelib – Project Hosting on Google Code

ライブラリ(「as3corelib-.92.1.zip」ファイル)をダウンロードし、flaファイルのライブラリパスが通る箇所にファイルを設置します。

サンプルとして予め次の内容を書き込んだJSONデータを、「sample.json」というファイル名で用意しておきます。

[
    {"name":"赤羽 一郎", "age":30},
    {"name":"東銀座 二郎", "age":24},
    {"name":"秋葉原 三郎", "age":41},
    {"name":"船橋 四郎", "age":25}
]

flaには、フレームアクションに次のように記述します。

import com.adobe.serialization.json.*;

var l:URLLoader = new URLLoader();
l.addEventListener(Event.COMPLETE, handler);
l.load(new URLRequest("sample.json"));

function handler(e:Event):void{
 // 読み込んだデータを取得
 var str:String = l.data;

 // JSONエンコーダーを利用してObject型に変換
 var obj:Object = JSON.decode(str);

 // トレースする
 trace(obj);
}

上記でのスクリプトで、objインスタンスの中に外部から読み込まれたJSONデータが格納されています。objにはObject/Arrayの形式で格納されてますので、出力結果は次の通りとなります。

[object Object],[object Object],[object Object],[object Object]

以上で読み込み完了です。

ついでに私が普段利用している便利TIPSを紹介します。上記のままでは確認しづらいので、Progressionを利用してトレースしやすい形にしてみます。Progressionの中にあるObjectUtilクラスを利用すると、Object形式の中身を走査して文字列として表示することができます。

※Progressionは公式サイトからダウンロードのうえ、ライブラリパスを通しておきます。

// トレースする (ProgressionのObjectUtilを使うとトレースが便利)
import jp.nium.utils.*;
trace(ObjectUtil.toString(obj));

すると出力結果は、以下の通りとなり中身が確認しやすくなりました。

[{name:"赤羽 一郎", age:30}, {name:"東銀座 二郎", age:24}, {name:"秋葉原 三郎", age:41}, {name:"船橋 四郎", age:25}]

なお、今回の解説サンプルはこちらにアップしていますので、参考にしたい方はダウンロードください。

• サンプルデータ(CS3/CS4形式)

JSONデータを作るには

katamariさんが提供されているJSON用のエディターが便利ですので、これを利用して作ると良いでしょう。

• JSON Editor by katamari

Adobe AIRアプリ版もありますので、インストールして利用すると便利だと思います。

確認用のための環境

ブラウザでjson形式にアクセスするとダウンロードファイルとしてダウンロードされてしまいます。このままだと確認するのが面倒なので、Firefoxに次のアドオンを入れておくと便利です。Firefoxのブラウザ上でJSONファイルを表示できるようになります。

• JSONView :: Add-ons for Firefox

最後に

ご不明な点がありまいたら気軽にコメント欄にご投稿くださいませ！