はじめに

FlexとRIAに関する基本知識から開発方法の基礎を習得していただくことを目的とする連載です。対象とする読者は次のような方です。

• デザイナーでFlex、RIAの概要や開発方法を知りたい方
• PHP、Perl、J2EEなどのWebアプリ開発者でFlex開発に興味がある方
• FlashやDreamweaverでサイト構築をしている方でFlex開発に興味がある方

つまり、プログラミングの経験を問わず、RIAの概念、Flexの基本を理解したうえで、シンプルなFlexアプリケーションを作成できることを目標とします。

第２回目はプログラミングの経験がない方のために、最低限必要な知識を身につけていただくことを目指して、Flex開発のためにもっともベーシックとなるトピックをご紹介します。

必要なソフトウェアとファイル

• Flex SDK
• Flex Builder3

必要な前提知識

「これからはじめるRIAとFlexプログラミング　～第1回　RIAの基本とFlexの優位点～」をお読みいただき、RIAの基礎概念とFlexの概要を把握してください。

学習できること

• ソースファイルとプログラム開発の基礎知識
• コンパイルの基本概念とFlexコンパイラ
• コンポーネントの基本概念とFlexコンポーネント
• Flex Builderでコンポーネントを使う
• ライブラリの基本概念とActionScriptクラスライブラリ
• テストとデバッグ

1. ソースファイルとFlexコンパイラ

ここでは、プログラミング用語や知識の基本的な事柄を確認します。Flexで実用的なアプリケーションを作成するには、プログラミングの知識が豊富であるほど有利です。

アプリケーション開発には必ず「ソースファイル」とか、「プログラムソース」呼ばれるテキスト形式のファイルを作成します。単に「ソース」と呼ぶこともあります。

使用するプログラム言語の文法に従ってソースファイルにプログラムを記述してゆく作業が、プログラム開発ということができます。

Ⅰ．Flexソースファイルの例

ソースファイルの例を見てみましょう。最もシンプルなFlexアプリケーションのソースファイルは次のようになります。このFlexソースファイルはMXMLというプログラム言語で記述されています。このソースをテキストエディタで入力してコンパイルすれば、最もシンプルなFlexアプリケーションが完成します。コンパイルする前にファイルとして保存する必要があります。MXMLソースの場合、「 index.mxml 」のように「 .mxml 」という拡張子を付けて保存します。

<?xml version="1.0" encoding="UTF-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

 Flexアプリケーションのソースファイル形式は次のような拡張子で保存します。

開発言語	拡張子
Mxml	.mxml
ActionScript	.as

Flexアプリケーションソースファイルの拡張子

II．コンパイルとコンパイラ

コンパイル

アプリケーションがソースファイルというテキスト形式のファイルで作成されることがわかりましたが、テキストファイルで記述したプログラムは、通常そのままでは動作しません。プログラムソースの文法をチェックして、SWF形式に変換するために、「コンパイル」という処理が必要になります。

Flexコンパイラ

このコンパイル処理を行う専用のプログラムが「コンパイラ」と呼ばれます。また、コンパイルを行って実行できる形式のファイルを生成するまでの一連の処理を「ビルド」と呼びます。

Adobeでは、Flexアプリケーションをコンパイルしてビルドまで行う「Flexコンパイラ」を無償で提供しており、このFlexコンパイラでソースのビルドを行うことができます。

Flexソースファイルは、Flexコンパイラによってビルドされると、最終的にSWFファイルが生成され、Flash Playerで実行可能な形式になります。このSWFファイルがFlexアプリケーションの本体です。

図：コンパイルとビルドのイメージ

 Flexコンパイラはmxmlcという名前で、SDKフォルダは以下のbinフォルダ に格納されています。 ビルドはコマンドラインで > mxmlc flexソースファイル　と入力して行います。

2. コンポーネント – Component

Ⅰ．コンポーネントの一般概念

ソフトウェアの世界でコンポーネントという言葉は、「再利用可能なプログラム」を表し、別のプログラムに部品として組み込める形態のプログラムをさします。

例えば、あるアプリケーションを作成して「ファイルを開くためのダイアログを表示する」という処理を記述したとします。別のプログラムでも「ファイルを開く」処理を行う場合、最初に作成したプログラムの「ファイルを開くためのダイアログを表示する」部分をコンポーネントとして切り出しておくと、別のプログラムでそのまま使用でき、開発の手間が省けます。

図：コンポーネントのイメージ

コンポーネントは他のプログラムでも再利用可能な形の機能プログラムです。Flex開発では、MXMLやActionScriptを使用して再利用可能なコンポーネントを作成したり、Adobeのエキスパートや、他のFlex開発者が作成したコンポーネントを自分のアプリケーションで使用することができます。

また、自分で作成したアプリケーションの中に使い回しできそうな部分があったらコンポーネントとして切り出しておけば、別のアプリケーションでも利用できるようになります。

II．Flex Builderでコンポーネントを使う

Flex Builderにはユーザインタフェース画面を編集するためのデザインエディタがあり、豊富なコンポーネントが用意されています。次の図は、Flex Builderのデザイン画面です。ブラウザ上で実行されるユーザインタフェース画面を、コンポーネントを配置することにより、ビジュアルに作成することができます。

