NORIのFlashユーザのためのMovable Type講座 gihyo.jp版

第4回Flash側:XML解析をAS3.0で

今回は、これまでに作成したXMLファイルをFlashで読み込みます。

今回はFlash CS4と、E4XというXML解析手法が使用できるActionScript3.0(以下、AS3)を使用します。

まず、Flashの新規ドキュメントを作成します。

本来はオブジェクト指向で作成しますが、まずは、フローをしっかりと把握するため、フレームにAS2の時と同じスタイルで記述します。ただし、文法はAS3なので、注意してください。

外部テキストを読み込む手順は、大まかに次の通りです。

  1. URLLoaderを準備
  2. 読み込み完了イベントへの関連づけ
  3. 読み込み完了時の関数定義
  4. URLRequestでアクセス

URLLoaderを準備

外部テキストは、URLLoaderオブジェクトで読み込みますので、myLoaderという変数名でURLLoaderのオブジェクトを生成しましょう。

フレームに次のように記述します。

var myLoader:URLLoader = new URLLoader();

次に、myLoaderの受け取るデータがテキストであることを宣言します。

myLoader.dataFormat=URLLoaderDataFormat.TEXT;

読み込み完了イベントへの関連づけ

そして、myLoaderが読み込み完了したとき(Event.COMPLETE)に実行する関数(onLoaded)を指定します。

myLoader.addEventListener(Event.COMPLETE,onLoaded);

先ほど設定した、関数「onLoaded」を定義します。

function onLoaded(e:Event):void {
   var myXML:XML=new XML(e.target.data);
   trace(myXML.toString())
}

このonLoaded()関数では、読み込み終わったXMLデータをトレースするだけです。

読み込み完了イベントから呼ばれる関数を定義

このとき、関数onLoaded()には、Eventオブジェクトが引数で返されます。そのため、それを受け取る引数の宣言がないとエラーになります。

このonLoaded()関数が呼ばれたとき、読み込んだXMLテキストはmyLoaded.dataでアクセスできるようになっています。そこで、myLoaded.dataをnew XML()の引数にしても良いのですが、ここでEventオブジェクトである引数eのtargetプロパティは、myLoadedを参照しています。つまりmyLoaded.dataをe.target.dataと書き換えることができます。

このe.target.dataの値は、XMLフォーマットで記述されたテキストデータです。それをE4XやXMLクラスのメソッドでアクセスできるようXMLオブジェクトにします。

var myXML:XML=new XML(e.target.data);

