いよいよ本連載も最終回となりました。今回は二部構成でお送りします。
今までは、Flash CS3 Professionalを用いてAIRアプリケーションの作成を行ってきましたが、今回はFlex 3を中心としたAIRアプリケーション作成の方法をご紹介いたします。
第一部では、これまでFlash Professionalで作成してきたActionScriptを、Flexでインポートする方法をご紹介します。Flashで作成した資産をFlexで生かす、という目的です。
第二部では、第一部と同様のAIRアプリケーションをFlexでイチから作成する方法を、基本的なFlexのシンタックスを解説しながらご紹介いたします。

本記事の構成

第一部　FlashのActionScriptをFlexにインクルードしよう

Flex Builder 3 をインストールする（Macintosh版もあるよ）
FlexでAIR用のプロジェクトを作成する
FlashのメインタイムラインのActionScriptを移行する
FlexでActionScriptを記述してみる（FlashのActionScriptクラスを移行する）
アプリケーションの実行
AIRファイルへの書き出し

第二部　はじめてのMXML

はじめてのMXMLアプリケーション
デザインモードでレイアウトを行う
MXMLおよびActionScriptの追加
おまけ
おわりに

第一部　FlashのActionScriptをFlexにインクルードしよう

第一部では、開発環境である「Adobe Flex Builder 3 Professional」をインストールし、開発に必要な準備を行います。
次に、これまでFlash側で作成したActionScriptをFlexに移行すること（インポート）、そして、Flex BuilderではじめからActionScriptを記述することも行います。
第一部の目的は、「Flex Builder がActionScriptエディタとして使える！」ということを感じていただくこと、「Flashで作成したものを生かして、Flexを新たな開発環境として使う可能性」を感じていただくことです。「Flex Builder がActionScriptエディタとして使える！」という部分に関しては、FlashクリエイターでActionScriptコーディングを中心にされている方々の間でひそかに流行っている使い方のようです。Flexは、コード中心で記述することから、FlashのActionScriptエディタと比較した場合、コードを効率よく記述するための環境がよりよく考慮されています。

それでは、早速手順に入りましょう。

Flex Builder 3をインストールする（Macintosh版もあるよ）

今回の主役である開発環境「Adobe Flex Builder 3 Professional」をインストールします。ライセンスをお持ちでない方は、以下のページで無償体験版（60日間）をダウンロードできますので、ぜひインストールして、すばらしいFlexの世界を体験してください！（Adobe IDおよびそのパスワードが必要です。未登録の方は、画面の指示に従って登録してください。）
また、Windows版だけでなくMacintosh版も用意されていますので、Macintoshユーザーの皆さま、デザインワーク中心の皆さまも気軽に試してみてください。

体験版のダウンロード

