これからはじめるRIAとFlexプログラミング 第３回Flexプログラミング言語の基礎知識
作成日
29 January 2010
ページ ツール |
必要条件
この記事に必要な予備知識
「これからはじめるRIAとFlexプログラミング 第1回 RIAの基本とFlexの優位点」および「第２回 Flex開発のためのプログラミング基礎知識」をお読みいただき、RIAの基礎概念とFlexの概要そしてプログラミングの基礎知識を身につけてください。
ユーザーレベル
初級
必要な製品
- Flex Builder (Download trial)
- Flex 4.1 SDK
はじめに
FlexとRIAに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。
- デザイナーでFlex、RIAの概要や開発方法を知りたい方
- PHP、Perl、J2EEなどのWebアプリ開発者でFlex開発に興味がある方
- FlashやDreamweaverでサイト構築をしている方でFlex開発に興味がある方
つまり、プログラミングの経験を問わず、RIAの概念、Flexの基本を理解したうえで、シンプルなFlexアプリケーションを作成できることを目標とします。
第３回目はプログラミングの経験がない方のために、Flexの開発言語であるMXMLとActionScriptsの基礎知識を身につけていただくことを目指して、これらのベースとなるトピックをご紹介します。
学習できること
- XMLの超基本とMXML
- Flex でActionScriptを使用する
- FlexとFlash Player について
- Flexアプリケーション開発の流れ
XMLの超基本とMXML
FLEXアプリケーション開発時に使用するMXML言語はXML言語をベースとしています。MXML言語の学習に入る前にXML言語について、基本の概念と要素を解説します。
Ⅰ．XMLの概要と働き
XML（Extensible Markup Language：拡張可能なマークアップ言語）は、テキスト形式で記述した汎用的な「データ記述」言語です。「テキスト形式」とは、文字と改行やタブのみを使用したデータで、TeraPadや、秀丸エディタなどのテキストエディタで編集保存可能な形式でもあります。
「データ記述」ということは、「データを表現する」ということです。この「データ」の例として、一般的には次のような文書が考えられます。
- ワークシートやデータベースの表のような、フィールド(列)名とデータレコード(行)で構成されるもの
- 日付やタイトルなどがある、定型化したビジネス文書
XMLのタグ
XMLはHTMLと同じように「タグ」を使用してデータを表現します。「タグ」とは、文章のある部分に意味づけを行うことをさします。タグを使用して文書を記述することをマークアップと呼びます。XMLの場合、HTMLと異なり、タグは必ず開始タグと終了タグのペアで使用されます。
1．の例を見てみます。下記のデータをインターネットを介してほかの人に送る場合を考えてみましょう。
サンプルデータ
| 名 | 年齢 |
|---|---|
| 山田 | 18 |
| 鈴木 | 22 |
| 田中 | 24 |
このデータを表計算アプリケーションで作成してそのファイルを電子メールに添付して送信すれば済みそうですが、受け取ったほうも同じ表計算アプリケーションを持っている必要があります。また、同じアプリケーションを持っていても、最新のバージョンフォーマットで作成してしまうと、古いバージョンでは開くことができません。
XMLでデータを記述する
上記のサンプルデータは、たとえばXMLで次のように記述できます。
<?xml version=”1.0” charset=”Shift_JIS” >
<サンプルデータ>
<名>山田</名> <年齢>18</年齢>
<名>鈴木</名> <年齢>22</年齢>
<名>田中</名> <年齢>24</年齢>
</サンプルデータ>
XMLではこのようなデータを表現する際には「名」や「年齢」のようなフィールド名が重複する形になりますが、このデータは、「サンプルデータというデータ名で、名=山田/年齢=18、名＝鈴木/年齢=22、名=田中/年齢=24という3行のデータ」であることがわかります。また、テキスト形式で、文字コード=Shift JISであるため、このデータは特定のアプリケーションを使わなくても、Shift-JISをサポートするエディタで開くことができます。
Ⅱ．XMLは文書構造も記述できる
2．の例を見てみましょう。下記のデータをインターネットを介してほかの人に送る場合を考えてみます。
会社：株式会社ABCZ システム部
日付：2008年8月1日
Webアプリケーション変更のお知らせ
この度、Adobe Flexを使用して弊社のWebシステムを一新することになりました。開発はFlex Builderを使用し、3名で行う予定です。ご期待ください。
このデータもやはりワープロソフトで作ってしまうと、相手側が開くために、同じワープロソフトを必要とするため、環境によっては見てもらうことができません。
ところで、このデータはXMLで次のように記述できます。
<?xml version=”1.0” charset=”UTF-8”>
<通知>
<company>株式会社ABCZ</company>
<section>システム部</section>
<date>2008年8月1日</date>
<title>Webアプリケーション変更のお知らせ</title>
<content>この度、Adobe Flexを使用して弊社の業務システムを一新することになりました。開発はFlex Builderを使用し、3名で行う予定です。ご期待ください。</content>
</通知>
このデータを受け取った人は、UTF-8を読み込めるエディタを使用して開き、companyタグの要素に「会社：」、dateタグの要素に「日付：」というラベルを付ければ、元の文書を復元できます。
このような文書構造の記述は、HTMLタグを理解されている方には理解しやすいでしょう。次にタグの属性について確認します。
タグの属性(attribute)
XMLを使用して、相手側の環境を気にすることなく、データの内容と構造を確実に伝えることができることがわかりました。ただし、文字データと構造だけでは十分でない場合があります。次のような文書を送りたい場合はどうでしょうか？
会社：株式会社ABCZ システム部
日付：2008年8月1日
Webアプリケーション変更のお知らせ
この度、Adobe Flexを使用して弊社のWebシステムを一新することになりました。開発はFlex Builderを使用し、3名で行う予定です。ご期待ください。
文書のタイトル部分に「センタリング」と「ボールド」という書式が入っています。この場合もワープロソフトを使ってしまうと、全ての人に間違いなくデータを読んでもらうことができません。
このデータはXMLで「属性」を使用して、次のように記述できます。属性(attribute)はタグごとに次のように指定できます。
<タグ名 属性名1=”属性値1” 属性値2=”2” …>
これを利用して、titleタグにalign=”center” 、font-weight=”bold”というような属性を指定できます。
<?xml version=”1.0” charset=”UTF-8”>
<通知>
<company>株式会社ABCZ</company>
<section>システム部</section>
<date>2008年8月1日</date>
<title align=”center” font-weight=”bold”>Webアプリケーション変更のお知らせ</title>
<content>この度、Adobe Flexを使用して弊社のWebシステムを一新することになりました。開発はFlex Builderを使用し、3名で行う予定です。ご期待ください。</content>
</通知>
このデータを受け取った人は、UTF-8を読み込めるエディタを使用して開き、内容とタグの属性を確認します。align=”center”がセンタリング、font-weight=”bold”が太字を意味することは、容易に理解することもできますが、あらかじめそのように取り決めてあれば、確実に完全な形で文書を復元できます。
Ⅲ．アプリケーション構造を記述する
次に、文書の一つの形態であるプログラムソースについて考えてみます。属性を使用して、たとえば次のようなアプリケーションの構造をXMLで記述して定義するとどうなるでしょうか。
FLEXアプリケーションの構造
(アプリケーション)
(アプリケーションの属性)
メインコンポーネント：Application
レイアウト指定：vertical
アプリケーションのタイトル: HelloFlex
(アプリケーションの属性終わり)
ラベル 表示するテキスト: HelloFlex
(アプリケーション終わり)
このアプリケーションはXMLで、次のように記述できます。
<?xml version=”1.0” charset=”UTF-8”>
<flexアプリケーション
メインコンポーネント=”Application”
レイアウト指定=”vertical”
アプリケーションのタイトル=”HelloFlex”>
<ラベル 表示するテキスト=”HelloFlex” />
</flexアプリケーション>
上記のXML文書は、構造的にはMXMLで書かれたFlexアプリケーションソースと同一です。XMLを使用することより、世界共通のフォーマットで分かりやすくアプリケーションの構造を記述できることになります。
同様の構造を持つ実際のFlexソースは次のようになります。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title=”HelloFlex”>
<mx:Label text="HelloFlex"/>
</mx:Application>
Ⅳ．MXMLの基本
このようなXML言語の性質を生かしてアプリケーションの構造を定義するために考案されたのが、MXML（Macromedia Flex Markup Language）です。
MXMLで書いたFlexのソース自体はXML文書ですが、FlexやAIRアプリケーションを作成するための様々な取り決めを含めて、MXML言語の仕様が決められています。たとえばMXMLソースのファイル名に関して、次のような基本的な規約があります。これらの規約の多くは、MXMLコードがActionScriptクラスに変換されることに起因します。
- MXMLソースファイルの拡張子は、小文字の「.mxml 」にします
- MXMLソースファイルのファイル名は、MXMLで使用するタグと同じ名前にしてはいけません
- MXMLファイル名は英文字と数字、アンダーバー( _ )のみで構成し、先頭の文字は数字以外で始まるものにします。
ビジュアル要素記述言語としてのMXML
Flexアプリケーションは、MXMLを使用してその構造を記述します。ここで「ビジュアル要素」とは、たとえばメインウィンドウへのボタンやテキストボックスなどのコンポーネントの配置を意味します。
プログラムの動作を記述するActionScript
つまり、アプリケーションで使用するコンポーネントとその属性をすべてMXML言語で記述できます。そして、コンポーネントから通知される、「ボタンがクリックされた」というようなイベントが発生した時の処理を記述するにはActionScriptが適しています。
FlexでActionScriptを使用する
Ⅰ．FlexソースにコンポーネントとActionScriptを記述する
メインソースコードであるMXMLの基本を再確認し、ActionScriptコードを記述する方法をご紹介します。
MXMLソースの骨格
まずMXMLによるFlexアプリケーションの骨格を確認します。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- コンポーネントの配置 -->
</mx:Application>
このMXMLソースでは、アプリケーションの基本コンポーネントとして、「Application」を使用しており、このコンポーネントがアプリケーションのステージを表示する役割を行います。このコンポーネントのプロパティを設定することにより、Flexアプリケーションの外観を変化させることができます。
コンポーネントの配置
上記のソースにある、<!-- コンポーネントの配置 --> とコメントされた部分に、アプリケーションのインタフェースとなるコンポーネントを配置してゆきます。
下記のソースは、Applicationのlayoutプロパティを”horizontal”にして、LabelコンポーネントとTextInputコンポーネント、およびButtonコンポーネントを配置した例です。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal" pageTitle=”FLEX_TEST”>
<mx:Label text="氏名："/>
<mx:TextInput text="ここに氏名を入力してください"/>
<mx:Button label="送信"/>
</mx:Application>
実行すると、Label、TextInput、Buttonが配置された次のような画面が表示されます。
ActionScriptコードの記述
MXMLによってコンポーネントを配置できましたが、ボタンを押したときの動作はActionScriptで記述する必要があります。
ActionScriptコードはMXMLソース内に記述することができます。そのときに使用されるタグが <mx: Script></mx:Script>です。このタグで囲まれた部分にActionScriptコードを記述できます。
ただし、<mx:Script> </mx:Script>で囲まれた部分もMXMLというXML文書の一部なので、「 < 」や「 & 」などの文字があると、タグ文字として認識してしまい、ActionScriptコードで使用できる文字に制約が出てしまいます。そのため、ActionScriptコードはCDATAセクションとして記述します。XMLでは、CDATA（Character Data）セクションで囲まれた部分はXMLタグ付けとは関連がない「文字列」データとして処理されます。
CDATAセクションはコード上では、<! [CDATA[ ではじまり、]]> で終わります。実際のコードは次のようになります。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// ここにActionScriptコードを記述します
]]>
</mx:Script>
<!-- コンポーネントの配置 -->
</mx:Application>
埋め込んだActionScriptコードはMXMLソースから使用することができます。下記は先ほどのサンプルソースにボタンを押したときの動作を追加したものです。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:Script>
<![CDATA[
private function button_click():void {
mx.controls.Alert.show( “ボタンが押されました。”, “メッセージ” );
}
]]>
</mx:Script>
<mx:Label text="氏名："/>
<mx:TextInput text="ここに氏名を入力してください"/>
<mx:Button label="送信" click=”button_click()” />
</mx:Application>
アプリケーションを実行して、「送信」ボタンを押すと、次のような小さなポップアップメッセージが表示されます。
これが mx.controls.Alert.show( “ボタンが押されました。” , “メッセージ” ); と書かれたActionScriptコードによる処理です。
追記したActionScriptコードを見てみましょう。左端の数字は行番号を表します。
1: private function button_click():void {
2: mx.controls.Alert.show( "ボタンが押されました。", "メッセージ" );
3: }
上記の1行目では、function button_click() という記述が button_click()というfunction（関数）を定義しています。このfunctionは1行目末尾の { で始まり、3行目の } で終了し、処理として2行目のポップアップ出力を行っています。このように、function (関数)は、「何らかの処理」を行います。
functionは、次のようにイベント発生時の処理として使用できます。
<mx:Button label="送信" click = ”button_click()” />
//clickはクリックされたというイベントを表します。
//button_click()はクリックされた時にbutton_clidk()関数を呼び出すことを表します
この場合、clickがイベント名、button_click()がファンクション名を表します。
つまり、「ボタンにclickというイベントが発生したとき、button_click()というfunctionを実行せよ」という記述です。なお、clickイベントはマウスでボタンを押したときに発生します。
ActionScriptで使用されているその他の要素の意味は次のようになります。
private
このfunctionの有効範囲を表します。
この場合、<mx:Application …> </mx:Application>で囲まれた部分でのみこのfunctionが使用できます。
:void
このfunctionが戻り値（呼び出し元に値を返すこと）を持たないことを宣言します。
FlexとFlash Player
Ⅰ. 全世界のネットユーザがFlexアプリケーションのターゲット
Flexアプリケーションの本体はSWF形式のファイルで、これはFlashアニメーションの実行ファイル形式です。つまり、Flexで作成するアプリケーションはFlashで作成するものと同じフォーマットで、これはFlexがFlashテクノロジーを利用するからです。
よく知られているように、Flash Playerの普及度は世界中のインターネットに接続されたデスクトップパソコンのうち常に100％近い値を維持しています。またFlash PlayerがサポートするOSは、Windows、Mac OS、Linux、Solarisというように、主要なOSを全てサポートします。このことはFlexで作成したアプリケーションは、世界中のほぼすべてのコンピュータで実行可能ということがいえるわけです。
SWF形式のファイルは、ブラウザにプランインされたFlash Playerが実行再生します。つまり、Flexアプリケーションの稼働には、Flash Playerのプラグインが必要です。
Flash Playerの普及度を示すデータは、次の場所ででご覧いただけます。
http://www.adobe.com/products/player_census/flashplayer/
Flexアプリケーションの構成と開発方法
Ⅰ．Flexアプリケーションのソース構成
Flexアプリケーションのソースは、次のいずれかのパターンで作成可能です。
- MXMLのみ
- MXML + ActionScript
- ActionScriptのみ
1．MXMLのみ
最もシンプルな形式になりますが、FlexアプリケーションのUI（ユーザインタフェース）部分はほとんどをMXMLのみで記述できますが、アプリケーションのロジック動作部分はActionScriptで記述する必要があります。したがって、MXMLのみで作成するアプリケーションはUI表示要素 +インラインActionScript のみからなる非常にシンプルなアプリケーションになります。
2．MXML＋ActionScript
最も一般的な開発方法です。Flexアプリケーションの最も効率的で効果的な開発方法は、ビジュアル要素の構築をMXMLで行い、ActionScriptでプログラミングを行うコーディングになります。
3．ActionScriptのみ
MXMLソースファイルはFlexコンパイラによって、すべてActionScriptに変換されてから再びビルドが行われ、SWFが生成されます。このことからも、Flexアプリケーションは最初からすべてのソースをActionScriptで記述できることはわかります。しかしFlex BuilderによるMXMLベースの画面レイアウトの作成効率などを考えると、特に理由がない限り、２．の方法が最善といえます。ActionScriptのみでFlexアプリケーションを作成する際の利点として、アプリケーションのswfファイルサイズを大変コンパクトにできることが挙げられます。
以上のような作成パターンがあるわけですが、MXMLはアプリケーション画面のレイアウトやユーザインタフェース部品の配置を効率良く行うためのもので、ActionScriptは「ユーザインタフェースやシステムが発生するイベントに応じた処理を行う」というように、アプリケーションの動作部分の記述を行うためのものです。これはXML言語がデータ/構造記述言語であり、プログラムの流れを制御する機能を持たないことからも自然なことといえます。
ソース以外のFlexアプリケーション構成ファイルとして、カスタムコンポーネントをパッケージ化したSWCファイルや、カスタムライブラリファイルであるRSL ランタイム共有ライブラリ 、スタイルの設定を行うCSSファイル、およびイメージやサウンドなどのアセットファイルがあります。次の表は、Flexアプリケーションを構成するファイルをまとめたものです。
Flexアプリケーションの構成ファイル
| ファイル形式 | 拡張子 | 説明 |
|---|---|---|
| MXML | .mxml | Flexアプリケーションの標準的なソースファイルです。Flexアプリケーションには、 タグが含まれたメインのアプリケーション MXML ファイルと、カスタム MXML コンポーネントを実装する 1 つまたは複数の MXMLファイルが含まれます。 |
| ActionScript | .as | ActionScriptロジックを外部ファイル化した場合や、ActionScriptカスタムクラス、ActionScriptカスタムコンポーネントのソースファイルになります。 |
| SWC | .swc | SWC ファイルとしてパッケージされたMXML または ActionScript ファイルとして実装されたカスタムライブラリファイルまたはカスタムコンポーネントです。SWC ファイルには、パッケージして複数のアプリケーション間で再利用するコンポーネントが含まれ、アプリケーションの SWF ファイルを作成する際、コンパイル時にアプリケーションに静的にリンクされます。 |
| RSL | .swc | MXML または ActionScript ファイルとして実装してから、RSL（ランタイム共有ライブラリ）として展開されたカスタムライブラリファイルです。RSL はアプリケーションの SWF ファイルとは別にダウンロードされるスタンドアロンの SWC ファイルで、複数のアプリケーション SWFファイルで使用するためにクライアントコンピュータ上にキャッシュされ、アプリケーションに動的にリンクされています。 |
| CSSファイル | .css | カスケーディングスタイルシートファイルを作成するためのテキストファイルテンプレートです。 |
| アセット | .flv、.mp3、.jpg、.gif、.swf、.png、.svg、.xml など | イメージファイル、スキンファイル、サウンドファイル、ビデオファイルなど、アプリケーションが必要とするアセットです。 |
Ⅱ．Flexアプリケーションのビルドと実行
Flexソースからアプリケーションを作成する方法は、
- コマンドラインコンパイラ
- Flex Builder
の2通りがあります。
1．コマンドラインコンパイラ
Flex SDKに含まれるFlexコンパイラを使用してソースファイルから完全なSWF形式を作成できます。
2．Flex Builder
Flex Builderをインストールすると、Flex SDKも同時にインストールされ、Flex BuilderはそのFlexコンパイラを使用します。Flex Builderを使用すると、ソースの作成、コンパイル、実行、テストなど開発に必要な工程のすべてを行うことができます。
Flexアプリケーションの実行
FlexアプリケーションはSWF形式であるため、実行はブラウザで行い、そのためにFlashPlayerがブラウザにプラグインされている必要があります。
スタンドアロンアプリケーションでローカルのSWFファイルを開くケースも考えられますが、Webサーバからダウンロードしてブラウザで稼働させるのがFlexアプリケーションの標準的な実行方法です。
最後に
今回はFlex開発を行う上でのベースとなる、開発言語の基本事項をご紹介しました。次回はイベント処理の基本をご紹介いたします。イベント処理はFlash Platformにおけるプログラミングのもっともベースとなる基本要素で、Flexでもイベントを利用してメッセージングによるオブジェクト間通信をエレガントに実現することができます。
次回のトピック
- イベントの基本概念
- Flexイベントの種類
- Flexイベント処理の基本
- イベントリスナーの作成と確認
