Platform: All
Version: Flash MX Professional 2004

1. 米国の天気情報をXMLデータで受取る
Flash MX Professional 2004のXMLConnectorコンポーネントとデータバインディングの機能を使えば、XMLファイルで提供されたデータを取得し、必要な情報を取出して画面に表示することが簡単にできます。ここでは、一般に公開されている天気情報のXMLデータを使用することにしましょう。

注記: サーバー上では、原則として別ドメインからデータを取得することはできません(Macromedia TechNote「External data not accessible outside a Macromedia Flash movie's domain」参照。日本語版の少し古いTechNoteには、「別のドメイン上にあるデータソースからのLoad Variablesが動作しない 」があります。また、Flash Player 7の新しいセキュリティへの対応については、「Macromedia Flash Player 7におけるセキュリティの変更について」が詳しいです)。本稿でご紹介するテクニックを実際にサーバー上で使う場合には、XMLデータは同一ドメインから取得する必要があります。

●サンプル: Databinding.fla(Zip圧縮/約152KB)

EJSEは、weather xml web servicesという米国の天気情報をXMLデータで提供するサービスを行っています。その中のzipcodeから天気情報を返すGetWeatherInfoというサービスを利用します。

図001■EJSEのGetWeatherInfoサービス画面

米国のzipCodeを渡すと天気情報がXMLデータで返される(94103はサンフランシスコ)

まず、XMLデータ構造を確認するサンプルとして、1件のXMLデータをローカルに保存します。たとえば、サンフランシスコ(zipCodeは94103)の直近の天気情報を取得するには、ブラウザのアドレスに以下のURLを入力します。

http://www.ejse.com/WeatherService/Service.asmx/GetWeatherInfo?zipCode=94103

データが表示されたら、そのソースをXMLファイルとして保存します[*1](データの取得に失敗することもありますので、そのときは少し時間を空けて再度お試しください)。

2 コンポーネントインスタンスの配置
XMLデータを読込むXMLConnectorコンポーネントのインスタンスと、その値を取出して表示するためのインスタンスを、ステージに配置します。値の表示には、Labelコンポーネントを使ってみましょう。

Labelコンポーネントのインスタンスをステージに3つ配置し、[プロパティインスペクタ]でそれぞれにresults1〜results3までのインスタンス名を設定します(図002)。

図002■ステージに配置されたLabelコンポーネント

3つのLabelインスタンスに、results1〜results3までのインスタンス名を設定する[*2]

つぎに、XMLConnectorコンポーネントのインスタンスを、ひとつステージに配置します。インスタンス名は、docとしました。XMLConnectorインスタンスは、XMLデータの読込みという目に見えない処理を行うためのものです。実際、SWFムービーにインスタンスは表示されません。サンプルでは見やすさを考えてステージ上に配置していますが、ステージ外に置いても構いません。

図003■XMLConnectorコンポーネントをステージに配置

インスタンス名はdoc。表示はされないので、どこに置いても構わない

3 XMLConnectorの設定とサンプルXMLの読込み
XMLConnectorコンポーネントは、XMLデータをHTTPのGETまたはPOSTメソッドで読込み/書出しするために用いられます。XMLConnectorインスタンスには、まずXMLデータを取得するためのURLを設定します。[プロパティインスペクタ]か[コンポーネントインスペクタ]の[パラメータ]タブで、パラメータURLにHTTPで処理するURLを入力します(図004)。ここでは、1でXMLデータの取得先URLを使用します。

図004■[コンポーネントインスペクタ]と[プロパティインスペクタ]の[パラメータ]タブ

パラメータURLに、XMLデータの取得先URLを入力する

これによりムービーは、サンフランシスコの最新の天気情報を得ることができます。

つぎに、読込んだXMLデータの必要項目をLabelインスタンスにデータバインディングする作業に移ります。しかし、その前に取得するXMLデータの構造を把握する必要があります。そのため、1で保存しておいたXMLファイルを、その解析のためのサンプルとして読込みます。

XMLConnectorインスタンスが選択された状態で、[コンポーネントインスペクタ]の[スキーマ]タブでプロパティresultsを選択したら、右上にある[サンプルXMLファイルからスキーマの読み込み]を行う下向き矢印[↓]のボタンをクリックします。

図005■[コンポーネントインスペクタ]の[スキーマ]タブでサンプルXMLを読込む

[スキーマ]タブでパラメータresultsを選択して、下向き矢印[↓]ボタンをクリック

[開く]ダイアログボックスで、予め保存しておいたXMLファイルを開きます。すると、読込んだXMLのデータ構造が、[スキーマ]タブに表示されます。

図006■[スキーマ]タブに読込まれたXMLデータ構造

LocationやTempratureなど、値を取得する予定のエレメントが表示されている[*3]

4 データバインディング
[スキーマ]タブに読込まれたXMLから必要なエレメントを指定して、その値をLabelインスタンスにバインドしてみましょう。[コンポーネントインスペクタ]のタブを[バインディング]に切換えて、パネル左上にある[+]の[バインディングの追加]ボタンをクリックします。[バインディングの追加]ダイアログボックスが開きますので、追加したいエレメントの名前Locationを選択して、[OK]ボタンをクリックします。

図007■[バインディング]タブから[バインディングの追加]のダイアログを開く

[バインディングの追加]ダイアログには、[スキーマ]と同様のデータ構造が表示される。

[バインディング]タブには、選択したエレメントが追加されます。パネル下側のバインディング属性ペインで、[direction]をoutに設定します。つぎに、[bound to]をクリックすると、値の欄に虫眼鏡アイコンが表示されるので、そのボタンをクリックします。

図008■[バインディング]タブでバインディング属性の設定

[direction]をoutに設定、[bound to]で虫眼鏡ボタンをクリック

[バインド]ダイアログボックスの左側にコンポーネントインスタンスが表示されるので、値を表示したいLabelインスタンス名result1を選択します。ダイアログ右側の[スキーマの場所]に、textと表示されたら、[OK]ボタンをクリックします。

図009■[バインド]ダイアログボックスでコンポーネントインスタンスを選択

Labelインスタンスのresult1を選択すると、ダイアログの右側にtextと表示される

同様の手順でバインディングを追加し、XMLエレメントのTempratureをLabelインスタンスresult2にバインドします。

Labelインスタンスresult3には、XMLエレメントのWeatherInfoをバインドします。WeatherInfoはObjectエレメントです(図010)。その中に複数のエレメントをもっているため、このままではノードの内容がそっくりそのまま表示されてしまいます。そこで、エレメントをいくつか取出して、ひとつのテキストにまとめてみましょう。

図010■[バインディングの追加]でObectエレメントのWeatherInfoを選択

ObjectエレメントWeatherInfoには、複数のエレメントが含まれる

[バインディング]パネル下側のバインディング属性ペインで、[formatter]を[Compose String]に変更します。その下の[formatter options]をクリックしたら、値の右側に表示される虫眼鏡ボタンを押します。[ストリングの構成]ダイアログボックスが表示されますので、[ストリングテンプレート]のボックスに以下のように入力します(図011)。

Visibility is <Visibility>, UV Index is <UVIndex>.

図011■[ストリングの構成]にストリングテンプレートを入力

エレメントの名前をタグ<>で囲って、テキストを入力する

タグ<>の中には、WeatherInfoエレメントに含まれるエレメントの名前を記述します。タグは、XMLデータの中の該当するエレメントの値に置換えられます。それ以外の部分は、そのままテキストとして出力されます。つまり、Labelインスタンスのresult3には、この指定したかたちでテキストが表示されるのです。

5 XMLデータの読込みとその表示
ここまでスクリプトは1行も記述しませんでした。XMLConnectorインスタンスを動作させるには、ひとつだけメソッドの呼出しが必要です。以下のスクリプトを、メインのタイムラインの第1フレームアクションとして記述します。

// メインのタイムライン
// 第1フレームアクション
doc.trigger();

'XMLConnector.trigger()'メソッドは、インスタンスの処理を実行し、XMLデータを読込みます。

[ムービープレビュー]を実行して、結果を確認してみましょう。最新のサンフランシスコの天気情報が表示されます(エラーが発生したら、少し時間をおいて再度お試しください)。

図012■XMLConnectorがXMLデータを読込んでLabelインスタンスに表示

サンフランシスコの最新の天気情報が表示される

_____

作成者: 野中文雄
更新日: 2003年11月21日 Flash Player 7のセキュリティについて「Macromedia Flash Player 7におけるセキュリティの変更について」にリンク変更
更新日: 2003年11月17日 Flash Player 7のセキュリティについて「Security Changes in Macromedia Flash Player 7」をリンクに追加
作成日: 2003年11月15日