画面を進めるとダウンロードする製品を選択するコンボボックスが表示されますので[[Flex 3]を選択し、隣の[Go]ボタンをクリックします。

Adobe IDおよびそのパスワードを入力すると、「Adobe Flex Builder 3 Professionalのダウンロード」のページが表示されますので、お好きなエディションのFlex Builderを選択して、ダウンロードを行ってください。

ダウンロードを行ったあとは、インストーラーの指示に従い、インストール作業を行ってください。

FlexでAIR用のプロジェクトを作成する

では、次にFlexの準備を行います。
Flex では、アプリケーションの開発単位である「プロジェクト」を作成します。この「プロジェクト」には、アプリケーションのソースコードや、必要なアセットファイル（画像や、XMLデータなど）、そして、プロジェクトやアプリケーションの設定情報を格納します。

Adobe Flex Builder 3を起動します。（Windowsの場合[スタート]メニューから、[プログラム]、[Adobe]、[Adobe Flex Builder 3]と選択します）

[ファイル]メニューから、[新規]、そして、[Flexプロジェクト]と選択します。
（※左上部「Flexナビゲータ」ビューを、[右クリック]、[新規]そして、[Flexプロジェクト]と選択しても同様の操作が行えます）
「新規Flexプロジェクト」ダイアログボックスで、次の設定を行います。設定後、[終了]ボタンをクリックします。

プロパティ名	設定値	説明
プロジェクト名	Chapter5	プロジェクトの名前を指定します。好きな名前を指定してもかまいません。
プロジェクトの場所・デフォルトの場所を使用する	チェックを入れる（デフォルト）	これでデフォルトの場所にプロパティ名と同じ名前のフォルダが作成され、プロジェクトの用法やソースファイルが格納されます。（デフォルトのプロジェクトが作成されるフォルダは、「ワークスペース」と呼ばれるフォルダの直下になります。）デフォルトでは、階層の深いフォルダに作成されるので、好きなフォルダを指定してもかまいません。このときは、「デフォルトの場所を使用する」のチェックを外し、「フォルダ：」で任意のフォルダを指定します。
アプリケーションの種類	[デスクトップアプリケーション（Adobe AIRで実行）]を選択する。	今回作成するAIRアプリケーション用のプロジェクトを作成します。[Webアプリケーション（Flash Playerで実行）]を選択すると、WebブラウザのFlash Playerで実行されるFlashアプリケーションを作成するためのプロジェクトとなります。
サーバーテクノロジー・アプリケーションサーバーの種類：	なし（デフォルト）	LiveCycle Data ServicesやColdFusionなどのサーバーとデータ通信および連動するアプリケーションを構築する場合に選択します。今回のようなアプリケーションでは設定の必要はありません。

元のFlex Builderの画面に戻ります。画面左上部の「Flexナビゲータ」ビューには、今作成したプロジェクトと、そのソースコードなどが作成されています。

一番下の「src」フォルダは、開発したソースコードなどを格納するフォルダです。「bin-debug」フォルダは、コンパイルしてできたSWFファイルなどを格納するフォルダです。いろいろあるので迷ってしまいますが、とにかくこれから作成するものは、「src」フォルダの下に格納するようにしてください。

画面右側には、「chapter5.mxml」ファイルが開かれている状態になっています。この画面は、「エディタビュー」と呼ばれるもので、実際の開発作業を行っていくところです。「.mxml」というファイルにアプリケーションのコードをMXMLと呼ばれる言語と、ActionScriptを組み合わせて記述していきます。

自動的に挿入されている「<?xml version=・・・・」の部分や、「<mx:WindowedApplication xmlns:mx=・・・」の部分は、削除したり、変更したりしないで、そのままそっとしておいてあげてください。

簡単にソースコードの中身を解説します。

2行目：「<mx:WindowedApplication xmlns:mx=・・・」の部分が、MXMLの書き出し部分になります。

MXMLは、タグベースの言語でXMLをベースにしたものですが、誤解を恐れずにいうならば「HTML感覚」で記述していけるものです。「<mx:WindowedApplication xmlns:mx=・・・」の部分は、HTMLでいうところの「<HTML>タグ」のようなもので、AIRアプリケーションの場合必ずルートに存在する必要があります。そして、その間に、ボタンやテキストなどのフォーム要素や、レイアウトを行う「視覚要素」のMXMLのタグを記述していきます。MXMLの名前空間の指定「xmlns:mx="http://www.adobe.com/2006/mxml"」が入っていますが、これも自動挿入されたままにして、通常記述を変えたり削除したりしません。「お約束のもの」という感じでとらえてください。次の「layout="absolute"」は、<mx:WindowedApplication>と</mx:WindowedApplication>の間に記述するMXMLタグで指定された「視覚要素」のレイアウトを決定するものです。MXMLでは、このように必要な設定がある場合は、各MXMLタグの開始タグで「プロパティ」として記述します。また、プロパティは複数入れることができます。（HTMLと似ていますよね？）。プロパティは必要でなければ記述する必要はありませんので、「layout="absolute"」は必要がなければ削除したり、値を変更したりしてもかまいません。

1行目：1行目に戻ります。MXMLは「XMLのシンタックス」をベースにしたものなので、いわゆる「XMLの宣言」にあたるものです。これも勝手に書き換えたり、削除したりせず、お約束で入れておくもの、という感じにとらえてください。

以上で、開発環境の準備は終わりです。次に、「FlashのメインタイムラインのActionScriptをFlexに移行する」ことを行っていきましょう。

FlashのメインタイムラインのActionScriptを移行する

さて、次の手順です。
Flashの第4回までに完成したアプリケーションをFlexに移行、といきたいのですが、少々複雑な事情が発生しそうな予感です。そこで今回は話をシンプルにするために「第2回」の完成品をベースに移行する、というシナリオで進めていきたいと思います。

「第2回」のサンプルを用意します。手元にない方は、以下のリンクからダウンロードして、ZIPファイルを解凍しておいてください。
【AIRチュートリアル・Flash 第２回　インターネット上の情報を使ってみよう！～ホットペッパーAPIを利用する～】
Flex BuilderでActionScriptのファイルを新規に作成します。[Chapter5]プロジェクトのsrcフォルダを選択し、右クリックします。そのメニューから、[新規]、[ActionScriptファイル]と選択します。
「新規ActionScriptファイル」ダイアログボックスで、「ファイル名：」に"Air01.as"と指定をして、[終了]ボタンをクリックします。

元の画面で、Flexナビゲータビューに「Air01.as」ファイルが作成されていることと、エディタビューでファイルが開いていることを確認してください。

「Hotpepper001.fla」ファイルを、Flash CS3 Professionalで開きます。
「Script」レイヤーの1フレーム目を選択し、ActionScriptエディタを開きます。そして、すべてのコードをコピーします。
Flex Builderに切り替え、「Air01.as」ファイルに貼り付けます。

さて、いかがでしょうか？
コードのキーワードの色づけなんかもついたぐらいにして、いい感じで移行できたようです。

しかし、Flexではこれでは動作しません。
「Flexにはタイムラインという概念がない」
ため、このままではちょっとだけダメなのです。
Flashでは、時間軸の進行に合わせてActionScriptを実行できるという「フレームアクション」という考え方があります。（今回は、たまたまメインタイムラインの1フレームのみで実行されているだけですが）

Flexでは、「タイムライン」が存在しないのでどうするかというと、
「イベントの発生するタイミング」で
ActionScriptを実行する、ということをします。

まず、移行したコード全体をくくってinit()という名前の関数にします。このinit()関数を、Flexアプリケーション初期化終了時に発生するイベント（※）である、creationCompleteイベントで呼び出します。これで、Flashで作成したときの1フレームで実行するのと同じ状態になります。
（※）イベント、というと

「マウスでクリックした」とか、「キーボードで入力した」とか、「ユーザーのマウスやキーボードのアクションに対応するイベント」
「enterFrame」などのように、Flash Playerでアプリケーションを実行最中に「しかるべきタイミングで自動的に発生するイベント」

とがあります。Flexでは、前者を「ユーザーイベント」、後者を「システムイベント」といい、今回使用する "creationComplete"は、後者のシステムイベントの仲間です。

以下のコードを参考にして、init()関数でくくります。

        // ActionScript file
 
//まず必要なパッケージをインポートします
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.system.Security;
import flash.system.SecurityPanel;
import fl.controls.*;
 
	function init():void{
 
	//必要なインスタンスを生成しておきます。
	var loader : URLLoader = new URLLoader();
	var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&large_area=Z011&count=16";
	var request:URLRequest = new URLRequest(url);
	var col:int = 1;
	var row:int = 1;
	var w:int = 110;
	var h:int = 110;
	var wrap_at:int = 5;
	var current_shop_view:ShopView;
 
	//XMLをリクエストするファンクション。XMLのリクエストに成功し、XMLが取得できたらxmlCompfuncを実行するようになっています。
	function loadXML(url:String) :void{        
		loader.addEventListener(Event.COMPLETE, xmlCompfunc);
		loader.load(request);
	}
 
	//ロードしたXMLからサムネイルを生成するファンクション(各サムネイルのx座標、y座標を決定します)
	function xmlCompfunc(event:Event):void {
		//XMLにあるネームスペースを回避します
		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		use namespace ns;
		//取得できたXMLをfor eachで回します。
		var results:XML = new XML(loader.data);
		var itm:XML;
		for each( itm in results.shop ){
			var thumbnail_x:int = w * (col - 1) + 10;
			var thumbnail_y:int = h * (row - 1) - 10;
			var thumb:Thumb = make_shop_thumb( itm, thumbnail_x, thumbnail_y );
			Cont.addChild( thumb );
			col++;
			if( col == wrap_at ){
				row++;
				col = 1;
			}                
		}
	}
	//各サムネイルに対して必要な情報を当て込みます
	function make_shop_thumb (itm:XML, thumbnail_x:int, thumbnail_y:int ):Thumb {
		//XMLにあるネームスペースの回避
		namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
		use namespace ns;
		//ThumbというムービークリップにXMLの要素を当て込みます
		var thumbnail:Thumb = new Thumb(itm);
		thumbnail.x = thumbnail_x;
		thumbnail.y = thumbnail_y;
 
		//サムネイルがクリックされた場合、その詳細画面が表示されるようにします。
		thumbnail.addEventListener(MouseEvent.CLICK, thumbnail_click);
		function thumbnail_click (event:Event):void {
			make_shop_view( itm );
		}
		return thumbnail;
	}
 
		//サムネイルがクリックされたあと、shopviewというクラスが表示されるファンクション。
		function make_shop_view ( itm:XML ):Boolean {
		if( current_shop_view ){
			removeChild( current_shop_view );
		}
		var shopview:ShopView = new ShopView( itm );
		addChild( shopview );
		shopview.x = 450;
		shopview.y = 50;
		current_shop_view = shopview;        
		return true;
	}
 
	loadXML(url);
}
    

「Air01.as」ファイルを上書き保存します。
「Chpater05.mxml」ファイルに切り替えます。
（※）エディタビューの上部がタブになっており、表示するファイルを切り替えることができます。

<mx:WindowedApplication ・・・>と</mx:WindowedApplication>の間に以下のコードを入力してください。

<mx:Script source="Air01.as"/>

これで、「Air01.as」というActionScriptのファイルをインクルードした状態になります。「Air01.as」ファイル内の変数アクセスや関数呼び出しができるようになります。さて、入力の仕方ですが、

<

とキーボードから入力し始めたタイミングで、「コード補完の候補」がリストで表示されます。さらに、

<mx:S

と入力すると、今回入力すべきを含む候補で絞られます。あとは、キーボードの上下カーソルキーで選択して、[Enter]キーを押下します。こんな調子で入力していけばいいのですが、

<s

と入力するだけでも、コード補完の候補がリストされます。つまり、「mx:」とまで入力しなくても、また、タグの大文字・小文字の区別を意識しなくてもよい（※）、ということになります。
こんな小さなTipsですが、覚えておくとプログラミングの効率向上に役立ちます。
（※）もちろんコード補完機能を使用してコード入力を行うときのみです。ソースコード上では、大文字・小文字を区別しますし、しかるべきつづりでスペルを入力しないとコンパイルエラーになります。

さらに続けて、sourceプロパティの指定を入れます。

<mx:Script>

の　「<mx:Script」の続きで、スペースキーを入力すると今度は、プロパティの補完候補がリスト表示されます。
source の sou ぐらいまで入力すると、先ほどと同じように sourceプロパティを含む補完候補が絞られます。

もう少し、細かい話をさせてください。

<mx:Script source="Air01.as"/>

を記述する位置ですが、 <mx:WindowedApplication ・・・>と</mx:WindowedApplication>の間でしたらどこでもかまいません。しかし、HTMLタグを入れるときのように、あとでコードが見やすくなるように（コードの可読性をあげるために）、適切な改行や[Tab]キーによるインデントを入れてコードのレイアウトを意識しながら入力するとよいでしょう。

次に<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">の部分に、以下のようにcreationComplete="init()"と追加します。
以下のようなコードになっているはずです。上書き保存をしておいてください。

いかがでしょうか？
Flex側でActionScript（.as）ファイルを作成しておき、そこにコピー＆ペースト、そして、Flex側のインクルードとイベントの追加で移行完了です。

FlexでActionScriptを記述してみる（FlashのActionScriptクラスを移行する）

さて、次にActionScriptクラスを用意したいと思います。「FlashからFlexへの移行」というテーマなので、本来であれば、そのままActionScriptクラスファイルをそのままFlexに移動して修正という手順になりますが、ここでは、「Flex BuilderがActionScriptエディタとして使える」ことを感じていただくことを目的として、Flex Builderでイチからクラスファイルを作成するような形で作業を進めていきたいと思います。

まずは、「Thumb.as」クラスファイルを作成します。[src]フォルダを右クリックし、[新規]、[ActionScriptクラス]と選択をします。
「新規ActionScriptクラス」ダイアログボックスで以下の設定を行い、[終了]ボタンをクリックします。

プロパティ名	設定値	説明
名前	Thumb	クラス名
修飾子	public（デフォルト）	クラスのアクセス修飾子
スーパークラス：	Flash.display.Sprite	継承元の親クラスを指定します
コード生成オプション：スーパークラスからコンストラクタを作成	チェックを入れる	クラスコンストラクタを自動生成します

「スーパークラス：」の入力は、直接入力してもいいのですがもっと楽に入力する方法があります。
「スーパークラス：」のテキスト入力の右隣に[参照...]ボタンをクリックすると、「タイプを開く」ダイアログボックスが開きます。ダイアログボックス上部のテキスト入力に、継承するクラスである「Sprite（または途中まで）」と入力します。すると、クラス候補が絞られますので、該当する[Sprite - flash.display]をダブルクリックします。すると元の「新規ActionScriptクラス」ダイアログボックスに戻り、「スーパークラス：」に選択したクラスがパッケージとともに入力されます。

以下のようなファイルが開きます。

では、開いた「Thumb.as」ファイルに以下のコードを入力してください。（入力が面倒な方は、このページのコードをコピー＆ペーストしたり、サンプルのコードご利用ください。）

        package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.text.TextField;
    
	public class Thumbold extends Sprite {
    
		private var nameField:TextField;
		private var fName:String;
		private var icon : Sprite = new Sprite();
		private var URL : String = new String();
		private var Rec : Sprite = new Sprite();
        
		function Thumbold(imgUrl:String, txt: String, x: Number, y:Number,urls:String) {
		var Img : ThumbImage = new ThumbImage(imgUrl);
		Img.buttonMode = true;
		Img.useHandCursor = true;
		Img.alpha = 1;
		addChild(Rec);
		Rec.addChild(Img);
        
		Rec.addEventListener(MouseEvent.MOUSE_OVER,blink);
			function blink(e:Event):void{
			}
            
		Rec.addEventListener(MouseEvent.CLICK,clickk);
			function clickk(e:Event):void{
			var url:URLRequest = new URLRequest(urls);
            
		// 実際にページに飛ぶ
			navigateToURL( url );
		}
	   }
	}
}
    

