皆様はFlexでの開発の経験はおありでしょうか？
私は一度だけ触る機会があり、その時には華麗で美麗で高機能なアプリが比較的簡単に作れるのでとても感動したのを憶えています。
というわけで今回はFlexの基本に触れてみたいと思います。
・そもそもFlexって何？
Flexとはadobeが開発したもので、Flash技術を用いて高機能なWebアプリケーション開発・Webサイト構築を行うためのフレームワークのことを言います。
バージョン1.0がリリースされたのが2004年のことなので左程新しい技術とは言えず、仕事で使用している方、または個人的にFlexを使って何か開発している方もいるかと思います。
ちなみに現在の最新バージョンは2010年3月にリリースされた4.0です。
・Flexを使用するメリット
前述したとおり、FlexはFlashの技術を流用しているため、htmlベースのものと比べ綺麗で高機能なＵＩをアプリに組み込むことができます。またマルチメディア制御にも長け、画像・音声・動画等の表現をより細かに制御することが可能です。
そして結構重要なのがクロスブラウザ対応が不要ということです。javascriptはJQueryの普及が進むにつれ意識する必要が無くなってきましたが完全に対応できるとは言いがたい状況だと思います。
最近話題になっており、当ブログでも取り上げたこともあるhtml5で登場した新機能に関してもブラウザによって挙動がことなる場合が多々あるみたいです。
(業務アプリならブラウザ固定でいいじゃんという声もありそうですが・・・）
・Flexを使用するデメリット
無い！！・・・
と言いたいところですが自分の経験・他の人の経験を踏まえて考えてみるといくつかあります。
まず学習コストがhtmlベースのWebアプリケーション・サイト開発時よりもかかってしまうということです。冒頭で比較的簡単にとは言いましたがFlexでの開発にはmxml(後述します）とActionScriptが必須となり、mxml、ActionScriptの仕様はhtmlより遥かに複雑であるため習得にはそれなりに時間がかかります。私は他言語の経験もそれなりにありますが基本PHP使いであるため、それなりの処理を書けるようになるまでに苦労したのを憶えています。私が使ったActionScriptのバージョンは4年程前ニリリースされた3.0ですが中・上級レベルと呼べる人はまだ稀少なのではないでしょうか。
・開発に必要なもの
開発には以下のものが必須となります。
- ＦｌｅｘSDK
- ブラウザ
- FlashPlayer(ブラウザのプラグインとして）
- IDE
FlexSDKはadobeが無償提供しているものでFlex開発に必須なコンパイラ等が含まれており、以下のリンクからダウンロードすることが可能です。
adobe open source
ブラウザに関してはお好きにどうぞ。但し、私がＦｌｅｘでの開発に使用していたのはIEとFireFoxです。サンプル用に作ったFlexアプリ(swfファイル)を他のChrome、windowsのsafariでも試しましたが問題なく動作していたので前述した２ブラウザ以外でも大丈夫でしょう。
(Ｆlexアプリをhtmlのobjectタグに埋め込んで使用するのではなく、ブラウザで直接開くことを前提としています。）
FlashPlayerですがIEとFirefoxに関してはプラグインがインストールされていない場合にはadobeの公式ホームページからダウンロードしてください。（ブラウザごとにインストール方法が違います。）
Chrome、safariに関してはインストール不要です。
ＩＤＥ(統合開発環境）に関しては有償・無償があります。有償はadobeが販売しているFlexBuilderというものがあります。詳細に関してはadobe公式ホームページを参照してください。
※FlexBuilderは現在FlashBuilderという名称で販売されているようです。
無償のIDEとしてはSpektIDEとFlashDevelopがあります。SpketIDEはEclipseプラグインとして動作するもの、単体で動作するものの２つがあります。正直Ｆｌｅｘ開発という観点から評価するとどちらも微妙です。SpketIDEはFlexSDKのパスを設定することはできるものの、mxml、ActionScriptのコンパイルができるわけではないためActionScript部分の開 発では役に立ちませんがmxmlの記述には・・・多少は役に立つでしょう。多少というのはmxmlのタグ入力の省力化ぐらいには使えるとは思いますがそれ 以外にはあまり役に立たないように私は感じました。
ＦｌａｓｈDevelopはFlex開発というよりもActionScriptでFlashコンテンツを開発するためのものですので完全なFlex開発用IDEではありませんが、FlexSDKへのパスを設定してあげるとFlashDevelopからmxml、ActionScriptをコンパイルできるようになります。またmxmlの記述に関してもコードアシスト機能等が有り、そこそこ使えるものとなっていますがさすがにVisualStudioのようなGUIベースでのボタン等のコントロールの配置は出来ないようです。(無償にそこまで期待するのは酷か・・・）
今回紹介するサンプル作成にはＩＤＥは使用してません（使用するまでも無いので）。ＳＤＫ、ＩＤＥのインストール手順、操作方法は割愛します。
・開発手順
Flexアプリの開発手順ですが、以下の流れに沿って開発をしていきます。ただ、あくまで自分の経験上の話であるため、別のフローで開発を進める場合もあるかと思いますがご了承ください。
- mxmlを作成
- 必要に応じてActionScriptで処理を実装
- ＦｌｅｘSDKに付属するFlexコンパイラ(mxmlc.exeがそれに該当します）でコンパイル
上記手順に従って簡単なアプリを実際に作ってみます。
仕様としてはアドレスバーに入力されたURL先の画像を読み込み、その画像に対して様々なエフェクトを適用できるようにするというものです。エフェクトの切り替えは別に配置するボタンによって切り替えるものとします。またリセットボタンも配置し、エフェクト後の画像プロパティをリセットできるようにします。
１．mxmlの作成
mxmlというのはFlexアプリの言わば「土台」となるものです。ボタン・画像・音声・ビデオ等は勿論、エフェクト等もmxmlのみで記述することが出来ます。名前の通り、XMLを用いて記述します。以下に私が作成したものを示します。名前はflex_sample.mxmlとします。
<?xml version=”1.0″ encoding=”utf-8″ ?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” verticalScrollPolicy=”on” horizontalScrollPolicy=”off” layout=”vertical” >
<mx:Script>
import mx.events.*;
import mx.controls.*;
import mx.containers.*;
import mx.collections.*;
import mx.effects.*;
/**
* ズーム
*/
public function zoomImg():void
{
var eff:Zoom = new Zoom(gotimg);
eff.zoomWidthFrom = 1.0;
eff.zoomWidthTo = 0.3;
eff.zoomHeightFrom = 1.0;
eff.zoomHeightTo = 0.3;
eff.duration = 1000;
eff.end();
eff.play();
}
/**
* 移動
*/
public function moveImg():void
{
var eff:Move = new Move(gotimg);
eff.xTo = 300;
eff.yTo = 200;
eff.duration = 1000;
eff.end();
eff.play();
}
/**
* フェード
*/
public function fadeImg():void
{
var eff:Fade = new Fade(gotimg);
eff.alphaFrom = 1.0;
eff.alphaTo = 0.1;
eff.duration = 1000;
eff.end();
eff.play();
}
/**
* シーケンスエフェクト
*/
public function seqEffImg():void
{
var eff:Sequence = new Sequence();
var eff1:Zoom = new Zoom(gotimg);
var eff2:Move = new Move(gotimg);
var eff3:Fade = new Fade(gotimg);
eff1.zoomWidthFrom = 1.0;
eff1.zoomWidthTo = 0.3;
eff1.zoomHeightFrom = 1.0;
eff1.zoomHeightTo = 0.3;
eff1.duration = 1000;
eff2.xTo = 300;
eff2.yTo = 200;
eff2.duration = 1000;
eff3.alphaFrom = 1.0;
eff3.alphaTo = 0.1;
eff.addChild(eff1);
eff.addChild(eff2);
eff.addChild(eff3);
eff.end();
eff.play();
}
/**
* パラレルエフェクト
*/
public function palEffImg():void
{
var eff:Parallel = new Parallel();
var eff1:Zoom = new Zoom(gotimg);
var eff2:Move = new Move(gotimg);
var eff3:Fade = new Fade(gotimg);
eff1.zoomWidthFrom = 1.0;
eff1.zoomWidthTo = 0.3;
eff1.zoomHeightFrom = 1.0;
eff1.zoomHeightTo = 0.3;
eff1.duration = 1000;
eff2.xTo = 300;
eff2.yTo = 200;
eff2.duration = 1000;
eff3.alphaFrom = 1.0;
eff3.alphaTo = 0.1;
eff.addChild(eff1);
eff.addChild(eff2);
eff.addChild(eff3);
eff.end();
eff.play();
}
/**
* 画像プロパティーリセット
*/
public function imgPropReset():void
{
gotimg.alpha = 1.0;
gotimg.x = 0;
gotimg.y = 0;
gotimg.scaleX = 1.0;
gotimg.scaleY = 1.0;
}
/**
* 指定URL先の画像を取得
*/
public function getUrlImg():void
{
gotimg.source = imgurl.text;
imgUrl = imgurl.text;
}
</mx:Script>
<mx:HBox>
<mx:Label text=”画像URL:” /><mx:TextInput id=”imgurl” text=”" /><mx:Button label=”取得” click=”getUrlImg();” />
</mx:HBox>
<mx:Canvas width=”300″ height=”300″ backgroundColor=”#ffffff” autoLayout=”true”>
<mx:Image x=”0″ y=”0″ id=”gotimg” source=”" />
</mx:Canvas>
<mx:HBox>
<mx:Button label=”ズーム” click=”zoomImg();” /><mx:Button label=”移動” click=”moveImg();” /><mx:Button label=”フェード” click=”fadeImg();” /><mx:Button label=”シーケンスエフェクト” click=”seqEffImg();” /><mx:Button label=”パラレルエフェクト” click=”palEffImg();” />
</mx:HBox>
<mx:Button label=”リセット” click=”imgPropReset();” />
</mx:Application>
とりあえず使用しているタグの説明をします。
mx:Applicationタグはhtmlで言うbodyタグに相当し、必須のタグです。上記サンプルでは使用していませんがFlexアプリのロード完了直後に実行する関数(厳密には違いますが・・）を指定することも可能です。ロード完了時点でcreationCompleteというイベントが発生するのでcreationComplete=”(実行関数)”としておけば、指定された関数がFlexアプリのロード完了時点で実行されます。
mx:Scriptタグはhtmlでいうscriptタグに相当し、タグ内にはActionScriptを記述することが可能です。サンプルでは画像の取得・画像に対するエフェクトの適用のためのActionScriptが記述されています。ちなみに最初の方でimportされているパッケージmxはFlexSDK提供のパッケージを指します。
mx:HBoxはタグ内のコントロールを水平配置する機能を持ちます。
mx:Labelは編集不可能な文字列の表示に使用します。
mx:TextInputはhtmlでいうinput(type=text)に相当し、任意の文字列を入力可能なコントロールです。今回は画像URLの入力に使用しています。
mx:Buttonはボタンです。ボタンクリック時のイベントをclickイベントとしてキャプチャーし、任意の関数を実行させることが可能です。
mx:CanvasはCanvasタグ外部と隔離された領域を定義するためのものです。ここでは画像を絶対座標配置し、かつ他のコントロールと位置が重ならないようにするために使用しています。
mx:Imageはsourceプロパティに指定されたURLの画像を読み込み表示するためのものです。コンパイル時に内部に画像データを埋め込む方法もありますが今回は外部のイメージを読み込んで表示することを前提としているため、詳細は割愛します。
２．必要に応じてActionScriptで処理を実装
必要に応じてActionScriptで処理を実装と有りますが個人的にはほぼ必須のような気がします。とりあえずサンプル上に記述されているActionScriptの説明を簡単にします。Zoom、Move、Fadeクラスはコンストラクタの引数として渡したコントロールに対してそれぞれズームイン・ズームアウト、座標移動、フェードイン・フェードアウトエフェクトを適用するためのクラスです。使い方としてはエフェクト開始前・終了後のエフェクト適用対象コントロールのプロパティを設定し、end(),play()を実行するだけです。Sequence、Parallelクラスは複数エフェクトを逐次適用、並列適用させるためのクラスです。ここではActionScriptの基礎に関しては割愛します。
３．コンパイル
完成したmxmlをFlexアプリへとコンパイルします。Ｄｏｓ窓を開いてもらい、作成したmxmlの配置してあるディレクトリまで移動してください。移動したら以下のようにしてコンパイルを実行します。
mxmlc sample_flex.mxml
環境変数PATHにFlexSDKへの絶対パスが設定されていない場合には実行時にmxmlcの配置場所を絶対パスで指定する必要があります。上記実行後、同一ディレクトリにsample_flex.swfが作成されているはずです。コンパイル後のものを以下に掲載します。
画像URLに適当な画像のURLを入力して、「取得」ボタンを押すとmx:Canvasで定義された白の領域に取得画像が表示されます。その後、「ズーム」等の適用したいエフェクトのボタンを押すと表示されている画像に対してエフェクトが適用されます。
・最後に
どうでしょうか？今回紹介したサンプルではＦｌｅｘアプリを語るには微妙な部分もありますが、htmlベースのものよりは手間が多少かかるとは言え、比較的簡単に高機能なＷｅｂアプリケーション、Webサイトを開発できそうだということが分かっていただけたかと思います。これは良さげだなと思った方は是非一度試してはいかがでしょうか？
(※今回の記事は執筆者の経験を元にして書かれたものです。ですので間違えがあるかと思いますが、遠慮なく指摘していただければと思います。）
![人気企業や優良企業の就活情報を管理できる[就活予定帳！]](http://a3.mzstatic.com/us/r1000/075/Purple/28/53/37/mzl.rgxptjxl.320x480-75.jpg)
![iPhoneやGoogleカレンダーとも同期[就活予定帳！]](http://a2.mzstatic.com/us/r1000/111/Purple/32/07/21/mzl.owqmtylo.320x480-75.jpg)
