【WEB Flex】JSONを使ったWEB API の使い方


ブラウザでダウンロード
以下は、実際に 占いWEB API が動作する swf を作成して
IFRAME で埋め込んでいます。最初に日付を選択してから「読み込み」ボタンを押すと、
その日の占いを全ての星座について表示します。

実際の ブログパーツとする為にはもっといろいろデザインやに使い勝手を設計する必要
がありますが、「機能」としては十分なサンプルになっているはずです。

※ WEB API 使用条件としてのリンクを2つ実装しています

JSON
JSON はフォーマットでは無く、JavaScript の文法で書かれるデータ構造を
そのままデータ交換に使っているだけだと思います。

XML のようなドキュメント性は無く、オブジェクトとプロパティと配列の集合体
と考えたほうが納得しやすいと思いますが、JavaScript でマジにプログラミング
をした人でなければ、実感はしずらいと思います。

Flex で JSON を使用するには、as3corelib が必要ですが、
PHP でdecode できるので、PHP 側で XML に再構築すれば特に使う必要はありません。

しかし、BSD ライセンスだし、面倒がらずに普通に使ってしまってもいいと思います。
JPG や PNG の処理は元々ここにあったもの( 今でもあるはず ) を
 Flex の Framework に移行したみたいですし、adobe のアーティクルでも
きちんと紹介していますし。( ちょっと古いですけど )

↑のアーティクルでは、特に特別な事は書かれていません。
こちらのサンプル見るだけで十分だとは思いますが、PHP での使い方
を知る簡潔なサンプルがあるので、少し目を通しても損は無いです
注意するのは、自分のドメイン以外からデータを取得するには、PHP の力を借りて
サーバに取得させて、それを経由して自ドメインの PHP を呼び出す必要があります。

WEB API を使うのですから、必然的にそうなります。

もし、WEB API 側に crossdomain.xml を自由に置けるのならば、
その限りでは無いと思いますが、普通ムリなはずですので、PHP のほうが話は早いです。
jugemkey.php
<?
header( "Content-Type: text/html; Charset=utf-8" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );

print file_get_contents($_GET['url']);
?>


Flex のコード
コードの中で一番重要なのは、Script.as の

var dataTarget:Array = fortune.horoscope[dtTarget.text];

です。

ActionScript の言語仕様と JavaScript の言語仕様の根本は同じなので、
オブジェクトのプロパティの記述方法を知っておれば理解しやすいのですが、
慣れていなければ、何故こうなるのかが解らないと思います。

本来これは、fortune.horoscope.日付文字列 なのですが、同じ
意味になってかつ、文字列を使用して「連想配列」のような使い方が可能なのです。

と、簡単に理解してしまいましょう。
( 本当は、prototype や ビルドオプションによる違いのようなものもありますが )
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="control.*"
	layout="absolute"
>

<mx:Script>
<![CDATA[

[Bindable]
public var dateSelected:String;
public var fmt:DateFormatter = new DateFormatter();

// *********************************************************
// アプリケーションの初期化
// *********************************************************
public function initData():void {

	firebug("処理開始");

	fmt.formatString = "YYYY/MM/DD";
	var logdt:String = fmt.format( new Date );

	// いかなるドメインからも OK
	Security.allowDomain("*");
}

]]>
</mx:Script>

<!-- *************************************************** -->
<!-- 外部ソース -->
<!-- *************************************************** -->
<mx:Style source="extern/Style.css" />
<mx:Script source="extern/Script.as" />

<!-- *************************************************** -->
<!-- HTTP 通信用 -->
<!-- *************************************************** -->
<mx:HTTPService
	id="srv"
	showBusyCursor="true"
	result="resultHandler(event)"
	fault="faultHandler(event)"
/>

<mx:LinkButton
	x="30"
	y="120"
	label="powerd by JugemKey"
	color="#FFFFFF"
	click="OpenUrl('http://jugemkey.jp/api/waf/api_free.php');"
/>
<mx:LinkButton
	x="30"
	y="150"
	label="【PR】原宿占い館 塔里木"
	color="#FFFFFF"
	click="OpenUrl('http://www.tarim.co.jp/');"
/>


<!-- *************************************************** -->
<!-- 入力フォーム -->
<!-- *************************************************** -->
<mx:Form x="10" y="10" width="470" height="480">
	<mx:FormHeading height="40" label="JSON(占いデータ)処理"/>

	<mx:FormItem
		label=""
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<mx:HBox>
			<mx:Button
				id="btn"
				label="読み込み"
				click="sendData()"
				styleName="sendButton"
			/>
			<mx:Label
				id="dtTarget"
				text="{dateSelected}"
				width="120"
			/>
			<mx:DateChooser
				id="dateChooser"
				yearNavigationEnabled="true"
				change="dateSelected=fmt.format((DateChooser(event.target).selectedDate))"
				headerStyleName="headerColor"
			/>
		</mx:HBox>
	</mx:FormItem>

	<mx:FormItem
		labelStyleName="labelAlign"
		paddingBottom="30"
	>
		<mx:DataGrid width="400" height="150" id="JugemKey"
			headerStyleName="headerColor"
			horizontalScrollPolicy="on"
		>
			<mx:columns>
				<mx:DataGridColumn
					headerText="星座"
					dataField="sign"
					width="50"
				/>
				<mx:DataGridColumn
					headerText="占いの内容"
					dataField="content"
					wordWrap="true"
					width="230"
				/>

				<mx:DataGridColumn
					headerText="ラッキーカラー"
					dataField="color"
				/>

			</mx:columns>
		</mx:DataGrid>
	</mx:FormItem>

</mx:Form>

</mx:Application>
Script.as
import mx.controls.*;
import mx.events.*; 
import mx.rpc.events.*;
import mx.formatters.*;
import flash.external.*;
import flash.events.*; 
import mx.collections.ArrayCollection;
import com.adobe.serialization.json.JSON;

include "Parts.as"

// *****************************************************
// HTTPServiceを使用してHTTPリクエスト(GET)を行う
// *****************************************************
private function sendData():void {
	// ● リクエストするURLをセット
	// ★ http:// で記述すると、ベースが ローカルでも動作します

	if ( dtTarget.text != "" ) {
		srv.url = "jugemkey.php";
		srv.request.url = 
			"http://api.jugemkey.jp/api/horoscope/free/" +
			dtTarget.text;
	
		// レスポンス結果のデータフォーマット
		srv.resultFormat = "text";
		srv.method = "GET";
		srv.send();
	}
	else {
		Alert.show("日付を選択して下さい");
	}

}


// *****************************************************
// HTTPServiceが成功
// *****************************************************
private function resultHandler(e:ResultEvent):void {

	var rawData:String = String(e.result);

	var fortune:Object = JSON.decode(rawData);

	var dataTarget:Array = fortune.horoscope[dtTarget.text];
	var dataTargetCollection:ArrayCollection = new ArrayCollection(dataTarget);
	JugemKey.dataProvider = dataTargetCollection;

}

// *****************************************************
// HTTPServiceでエラーが発生した
// *****************************************************
private function faultHandler(e:FaultEvent):void {

	Alert.show(e.fault.message);

}