次に、同様に「ThumbImage.as」クラスファイルを作成し、以下のコードを入力してください。

        package {
		import flash.display.Sprite;
		import flash.display.Loader;
		import flash.events.Event;
		import flash.net.URLRequest;
        
		public class ThumbImage extends Sprite {
			function ThumbImage(img:String) {
				var loader:Loader = new Loader();
				loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeFnc2);
				var url:String = img;
				var request:URLRequest = new URLRequest(url);
				loader.load(request);
			}
            
			private function completeFnc2(event:Event):void {
				var loader:Loader = Loader(event.target.loader);
			    	addChild(loader);
			    	loader.scaleX = 0.45;
			    	loader.scaleY = 0.45;
				}
			}
	}
    

ここで、「Air01.as」ファイルに切り替えてみてください。ファイルを上書き保存したタイミングなどで自動的にコンパイルが実行されますが、いくつかコンパイルエラーが表示されています。Flashにしか存在しないクラスや、今回追加したクラスなどがありますので、以下のコードを参考にして、変更を加えてください。

        import flash.display.*;
import flash.events.Event;
import flash.net.*;

import mx.controls.*;
import mx.core.UIComponent;


public function init():void{
		var cont:UIComponent = new UIComponent();
		cont.x = 50;
		cont.y = 50;
		addChild(cont);
		var xmlData : XML = new XML();
		var loader : URLLoader = new URLLoader();
		var url:String = "http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&large_area=Z011&count=16";
		var col:int = 1;
		var row:int = 1;
		var w:int = 110;
		var h:int = 110;
		var wrap_at:int = 5;
		
		function LoadXML(url:String) :void{        
			loader.addEventListener(Event.COMPLETE, xmlCompfunc);
			var request:URLRequest = new URLRequest(url);
			loader.load(request);
		}
			 
		function xmlCompfunc(event:Event):void {
			namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
			use namespace ns;
			var results:XML = new XML(loader.data);
            
			var itm:XML;
			for each( itm in results.shop ){
			    var mcx:int = w * (col - 1) + 10;
			    var mcy:int = h * (row - 1) - 10;
			    var mise:String;
			    var thumb:Thumb = make_shop_thumb( itm, mise,mcx, mcy );
			    cont.addChild( thumb );
			    col++;
			    if( col == wrap_at ){
			      row++;
			      col = 1;
			    }                
			}
		}

		function make_shop_thumb (itm:XML, mise:String, mcx:int, mcy:int ):Thumb {
			    namespace ns = 'http://webservice.recruit.co.jp/HotPepper/';
			    use namespace ns;
			    var mc:Thumb = new Thumb(itm.photo.pc.l,itm.name,x,y,itm.urls.pc);
			    mc.x = mcx;
			    mc.y = mcy;
			    return mc;
			}
			LoadXML(url);
		}
    

