第32回　FlashムービーでXMLファイルを使ってみよう

吉岡梅

2006.11.24

　最近ではデータの保存・出力をする際に「XML」形式を選択することが多くなっています。このXML形式のファイルをFlashに読み込んで解析し，利用してみましょう。

XMLファイルのデータで円グラフを表示

　図1はよくある円グラフを表示するムービーです。この円グラフのデータは，図2のようなXMLファイルから読み込んでいます。

図1：XMLファイルを読み込むムービー（クリックするとムービーを表示します）

図2：サンプルで読み込んでいるXMLファイル。XMLファイルの内容を変更すると，Flashムービーの内容に反映されます(サンプルのダウンロードはこちら)

　ActionScriptで外部のテキスト・ファイルを読み込む方法としては，本連載の第30回，第31回でLoadVarsクラスをご紹介しました。XMLファイルを読み込む場合には，LoadVarsクラスと非常によく似た使い方でXMLファイルを読み込んで利用することのできる「XMLクラス」を使用します。

XMLファイルを読み込む

　XMLクラスの使用方法は，基本的にはLoadVarsクラスと同じです。

新規のXMLクラスを作成し，
onLoadイベントハンドラにファイル読み込み後の処理を記述し，
loadメソッドで指定したファイルを読み込む

というおなじみの流れになります。LoadVarsクラスがXMLクラスに変わっただけですね。コードにすると次のようになります。

//新規XMLインスタンスを作成
var myXML:XML = new XML();
//読み込み後の処理を作成
myXML.onLoad = function(){
  //読み込んだXMLに対する処理を記述
}
//XMLファイルを読み込む
myXML.load(ファイル名)

　では，早速図3のようなXMLファイルを読み込んで表示してみましょう。XMLファイルはWindows付属のテキストエディタである「メモ帳」(notepad.exe)を使って，改行やタブ文字などを使ってノードを区切ってみました＊1。

図3：読み込むXML形式のファイル

　このファイルを任意のフォルダ内「xmlData.xml」という名前で保存します。「メモ帳」では保存する文字コードを指定できるので，Flashで扱う文字の既定の文字コードである「UTF-8」を選択して保存しておきましょう＊2。

　このテキスト・ファイルを次のようなコードで読み込んでみます。

var myXML:XML = new XML();
myXML.onLoad= function(){
  //XML宣言部分を表示
  trace("宣言部分は，" + this.xmlDecl);
  //文章要素（ルート要素・ルートノード）部分を表示
  trace("---\n文章要素は，\n" + this.firstChild);
}
myXML.load("xmlData.xml");

ここで注目していただきたいのは，onLoadイベントハンドラに割り当てたイベントハンドラ・メソッド内の処理です。読み込んだXML文章のXML宣言部分を取得するには，「xmlDecl」プロパティを使用します。

XMLインスタンス.xmlDecl

また，文章要素（ルート要素・ルートノード）を取得するには，XMLクラスのインスタンスに対して「firstChild」プロパティを使用します。

XMLインスタンス.firstChild

イベントハンドラ・メソッド内では，キーワード「this」を使って，イベントハンドラ・メソッドを呼び出したXMLクラスのインスタンスを参照できるので，「this.xmlDecl」と記述しておけば，読み込むXMLファイルのXML宣言部分が取得できます。

　さて，このコードを実行した結果は，図4のようになります。でも，XML宣言部分はうまく表示できましたが，ルートノードの内容は何も表示されていません。これではちょっと困りますよね。

図4：意図したように読み込めなかった例

これは，図3の時点で見た目のためによかれと思って挿入しておいた改行やタブ文字が，一つのノードとして認識されてしまい，意図したような形で読み込めていないためです。

　このようなケースでは，元のデータから改行やタブ文字などを取り除いて保存しても良いのですが，ActionScript側でこのような改行やタブ文字，さらにはスペースなどの，いわゆる「空白」を無視して読み込む設定にすることもできます。

　空白を無視して読み込みを行うには，

XMLインスタンス.ignoreWhite = true;

の一文を，XML文章を読み込む前に加えます。

　先ほどのコードにもこの一文を加えて実行してみましょう。

var myXML:XML = new XML();
//空白を削除して読み込む
myXML.ignoreWhite = true;
myXML.onLoad = function(s) {
  //XML宣言部分を表示
  trace("宣言部分は，"+this.xmlDecl);
  //文章要素（ルート要素・ルートノード）部分を表示
  trace("---\n文章要素は，\n"+this.firstChild);
};
myXML.load("xmlData.xml");

今度は，きちんと意図した通りに文章要素が読み込まれていることを確認できますね（図5。空白が削除されているので，ちょっと見難いですけれど）。

図5：文章要素を読み込めた