図：Flex Builderのデザイン画面

3. ライブラリ – Library

Ⅰ．ライブラリの一般概念

「ライブラリ（library）」は、コンポーネントと同様に「再利用可能なプログラム」を指しますが、一般的には、コンポーネントよりもソースレベルで利用される、関数レベルの機能集合を指します。

ライブラリという形態は古くからソフトウェア業界で使用され、再利用可能な関数レベルのプログラムの集合をさします。

ライブラリは、コンパイル時に使用されるタイプと、実行時に使用されるタイプに分けられますが、特に実行時に使用されるライブラリは、UNIXやWindowsでは「共有ライブラリ」や「ダイナミックライブラリ」という名称でOSを構成する主要な要素になっています。

Flexの場合、コンパイル時に使用されるタイプはSWC、実行時にはRSLというタイプのライブラリが使用できます。

II．クラスライブラリとActionScript Class Library

ActionScriptやJavaなどのプログラミング言語では、プログラムを機能ごとに「クラス」という単位にまとめて作成してゆきます。そのため、これらのプログラム言語で再利用することを目的として作成されたライブラリは、「クラスライブラリ」と呼ばれます。

Adobeでは、Flash、Flex、AIRアプリケーション開発者用に「ActionScript Class Library」を提供しており、Flexの機能はこのライブラリに集約されています。開発者はこのライブラリから必要な機能を選択してプログラムを構築してゆくことになります。

Flexアプリケーションを作成する場合、MXMLで記述したソースコードは、ActionScript Class Libraryを利用するActionScriptコードに変換されます。この変換作業を行うのは、前節でご紹介したFlexコンパイラです。またプログラマがActionScriptコードを書く場合、このActionScript Class Libraryを直接利用することになります。

Flex開発を行う際に使用するActionScript Class Library の詳細は、「Flexリファレンスガイド」として公開されています。たとえばFlex3の場合、次のURLで日本語版が参照可能です。 http://livedocs.adobe.com/flex/3_jp/langref/index.html

図：Flexリファレンスガイド

 Flex2などの旧バージョンのリファレンスも引き続き公開されています。

4. プログラムエラーとデバッグ

プログラムを作成する際に越えなければならない、エラーに関するハードルが2つあります。ひとつ目は文法エラーとも呼ばれるミス（文法ミス）で、2つ目はプログラムの処理上のミスで、論理（ロジック）ミスとも呼ばれます。後者はいわゆる「バグ」と呼ばれるもので、時には実行時にプログラムが異常終了することにもつながります。

Ⅰ．文法ミス

文法ミスはスペルミスや構文の誤りによる間違いで、コンパイラによりチェックされるミスです。

プログラムを書き始められる方はまずこのエラーに悩まされます。文法ミスがあるうちは、プログラムの実行ができません。例えば次のActionScriptコードは文法ミスでコンパイルできません。

private function runAS():void {
　　var i:Int;
　}

※上記のActionScriptプログラムでは、「int」 と書くべきところを「Int」 と書いているため、文法エラーになってしまいます。しかし、このようなエラーはFlex Builderのコード補完機能により未然に防げるようになっています。

Flex Builderでは、下図のようにエラーが一目でわかるようになっています。文法エラーが見つかった個所は、「問題」ペインに表示されるので、修正を行います。

図：Flex Builderの文法エラーチェック

Ⅱ. ロジックミスとプログラムテスト

ロジックミスはプログラムの処理上のミスで、いわゆる「バグ」と呼ばれるプログラムエラーになります。文法ミスをすべて修正し、実行できるようになるとこの難関が待ち受けています。プログラムの「テスト」とは、このバグを見つけだして修正する作業です。

簡単なバグの例を見てみましょう。次のActionScriptプログラムでは、2つの金額の合計値を元に税込み価格を計算しようとしていますが、実行結果からわかるように、正確に合計金額の計算を行いません。これは明らかにロジックミスです。（ちなみに、プログラム中で行っているように、ActionScriptでは数値演算のかけ算は、「 * 」 という記号を使用します。）

private function logicError():void {
trace( "100円の品と200円の品のお買い上げ合計は税込みで" 
+　( 100 + 200 * 1.05 ) + "円です。" );
}

実行結果：　100円の品と200円の品のお買い上げ合計は税込みで310円です。

※上記のActionScriptプログラムでは、「100+200*1.05」 という計算式は、数学と同じように 「100+(200*1.05)」と計算されます。そのため、上記の計算方法をショッピングカートで行うと、いつも損をする店になってしまいます。

正しくは次のように足し算の部分に( ) をつけて優先的に計算を行う必要があります。

private function logicError ():void {
trace( "100円の品と200円の品のお買い上げ合計は税込みで" 
+　( ( 100 + 200 ) * 1.05 ) + "円です。" );
}

実行結果：　100円の品と200円の品のお買い上げ合計は税込みで315円です。

最後に

今回はFlex開発を行う上で必要なプログラミングの概念とプログラムエラーについてご紹介しました。次回はFlexアプリケーションの開発言語であるMXMLとActionScriptの基本事項をご紹介いたします。

次回のトピック

• XMLの超基本とMXML
• ActionScriptの基本概念
• FlexとFlash Player について
• Flexアプリケーション開発の流れ

著者について