アプリケーションの実行

それでは、アプリケーションを実行してみましょう

6.ソースモードで「Chapter5.mxml」に切り替えます。

7.画面左上の「再生マーク」ボタンをクリックします。

8.AIRアプリケーションが実行されます。今回は、サムネイルをクリックすると、ブラウザウインドウが開き、該当するHTMLのページが表示されます。

AIRファイルへの書き出し

では、第一部の最後として、AIRファイルの書き出し方法をご紹介します。

[プロジェクト]メニューから[リリースビルドの書き出し...]を選択します。
「プロジェクト：」「アプリケーション：」が、それぞれ書き出し対象のプロジェクト名やアプリケーションファイル名になっているかを確認します。また、「書き出されたファイル：」にAIRファイルを書き出したいパス（今回はデスクトップ）に指定します。そして、[次へ]ボタンをクリックします。

電子証明書の指定画面です。Flashの場合と同様です。必要に応じて[作成...]ボタンをクリックして、「自己署名入りデジタル証明書を作成」ダイアログボックスで電子証明書を作成します。設定したら[次へ]ボタンをクリックします。

ここではAIRファイルに含めるファイルを指定します。今回はすべてチェックの入ったままで、[次へ]ボタンをクリックします。このあと、書き出しが開始されます。

# 書き出し終了後、AIRファイルが作成されていることを確認してください。