trace()の実行結果は、次のようなものになります(データの中身は環境によって異なりますが、XMLフォーマットになっているはずです⁠⁠。

<entries>
<entry id="9" title="お台場">
<img src="http://www.3oclock.com/my_first_blog-gihyojp/images/2007-03-25-FromDaiba.jpg"/>
</entry>
<entry id="8" title="銀座4丁目">

<img src="http://www.3oclock.com/my_first_blog-gihyojp/images/2006-10-28-ginza.jpg"/>
</entry>
<entry id="7" title="かくれんぼ">
<img src="http://www.3oclock.com/my_first_blog-gihyojp/images/2006-11-10-park.jpg"/>
</entry>
<entry id="6" title="駐輪場">
<img src="http://www.3oclock.com/my_first_blog-gihyojp/images/2006-10-28-cycle.jpg"/>
</entry>
<entry id="5" title="ショッピング">

<img src="http://www.3oclock.com/my_first_blog-gihyojp/images/20070503-shopping.jpg"/>
</entry>
</entries>

E4Xで解析

myXMLに対して、E4Xを使用してデータを抽出します。

E4Xとは、ECMAScript for XMLの略で、Flash独自のものではなく、ECMAScriptで定義されたXMLを解析する手法です。

E4Xの特徴は、XMLの構造に沿って、.(ドット)で階層を下りテキストノードを指定したり、@を使用して属性値を取得する点です。

また、ワイルドカードとして*を使用できます。

たとえば、次のXMLフォーマットの場合を考えてみましょう。

<togoru> 
   <member age="38" sex="male"> 
      <name>NORI</name> 
   </member> 
</togoru> 

E4Xにより、次のAS3では、myXMLを生成します。

var myXML:XML =<togoru> 
<member age="38" sex="male"> 
<name>NORI</name> 
</member> 
</togoru> 

その後、次のようにE4XでXMLオブジェクトへアクセスすることができます。

trace(myXML.member.name);  //NORIが出力される
trace(myXML.member.@age);    // 38 が出力される

myXMLは、<togoru>と同じレベルなので、togoru.member.name を変数myXMLを使用して表現するならば、myXML.member.name となります。

繰り返しノードの抽出

今回のXMLフォーマットでは、entriesタグの中にentryタグが繰り返しでてきます。

そこで繰り返しているentryノードを1件づつ取り出す必要があります。繰り返して取り出すときに、for-each-in というあらたにAS3で追加されたループ処理命令を使用します。

たとえば、<entries>の中の<entry>を取り出すには、次のように書きます。

for each (targetdata in entries.*){
   //<entries>直下のノードすべて(*)が、1件単位で取り出され
   //targetdataには、1件の<entry>が割り当てられることになります。
   }

これを、実際の変数で記述すると次のようになります。

for each (var entrydata:XML in myXML.*) {
   //entrydata の中のimgタグのsrc属性を調べる
   trace(entrydata.img.@src)
}

for-each-inは、ノードを1件単位で取り出す命令のため、必ずしも、今回のような同じノード名の繰り返し以外でも使用できます。

URLRequestでアクセス

最後にXMLデータの読み込みを実行します。URLLoaderクラスのload()メソッドを使用します。

var myURLRequest:URLRequest=new URLRequest("photo.xml");
myLoader.load(myURLRequest);

photo.xmlは、適宜、自分の環境にあったURLに直します。

AS3では、アクセスするアドレスのテキストは、常にURLRequestオブジェクトである必要があります。

URLRequestにするときは、new URLRequest("アクセスしたいURL")です。

このURLRequestオブジェクトを、myLoaderのload()メソッドの引数にして実行します。

全スクリプト

ここまでをまとめると、次のようになります。

スクリプト1
//読み込みオブジェクトの生成
var myLoader:URLLoader = new URLLoader();
//テキストデータという宣言
myLoader.dataFormat=URLLoaderDataFormat.TEXT;
//読み込み完了したらonLoaded()を実行
myLoader.addEventListener(Event.COMPLETE,onLoaded);
//読み込み完了時に実行される関数
function onLoaded(e:Event):void {
   //XMLデータとして読み込んだテキストデータをパース
   var myXML:XML=new XML(e.target.data);
   //E4XでmyXMLを解析
   for each (var entrydata:XML in myXML.*) {
      //entrydata の中のimgタグのsrc属性を調べる
      trace("src",entrydata.img.@src)
   }
}
//文字列をURLRequestオブジェクトにする
var myURLRequest:URLRequest=new URLRequest("photo.xml");
//XML読み込み実行
myLoader.load(myURLRequest);

動作テスト

  1. スクリプト1をAS3で新規作成したFlashムービーのフレームにペーストします。
    ASパネル
  2. new URLRequest("photo.xml"); のXMLを自分の環境に合わせて書き換えます。
    例:http://www.3oclock.com/my_first_blog-gihyojp/photo.xml
  3. ムービープレビューします。

サンプルのFlaファイル(CS4専用)ダウンロードできます。

正しく動作すれば、次のようにトレース結果が出力されます。

トレース結果

まとめ

ここまでできれば、後は、このトレースしている内容を変数に格納し、何らかのタイミングで、画面に読み込めば良さそうです。

今回は、XMLデータをFlashに読み込むところまでを作業しました。

次回は、このデータを使用して、写真を読み込み表示します。

おすすめ記事

記事・ニュース一覧