#pgid
 
 ** 目次 [#z076c854]
 #contents
 
 
 ** 概要 [#o07e526b]
 - FlashでJSONファイルをパースしてオブジェクト型として返してくれるライブラリがあります。
 -- [[JSON in ActionScript:http://www.designvox.com/~borys/JSON/JSON.as]]
 -- via:[[Collection & Copy - JSON入門:http://d.hatena.ne.jp/brazil/20050915/1126709945]]
 
 - これを利用したサンプル
 -- [[FlashでJSONファイルを読み込むサンプル:http://staff.ark-web.jp/~takemura/public/flash/json/]]
 
 -- 時間の都合上、下記の制約があります (とりあえず今回はFlashでJSONをパースして出力することだけを行っています)
 --- ボックスは直近のアークウェブ ブログから取ってきたものですがリンクさせてません
 --- 読み込むJSONファイルは固定です
 --- ボックスはドラッグできません
 
 
 ** ソースレビュー [#g13a75b4]
 *** バージョン [#mce014c6]
 - 今回利用しているバージョンは、''Flash8 ActionScript2.0''です。
 
 *** JSONデータ [#ca8e2cf2]
 - 今回表示させているJSONデータは、直近のアークウェブ ブログから取ってきたものです。
  blogs=[
  {"title" : "Universal PDF XSS：【重要】Adobe Readerを8にアップグレードしましょう", "author" : "進地", "date" : "2007/01/18 12:03"},
  {"title" : "Web 2.0的アプリのセキュリティ：機密情報にJSONPでアクセスするな", "author" : "進地", "date" : "2007/01/11 07:50"},
  {"title" : "AkismetによるPukiWikiへのspam(スパム)防止機能", "author" : "小沼", "date" : "2006/12/21 15:15"},
  {"title" : "クチコミメディアにおけるサイトの影響力を知るツール「Webスカウター(Web scouter）」", "author" : "八木", "date" : "2007/01/11 07:50"},
  {"title" : "Web 2.0化が進む旅行情報サイトの現状", "author" : "薄井", "date" : "2006/12/18 07:50"}
  ]
 
 - 構造としては、[...]配列内に、{"key":"value"}オブジェクトが配置してある形です。
 -- 注意点：最後の{...}の後ろに ,(カンマ)は付かない！
 -- 注意点：blogsの =(イコール)前後にスペース等を入れない！
 
 *** Flash側のシンボル [#h3c202c4]
 - Flashのシンボルとしては、下記の３つだけ
 
 -- box …JSONの1データを表示するボックス
 -- canvas …ボックスを表示するエリア
 -- title.jpg …ARK-Webのロゴ
 
 *** Flash側のフレームアクションのコード [#jc3e2230]
 - asレイヤーの最初のフレームに↓こう書いています
  var main = new Main(this);
  main.loadAndAttachItems();
  stop();
 
 - Mainクラスを生成して、loadAndAttachItemsメソッドを呼んでいるだけで、Flashにはその他のコードはありません。
 - Mainクラス生成の際に、メインタイムラインを渡しています。これで、Mainクラス内でメインタイムライン上にあるオブジェクトを操作できます。
 
 
 *** MainクラスのloadAndAttachItemsメソッド [#sd6b9bc4]
 - 次に、MainクラスのloadAndAttachItemsメソッドを見ていきます。
  	/**
  	 * データ(JSON)を読み込んでアタッチする.
  	 */
  	public function loadAndAttachItems() {
  		var main:Main = this;
  		
  		// JSONをロードする
  		var jsonData:LoadVars = new LoadVars();
  		jsonData.load ("sample.txt");
  		jsonData.onLoad = function(success:Boolean) {
  			if (!success) {
  				main.getMtl().gotoAndStop('Load_faild');
  				return ;
  			}
  			// データをパースして、リンケージに書き出したboxにアタッチする
  			var list:Object = JSON.parse(this.blogs);
  			for (var i = 0 ; i < list.length ; i++) {
  				var oneRecord = list[i];
  				var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
  				var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
  				main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);
  			}
  		}
  	}
 
 - まず、JSONファイルをロードするわけですが、単純にすると↓このようになります。
  var jsonData:LoadVars = new LoadVars();
  jsonData.load ("sample.txt");
  jsonData.onLoad = function(success:Boolean) {
  	// JSONロード後の実装
  }
 
 - なんてことないですね。単にLoadVarsでファイルを読んでいるだけです。
 - ファイルを読み込めたら、↓この部分でJSON形式をパースさせてFlashのオブジェクト形式に変換させています。
  var list:Object = JSON.parse(this.flashVar);
 
 - 変換後の値がlist変数へ入ります。
 
 
 *** MainクラスのattachItemメソッド [#x751d26d]
 - ''データをパースして、リンケージに書き出したboxにアタッチする''の部分は、MainクラスのattachItemメソッドを見てみましょう。
  	/**
  	 * アタッチする.
  	 *
  	 * @param MovieClip   アタッチするタイムライン
  	 * @param String      リンケージに書き出されたシンボル名
  	 * @param String      インスタンス名
  	 * @param Number      x座標
  	 * @param Number      y座標
  	 * @param Object      JSONで読み込んだ 1データ
  	 */
  	public function attachItem(timeline:MovieClip, linkageName:String, instanceName:String, xPos:Number, yPos:Number, data:Object) {
  		var box_mc:MovieClip = timeline.attachMovie(linkageName, instanceName, timeline.getNextHighestDepth());
  		box_mc._x = xPos;
  		box_mc._y = yPos;
  		box_mc.title_txt.text  = data.title;
  		box_mc.author_txt.text = data.author;
  		box_mc.date_txt.text   = data.date;
  	}
 　 引数は↓このように渡していました (上のloadAndAttachItemsメソッドより)
  main.attachItem(main.getCanvas(), "box", "box_"+i+"_mc", xPos, yPos, oneRecord);
 
 - timelineは、Flash側のメインタイムライン上に配置してあるcanvas_mcオブジェクトを渡しています。
 -- つまり、このオブジェクト上にboxシンボルをアタッチします。
 - linkageNameは、boxシンボルをリンケージとして書き出した''box''を指定しています。
 - instanceNameは、''box_i_mc''(iはforループで増加)を指定していました。
 - xPosとyPosは、canvas_mcにアタッチした後の座標を指定しています。
 -- ↓この計算はcanvas_mc内に収まる範囲でランダム、という意味です。
  var xPos = Math.floor(Math.random() * (720 - 230 - 10 + 1)) + 10;
  var yPos = Math.floor(Math.random() * (500 - 100 - 10 + 1)) + 10;
 
 - dataは、JSONで読み込んだ 1件分のデータです。1件には''title''と''author''と''date''があるので、それぞれboxシンボル内のテキストに代入しています。
 
 - これをforループ分繰り返してボックスを複数表示させているわけです。
 
 
 ** まとめ [#acd5c0ee]
 - FlashでJSONファイルを読み込むのは、LoadVarsで普通に読み込む
 - JSONファイルをパースするのは、''JSON.parse("ファイル名")'' を利用する
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

アークウェブのサービスやソリューションはこちら

サービス
Zen Cartソリューション
Movable Typeソリューション
その他ソリューション
アークウェブのCSR(企業の社会的責任)