第二部　はじめてのMXML

MXMLとActionScript

第二部では、第一部と同様のアプリケーションを Flex で作成する手順をご紹介いたします。
さて、「Flexって何？」という方もいらっしゃると思いますので、簡単にご紹介させていただきます。

Flexは、プログラムベースでアプリケーションを開発できる技術です。Flash Playerで実行できるWebアプリケーションや、もちろんAIRアプリケーションを作成することができます。ですので、最終的にできるものは、SWFファイルであったり、AIRファイルであったりしてFlash CS3 Professionalで作成したときと変わりません。しかし、そのアプリケーションを作成する過程において、Flash CS3 Professionalのようにデザインアセットを用意して、タイムラインによるアニメーション制御を行い、ActionScriptで処理を加えるというような作成の方法ではありません。ボタン、テキスト入力などのフォーム要素や、レイアウトを行うための部品である「UIコンポーネント」と呼ばれるものを配置して画面を作成し、ActionScriptで処理を加えるというような作成方法になります。特に画面で目に見える部分を作成するときに使うのがMXMLと呼ばれる言語で、処理を加えるActionScriptとあわせてすべてプログラム言語によってアプリケーションを作成するのがFlexです。

「プログラムで作成する」ということから、Javaなどのプログラマー開発者向けととられる向きがあります。とりわけ、Flashアプリケーションの開発をデザインやアニメーションベースで行われてきた方にとっては特に難色を示される方も多いことでしょう。しかし、これまでFlashでActionScriptのプログラムを行われてきた方なら、ActionScript 3の基本シンタックスは、Flashのものと変わりありませんので、Flex独特の部分さえ押さえてしまえば大丈夫です。また、MXMLは、XMLベースに開発されている言語ではありますが、ものすごく難しいかというとそうではありません。これをいうとアドビの方に怒られてしまうかもしれませんが、ほぼHTML感覚です（※）。HTMLを扱うのと同じような雰囲気で開発できますので、HTMLに親しい方ならすぐになじんでいただけることと確信しています。

（※）筆者はいつもMXMLのことをわかりやすく説明することを目的として、「HTMLの毛の生えたような感じ」といっています。アドビの方ごめんなさい。

また、「作成できるアプリケーション」という観点からは、画面の部品があらかじめ用意されていること（※）、各種データにアクセスするためのコンポーネントが用意されていることなどから、「データにアクセスして、それを表示する」といったアプリケーションが得意です。この点では、Flashで作成した場合よりも、より簡単に、より早く、そしてより強力にアプリケーションを作成できます。

（※）よくFlexは、「あの地味なデザインで固定なのですね？」といわれてしまいますのが、そんなことはありません。CSS定義などで見た目を大きく変えることも可能ですし、Photoshop CS3、Fireworks CS3、Flash CS3 Professionalで作成したデザインアセットを取り込んで大きく見た目を変更することが可能です。

では、本題のアプリケーション作成の前に、簡単なサンプルの作成を通して、FlexにおけるMXMLとActionScriptを使う感覚をつかんでいただければと思います。

はじめてのMXMLアプリケーション

それでは、第一部の手順で作成した「Chapter5」AIRプロジェクトに新たなMXMLファイルを追加して、作業を進めていきましょう。

