| FlashでXMLを取得・表示する | 2008-07-27 |
 | Flashでデザイン 差がつくBlogサイトの作り方 (2005/04) 原 一浩 商品詳細を見る |
*****今回の関連サイト****************************************************
Yahoo!デベロッパーネットワーク（Yahoo!APIのページ）
Flashゲーム講座&ASサンプル集（アクションスクリプトに関する内容が豊富なサイト）
XMLを読もう（ASでのXML処理方法が丁寧に書いてあるサイト）
************************************************************************
Flashを使って、XMLを取得し、表示するのに挑戦してみました。
PHPだと簡単なんですけどね。。。
では、まずこちらをご覧ください。
ボタンを押すと、Yahoo!オークションAPIが上段枠内に読み込まれます。
中段には、読み込みの状況が表示されます。
下段には、上段に読み込まれたXML文章の特定の値を表示しています。
それでは、ソースです。
/**
*
* 2008.07.27 外部APIを取得し、表示する
*
* XMLはYahoo!オークションAPIから取得
* ダイナミックテキストに表示する( 各テキストには変数名が定義されている )
*
*/
// XMLオブジェクトの生成
var xml_obj = new XML();
// 余計な改行などを削除
xml_obj.ignoreWhite = true;
// 変数の定義
var categoryIdValue = 0;
// 読み込み状況取得
xml_obj.onLoad = function(check){
if(check){
// 文字化け対策
System.useCodepage = false;
// 取得したXMLを文字列にする
str = xml_obj.toString();
SetMessage("読み込みが完了して変数にアクセスが可能");
}else{
SetMessage("読み込み失敗");
}
// 読み込みが完了したら表示処理を行う
if(xml_obj.status == 0){
SetMessage("解析完了しました");
/**
*
* 表示させる値の定義
* 変数名 = XMLオブジェクト.ルートノード.子ノード1.子ノード1の子ノード.表示させる値
*
*/
categoryIdValue = xml_obj.childNodes[0].childNodes[7].childNodes[1].firstChild.nodeValue;
SetId( categoryIdValue );
}
} // onLoadの処理終了
/**
*
* XMLファイルを読み込む関数
* urlはボタンに定義されている
*
*/
function LoadXmlFunc(url){
xml_obj.load(url);
}
// メッセージを表示する関数
function SetMessage(str){
msg = str + "\n";
}
// 定義した値を表示する
function SetId( categoryIdValue ) {
id = "ID表示成功!!：" + categoryIdValue;
}
それぞれのテキストボックスには変数名が付与されています。
上から、「str」「msg」「id」です。
また、ボタンにもASが記述されています。
on ( press ) {
LoadXmlFunc (
"http://api.auctions.yahoo.co.jp/AuctionWebService/V1/CategoryTree?
appid=YahooDemo&category=23568"
);
}
このボタンが押されたら、指定のURLへアクセスし、XMLを取得してくるようになっています。
では、ソースの解説です。
コメントにも書いてあるので、ざっと説明させてもらいます。
まず、XMLオブジェクトを生成する必要があります。
「new XML」で生成できるので、簡単です。
ですが、このまま読み込むと、非常に都合が悪いです。
なぜなら、空白や改行がそのままXMLに読み込まれてしまうのです。
・・・デフォの設定なので、変更してあげなければいけません。
そこで、「xml_obj.ignoreWhite = true;」と指定します。
こうすると、余計な部分を削除してくれるので助かります。
これで、土台の完成です。
読み込むには、「load(指定のURL)」を使います。
これで、あらかじめ生成しておいたXMLオブジェクトにXMLが読み込まれます。
あとは、この読み込み状況により、処理を変えます。
今回は、全て読み込まれてから処理を始めたかったので、「status == 0」としました。
他にも判定数値はいっぱいあります。
ただXMLを読み込んでも、何も始まりません。
そこで、下段枠内に特定の値を表示させてみました。
変数に、XMLノードを指定します。
「xml_obj.childNodes[0].childNodes[7].childNodes[1].firstChild.nodeValue」という長い部分です。
親ノードから順々に降りていけばいいのですが、これが少しややこしいです。
恐らく、もっといいやり方があると思いますが、今回の私ではこれが限界。
表示させるまでで、もうヘトヘトになってしまいました。
でも、とりあえず表示されるようにはなりました。
「windows」と表示されていると思います。
また、テキストボックスに変数名を定義しておく事で、表示させたい内容を指定するだけで表示させることが出来ます。
この技は結構使えるので、覚えておいても損はないかも。
（「id = "ID表示成功!!：" + categoryIdValue;」などの部分）
「childNodes」の部分が配列なので、もっと工夫が出来そう。
現状では、大きく細かいXMLは厳しいものがあるので、どうにかしたいと思う。
どうにか出来たら、また報告したい。
今回は、表示まで出来たので、メモしておく。
ボタンを押すと、Yahoo!オークションAPIが上段枠内に読み込まれます。
中段には、読み込みの状況が表示されます。
下段には、上段に読み込まれたXML文章の特定の値を表示しています。
それでは、ソースです。
/**
*
* 2008.07.27 外部APIを取得し、表示する
*
* XMLはYahoo!オークションAPIから取得
* ダイナミックテキストに表示する( 各テキストには変数名が定義されている )
*
*/
// XMLオブジェクトの生成
var xml_obj = new XML();
// 余計な改行などを削除
xml_obj.ignoreWhite = true;
// 変数の定義
var categoryIdValue = 0;
// 読み込み状況取得
xml_obj.onLoad = function(check){
if(check){
// 文字化け対策
System.useCodepage = false;
// 取得したXMLを文字列にする
str = xml_obj.toString();
SetMessage("読み込みが完了して変数にアクセスが可能");
}else{
SetMessage("読み込み失敗");
}
// 読み込みが完了したら表示処理を行う
if(xml_obj.status == 0){
SetMessage("解析完了しました");
/**
*
* 表示させる値の定義
* 変数名 = XMLオブジェクト.ルートノード.子ノード1.子ノード1の子ノード.表示させる値
*
*/
categoryIdValue = xml_obj.childNodes[0].childNodes[7].childNodes[1].firstChild.nodeValue;
SetId( categoryIdValue );
}
} // onLoadの処理終了
/**
*
* XMLファイルを読み込む関数
* urlはボタンに定義されている
*
*/
function LoadXmlFunc(url){
xml_obj.load(url);
}
// メッセージを表示する関数
function SetMessage(str){
msg = str + "\n";
}
// 定義した値を表示する
function SetId( categoryIdValue ) {
id = "ID表示成功!!：" + categoryIdValue;
}
それぞれのテキストボックスには変数名が付与されています。
上から、「str」「msg」「id」です。
また、ボタンにもASが記述されています。
on ( press ) {
LoadXmlFunc (
"http://api.auctions.yahoo.co.jp/AuctionWebService/V1/CategoryTree?
appid=YahooDemo&category=23568"
);
}
このボタンが押されたら、指定のURLへアクセスし、XMLを取得してくるようになっています。
では、ソースの解説です。
コメントにも書いてあるので、ざっと説明させてもらいます。
まず、XMLオブジェクトを生成する必要があります。
「new XML」で生成できるので、簡単です。
ですが、このまま読み込むと、非常に都合が悪いです。
なぜなら、空白や改行がそのままXMLに読み込まれてしまうのです。
・・・デフォの設定なので、変更してあげなければいけません。
そこで、「xml_obj.ignoreWhite = true;」と指定します。
こうすると、余計な部分を削除してくれるので助かります。
これで、土台の完成です。
読み込むには、「load(指定のURL)」を使います。
これで、あらかじめ生成しておいたXMLオブジェクトにXMLが読み込まれます。
あとは、この読み込み状況により、処理を変えます。
今回は、全て読み込まれてから処理を始めたかったので、「status == 0」としました。
他にも判定数値はいっぱいあります。
ただXMLを読み込んでも、何も始まりません。
そこで、下段枠内に特定の値を表示させてみました。
変数に、XMLノードを指定します。
「xml_obj.childNodes[0].childNodes[7].childNodes[1].firstChild.nodeValue」という長い部分です。
親ノードから順々に降りていけばいいのですが、これが少しややこしいです。
恐らく、もっといいやり方があると思いますが、今回の私ではこれが限界。
表示させるまでで、もうヘトヘトになってしまいました。
でも、とりあえず表示されるようにはなりました。
「windows」と表示されていると思います。
また、テキストボックスに変数名を定義しておく事で、表示させたい内容を指定するだけで表示させることが出来ます。
この技は結構使えるので、覚えておいても損はないかも。
（「id = "ID表示成功!!：" + categoryIdValue;」などの部分）
「childNodes」の部分が配列なので、もっと工夫が出来そう。
現状では、大きく細かいXMLは厳しいものがあるので、どうにかしたいと思う。
どうにか出来たら、また報告したい。
今回は、表示まで出来たので、メモしておく。