as3corelibを用いてFlex (Flash Action Script 3)でJSON形式のデータを扱うコードを紹介します。

Flexモバイルアプリケーションを作成します。

as3corelibのリンク

はじめに、as3corelibのリンク設定をします。左側のパッケージエクスプローラからプロジェクトを選択し、右クリックしポップアップメニューを表示します。ポップアップメニューの[プロパティ]メニューを選択します。


プロパティダイアログが表示されます。左側のメニューから[Flex ビルドパス]を選択します。右側に[Flex ビルドパス]の画面が表示されます。上部の[ライブラリパス]タブを選択します。下図の画面が表示されますので、右側の[swcの追加]ボタンをクリックします。


[swcの追加]ダイアログが開きます。[参照]ボタンを押します。


ファイル選択ダイアログが開きますので、as3corelib.swcファイルを選択します。as3corelib.swcはas3corelibをダウンロードして展開したフォルダの"as3corelib-.93\lib"フォルダにあります。


[swcの追加]ダイアログにパスが入力されます。[OK]ボタンを押して設定を確定します。


[ビルドパスライブラリ]に"as3corelib.swc"が追加されました。


プロパティダイアログの[OK]ボタンを押します。下図のダイアログが表示され、コンパイラーの設定などが始まります。

アプリケーションの作成

新規作成したFlexモバイルアプリケーションのmxmlファイルを開きます。コード表示エリアの上部のツールバーの[デザイン]ボタンを押します。下図のデザイン画面が表示されます。


[デバイス]欄のコンボボックスを開きます。一覧から"Google Nexus One"を選択します。


[デバイス]欄のコンボボックスを"Google Nexus One"に設定するとデザイン画面のサイズが小さくなります(下図参照)。デザイン画面にボタンとラベルを一つ追加します。


ボタンをクリックして選択し、右側のプロパティウィンドウの[カテゴリビュー]ボタンを押します。イベントの一覧から[click]を選択し[(稲妻アイコン)+]ボタンを押します。


mxmlのコード画面に切り替わり、コードが生成されます。


パッケージエクスプローラからプロジェクトノード内の[src]ノードの[(default package)]を選択します。選択後右クリックしポップアップメニューを表示し、[新規]メニューの[ActionScript ファイル]を選択します。


[新規 ActionScriptファイル]ダイアログが表示されます。パッケージの欄はデフォルトのままとし、[ファイル名]テキストボックスにファイル名を入力します。今回は"SimpleJsonParseProc"としました。入力ができたら[終了]ボタンを押します。


ファイルが作成されました。[(default package)]ノードの下にファイルが作成されていることを確認します。[(default package)]ノードの下に作成されていない場合は[SimpleJsonParseProc.as]ファイルを[(default package)]ノードにドラッグ＆ドロップして属するパッケージを変更します。

UIの作成

以下のUIを作成します。labelを1つ、Buttonを1つ配置します。

コードの記述

以下のコードを記述します。

SimpleJsonParse.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">

	<fx:Script source="SimpleJsonParseProc.as"/>

	<fx:Script>
		<![CDATA[
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<s:Button x="10" y="10" width="90" height="29" label="ボタン" click="button1_Click(event)"/>
	<s:Label id="label1" x="10" y="46" width="300" height="131" text="ラベル"/>
</s:Application>

mxmlファイルは生成されたコードのButtonのclickイベント部分をASファイルの関数を呼び出すコードに変更します。

SimpleJsonParseProc.as

// ActionScript file
import com.adobe.serialization.json.JSON;
import flash.events.*;
import flash.net.*;
import mx.collections.*;
import mx.states.AddItems;

var myLoader:URLLoader;

private function button1_Click(event:MouseEvent):void
{
	var myRequest:URLRequest = new URLRequest("http://www.ipentec.com/info/test.json");

	myLoader = new URLLoader();
	myLoader.addEventListener(Event.COMPLETE, onload);
	myLoader.load(myRequest);
}

function onload(evt:Event):void
{
	label1.text="";
	var myData:Object = com.adobe.serialization.json.JSON.decode(myLoader.data);
	for (var i=0; i<myData.length; i++){
		label1.text += myData[i].name +"は"+myData[i].price+"円です。\n";
	}
}

解説

button1_Click イベント

var myRequest:URLRequest = new URLRequest("http://www.ipentec.com/info/test.json");
myLoader = new URLLoader();

にて、WebからJSONファイルを取得するためのURLRequestのインスタンスとURLLoaderを作成します。

myLoader.addEventListener(Event.COMPLETE, onload);

URL読み込み完了時のイベントリスナーを登録します。Event.COMPLETEでURLLoaderの読み込み完了時のリスナーの登録ができます。

myLoader.load(myRequest);

URLLoaderのloadメソッドを呼び出し、URLからJSONファイルの取得を開始します。

onload イベント

onload関数はURLLoaderのload完了時に呼び出されます。

label1.text="";

にて、画面のラベルの文字を空文字で空にします。

var myData:Object = com.adobe.serialization.json.JSON.decode(myLoader.data);

JSONファイルをデコードします。デコード結果はObjectに代入されます。

for (var i=0; i<myData.length; i++){
	label1.text += myData[i].name +"は"+myData[i].price+"円です。\n";
}

forループでデータの個数分だけ繰り返しを実行し、画面にデータの内容を表示します。

データの配置

http://www.ipentec.com/info/test.json に以下のJSONファイルを設置します。

[
  {"name":"apple","price":150},
  {"name":"banana","price":80},
  {"name":"orange","price":52}
]

アプリケーションの実行

アプリケーションを実行します。初回の実行時には下図の[実行構成]ダイアログが表示されます。今回は[起動方法]を[デスクトップ上]ラジオボタンにチェックをし、デバイスを"Google Nexus One"に設定しました。


実行すると、下図の画面が表示されます。[ボタン]をクリックします。


下図の結果が表示されます。JSONファイルをパースして値を取り出せています。


以上でシンプルなJSONファイルのパージングができました。