「Chapter5」プロジェクトの[src]フォルダを右クリックし、[新規]の[MXMLアプリケーション]を選択します。
「新規MXMLアプリケーション」ダイアログの「ファイル名：」に「ex5」と指定し、「レイアウト：」を[vertical]とします。入力後、[終了]ボタンをクリックします。

「ex5.mxml」というファイルが作成され、エディタビューで開きます。ここで[ソース]ボタンをクリックし、プログラムを入力できる画面に切り替えます。

<mx:WindowedApplication>から</mx:WindowedApplication>の間に以下を入力してください。

        <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
	<mx:Button label="クリックしてください" click="clickHandler()"/>
	<mx:Label id="label1"/>
</mx:WindowedApplication>
    

ここでソースを解説します。

<mx:Button>はボタンのコンポーネントです。labelプロパティにボタンのラベル名を設定しています。このようにMXMLでは、コンポーネントに対して設定が必要な場合、HTMLと同様に開始タグにプロパティで値を設定します。

clickはイベントのプロパティです。イベントが発生すると、そこに指定をしたActionScriptを実行します。今回は、「ボタンをクリック」したときに、あとで定義をするActionScriptの関数clickHandler()を呼び出すようにしています。

<mx:Label>は、文字列を1行で表示するためのコンポーネントです。idプロパティは、配置したコンポーネントのインスタンス名を示すものです。idプロパティは、Label以外のコンポーネントでも指定できるプロパティです。（というよりインスタンス名を指定するプロパティなので、ほとんどの場合使います。）textプロパティに文字列を指定すると、その指定した文字列を表示しますが、今回は指定をしません。

では次にActionScriptを挿入してみます。<mx:Script>から</mx:Script>の間を以下のコードを参考にして入力してください。

        <?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

	<mx:Script>
		<![CDATA[
			private function clickHandler():void{
				label1.text = "はじめてのMXMLですよ。";
			}
		]]>
	</mx:Script>
    
	<mx:Button label="クリックしてください" click="clickHandler()"/>
	<mx:Label id="label1"/>
</mx:WindowedApplication>
    

ActionScriptは、<mx:Script>タグの間に指定します。<mx:Script>を入力すると、自動的に<![CDATA[と、最後の]]>が挿入されたと思います。これは勝手に消さないで、とりあえずはおまじないみたいなもので、間にActionScriptを記述する、という風に覚えておいてください。
あとは、おなじみのActionScriptの関数定義です。これはもう大丈夫ですね？

label1.text = "はじめてのMXMLですよ。";

の部分は、id="label1"と指定をした<mx:Label>のtextプロパティに文字列を渡しています。つまり、画面に表示する文字列を指定したわけです。

では実行してみましょう。

[クリックしてください]ボタンをクリックすると、「はじめてのMXMLですよ。」と表示されます。

こんな感じで見た目の要素をMXMLで「HTML感覚」でプログラムして、ActionScriptで「JavaScript感覚」でその処理をプログラムしていくというのがFlex流になります。

デザインモードでレイアウトを行う

とはいうものの、ちょっとMXMLで画面を作るのはちょっと・・・と抵抗を感じる方もいらっしゃるかもしれません。
また、Dreamweaverを使ったご経験のある方は、「デザインモード」の存在を思い出す方もいらっしゃるかもしれません。そんな方に朗報です！
Flex Builderにも「デザインモード」があります。

これを使えば、デザインをMXMLで直接記述することなく、実際アプリケーションで表示されるデザイン画面を確認しながら、作業を進めることができるようになります。デザインモードで作業した結果、裏の方で自動的にMXMLに変換してくれるので、画面の作成に関してはほぼノンプログラムで行うことができます。

それでは、これから本題のホットペッパーのアプリケーションに戻り、デザインモードを使いながら画面を作っていきたいと思います。

新規にMXMLファイルを作成してください。「ファイル名：」を「Chapter51.mxml」とし、「レイアウト：」を「horizontal」とします。

エディタビューに開いた「chapter51.mxml」のところで[デザイン]ボタンをクリックして、デザインモードに画面を切り替えます。

すると以下のようにFlex Builder全体の見た目が変わります。これがデザインモードです。

画面左下に見えるのが「コンポーネント」ビューです。各種コンポーネントが格納されており、ここからコンポーネントを選択して、エディタビューにドラッグ＆ドロップすることで画面に配置することができます。

画面右下に見えるのが「Flex プロパティ」ビューです。ここで画面に配置したコンポーネントのプロパティ値を設定することができます。

では、DataGridというコンポーネントを配置してみましょう。「コンポーネント」ビューの[コントロール]から[DataGrid]を選択し、画面にドラッグ＆ドロップします。

配置したDataGridを選択して、「Flex プロパティ」ビューで以下の値を入力します。

セクション名	プロパティ名	値
共通	ID	Data
レイアウト	幅	50％
レイアウト	高さ	100％

※ Flex プロパティビューの表示領域が小さい場合は、「レイアウト」セクションが隠れて見えない場合があります。（その場合がほとんどです。）スクロールバーでスクロールすると見えるようになります。

5.Panelコンポーネントを配置します。

「Flexプロパティ」ビューから、[レイアウト]の[Panel]を選択し、DataGridの右側にドラッグ＆ドロップします。

6.配置したPanelコンポーネントを選択し、以下のプロパティを設定します。

セクション名	プロパティ名	値
共通	ID	Shopdetail
共通	タイトル	詳細
レイアウト	レイアウト	vertical
レイアウト	幅	50％
レイアウト	高さ	100％

以下のような見た目になります。

左側のDataGridコンポーネントには、ホットペッパーWebサービスのグルメサーチAPIから取得した店舗の一覧を表示させたいと思います。そして、右側のPanelには、DataGridでユーザーが選択した店舗の詳細情報を表示させたいと思います。

続けて、Panelコンポーネント内部に表示する店舗の詳細情報を表示させる部分を作成していきます。

7.以下のコンポーネントを順番にPanelコンポーネントにドラッグ＆ドロップして、それぞれプロパティ値を設定してください。

[コントロール] Textコンポーネント

セクション名	プロパティ名	値
スタイル	B（太字）	(選択する)
レイアウト	幅	100％

[コントロール] Imageコンポーネント

セクション名	プロパティ名	値
レイアウト	幅	300
レイアウト	高さ	300

[コントロール] Textコンポーネント（※同じものを続けて３つ配置します）

セクション名	プロパティ名	値
レイアウト	幅	100％

[コントロール] Textコンポーネント

セクション名	プロパティ名	値
レイアウト	幅	100％

[コントロール] Textコンポーネント

セクション名	プロパティ名	値
レイアウト	幅	100％

[コントロール] Textコンポーネント

セクション名	プロパティ名	値
レイアウト	幅	100％
レイアウト	高さ	100％

[コンテナ] ControlBarコンポーネント（※）常にPanelの下部に表示されるコンポーネントです。

セクション名	プロパティ名	値
共通	水平方向の位置揃え:	right
共通	垂直方向の位置揃え:	middle

[コントロール] Buttonコンポーネント　これは、上で配置したControlBar内部に配置します。

セクション名	プロパティ名	値
共通	ラベル	詳細ページへ

以下のような画面になります。

8.では実行してみましょう。

ウインドウ全体の領域が小さいようですね。少し調整をしましょう。

9. Flex Builderのデザインモード画面に戻り、エディタビューの外側の灰色の部分をマウスで選択します。Flexプロパティビューで<mx:WindowedApplication>が選択されていることを確認します。

10. Flexプロパティビューで以下の値を設定します。

セクション名	プロパティ名	値
レイアウト	幅	800
レイアウト	高さ	800

11. それでは実行してみてください。画面全体が見えるようになりました。

MXMLおよびActionScriptの追加

では、次にデザインモードではできない部分の見た目の調整や、ActionScriptの処理の追加などをソースモードに切り替えて行っていきます。

ソースモードに切り替えます。
グルメサーチAPIにリクエストする部分を追加します。以下のコードを<mx:WindowedApplication>の直下に追加してください。

        <mx:HTTPService id="Hot"
url="http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&amp;large_area=Z011&amp;count=16"/>
    

<mx:WindowedApplication>に以下のイベントプロパティを追加してください。

creationComplete = "Hot.send()"

これでコードは以下のようになります。

        <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="800" 
height="600"
	creationComplete="Hot.send()">

	<mx:HTTPService id="Hot"
		url="http://webservice.recruit.co.jp/hotpepper/gourmet/v1/?key=****************&amp;large_area=Z011
		&amp;count=16"/>
    

<mx:HTTPService>は、urlプロパティに指定したアドレスに対してHTTPリクエストを行います。リクエストはHTTPSeriveのsend()メソッドを呼び出すことで実行されます。サーバーから返ってきた結果は、HTTPServiceのlastResultプロパティに格納されます。

それでは、結果が格納されているHTTPServiceのlastResultプロパティから値をDataGridに反映させて表示してみましょう。

まず一時的に<mx:DataGrid>の<mx:columns>から</mx:columns>までの部分をコメントアウトします。

<mx:DataGrid>の開始タグに以下のプロパティを追加します。

dataProvider = "{Hot.lastResult.results.shop}"

結果は、Hot.lastResultに格納されています。ホットペッパーWebサービスでは、XML形式で結果が返ってくるため、lastResult以降は、XML要素を指定してデータを渡します。

それでは実行してみてください。

なんだか大変なことになってしまってます！
グルメサーチAPIから返ってきた結果がすべて表示されてしまっているのです。
次に、表示する列を限定しましょう。

<mx:DataGrid>のコメントアウトした部分を以下コードのように書き換えます。

        <mx:DataGrid width="50%" height="100%" id="data"
	dataProvider="{Hot.lastResult.results.shop}">
		<mx:columns>
			<mx:DataGridColumn headerText="店名" dataField="name" />
				<mx:DataGridColumn headerText="写真" >
					<mx:itemRenderer>
						<mx:Component>
							<mx:HBox height="60" horizontalAlign="center" 
                        verticalAlign="middle">
					<mx:Image source="{data.photo.pc.s}" />
				</mx:HBox>
			　</mx:Component>
			</mx:itemRenderer>
		</mx:DataGridColumn>
	</mx:columns>
</mx:DataGrid>
    

では実行してみましょう。

DataGridでは、文字列ばかりでなく、今回のように画像などを配置したりなど、自由にセルの内部をカスタマイズすることができます。

次に、DataGridで選択した店舗の詳細情報を右のPanelに表示させるための記述を加えます。

<mx:Panel>から</mx:Panel>の間を以下のコードのように変更します。

        <mx:Panel height="100%" layout="vertical" id="shopdetail" title="詳細" width="50%">
	<mx:Label text="{data.selectedItem.name}" />
	<mx:Image id="shopimage" width="283" height="231" source="{data.selectedItem.photo.pc.l}"/>
	<mx:Text text="{data.selectedItem.genre.name}" />
	<mx:Text text="{data.selectedItem.food.name}" />
	<mx:Text text="{data.selectedItem.budget.name}" />
	<mx:Text text="{data.selectedItem.address}" />
	<mx:ControlBar horizontalAlign="right" verticalAlign="middle">
		<mx:Button label="詳細ページへ"/>
	</mx:ControlBar>
</mx:Panel>
    

DataGridでは、selectedItemというプロパティで選択行のデータを取得することができます。さらに、列名を指定することで、選択行の列のデータを取得できます。

では、最後に[詳細ページへ]ボタンをクリックしたときに、Webブラウザでホットペッパーの該当する店舗のWebページを開くような処理を追加しましょう。

<mx:Panel>の<mx:Button>に以下の変更を行います。

        <mx:ControlBar horizontalAlign="right" verticalAlign="middle">
	<mx:Button label="詳細ページへ" click="gotodetail(data.selectedItem.urls.pc)"/>
</mx:ControlBar>
    

<mx:WindowedApplication>の直下に<mx:Script>タグを追加し、以下のコードを追加します。

        <mx:Script>
	<![CDATA[
		private function gotodetail(url:String):void{
			var urls:URLRequest = new URLRequest(url);
			navigateToURL( urls );
		}
	]]>
</mx:Script>
    

それでは実行してみましょう。[詳細ページ]ボタンをクリックすると、Webブラウザが開き店舗情報が表示されます。
【色合いの調整】
では、ちょっとだけ見た目の色合いを変更して、アプリケーション全体の見た目をグッとくる感じに調整しましょう。
コードを以下のように変更します。

        <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" width="800" height="600"
	creationComplete="Hot.send()"
	backgroundColor="#000000">
    

実行してみましょう。背景色を変えただけですが、結構違う感じになったと思います。

おまけ

今回は店舗一覧の表示にDataGridを使用して、リスト上に表示させました。しかし、Flash版の方ではサムネイルがタイル上に並んでいます。同様のことをFlexで行った場合のサンプルを作ってみましたので、あわせて参考にしてください。（ファイル名は、「chapter52_Sample.mxml」です）

おわりに

以上で第5回に分けてお送りしたAIRのチュートリアルは終了です。
最後までおつきあいいただきましてありがとうございました。
末筆になりますが、ご多忙にも関わらずわかりやすく有意義なチュートリアルをご提供いただいた株式会社リクルートメディアテクノロジーラボの鈴木さん、そして、アドビシステムズの皆さま本当にありがとうございました。

皆さまがすばらしいAIRアプリケーションを作成され、できれば、AIRコンテストで上位になられることをお祈り申し上げます！

もっと学ぶには

Adobe Flex Builderを利用したRIA：リッチインターネットアプリケーション（リッチクライアント、FlashによるWebアプリケーション）開発に必要な基礎知識を、3日間で習得するトレーニングです。

Flex 2:Developing Rich Client Applications（リッチクライアントアプリケーションの開発）

また、基礎知識を把握された方にはこちらがおすすめです。
Adobe Flex 2における、デザインなどの視覚的要素やインタラクションを実装する手法をハンズオン（実習）形式で習得できる3日間のカリキュラムです。

Flex 2: Programming the Visual Experience

ご購入方法

ダウンロード

会社情報

国・地域および言語の選択

利用条件 | プライバシーポリシーとCookie （更新）

AIRチュートリアル Flash 第５回 より効率的に開発しよう！～Flexを利用したASのインクルードとはじめてのMXML～

著者 たいらひでかづ氏

著者 鈴木 拓生氏

Content

作成日

ページ ツール

タグ

必要条件

ユーザーレベル

必要な製品

サンプルファイル

その他の要件

ホットペッパー AIR サンプルアプリケーションのインストール

はじめに

本記事の構成

第一部 FlashのActionScriptをFlexにインクルードしよう

第二部 はじめてのMXML

第一部 FlashのActionScriptをFlexにインクルードしよう

Flex Builder 3をインストールする（Macintosh版もあるよ）

FlexでAIR用のプロジェクトを作成する

簡単にソースコードの中身を解説します。

FlashのメインタイムラインのActionScriptを移行する

FlexでActionScriptを記述してみる（FlashのActionScriptクラスを移行する）

アプリケーションの実行

AIRファイルへの書き出し

第二部 はじめてのMXML

MXMLとActionScript

はじめてのMXMLアプリケーション

デザインモードでレイアウトを行う

MXMLおよびActionScriptの追加

おまけ

おわりに

もっと学ぶには

製品

ソリューション

業種別ソリューション

サポート

ラーニング

ご購入方法

ダウンロード

会社情報

AIRチュートリアル Flash 第５回より効率的に開発しよう！～Flexを利用したASのインクルードとはじめてのMXML～

著者たいらひでかづ氏

著者鈴木拓生氏

ページツール

第一部　FlashのActionScriptをFlexにインクルードしよう

第二部　はじめてのMXML

第一部　FlashのActionScriptをFlexにインクルードしよう

第二部　はじめてのMXML