Flash/Flex ページ 3 ｜Webシステム開発の株式会社フラッツ

こんにちは皆さん。お久しぶりです。佐藤です。

前回の記事では、FlashとFlex2の違いについて触れ、Flex2の開発にはmxmlとActionScriptという二つの言語を使うことを紹介しました。今回はFlex2で、実際に小さなアプリケーション制作に挑んでみたいと思います。実際のコードと生成されるswf(ショックウェーブファイル)を見比べながら、Flex2の面白さを少しでもお伝えできれば、と思っています。

ところで。

話は変わりますが、もうすっかり秋ですね。芸術の秋、読書の秋、スポーツの秋…、いろいろありますが、皆さんにとって｢秋｣はどんな季節でしょうか？僕にとってはやはり｢食欲の秋｣です。暑くて暑くて食欲の湧かない夏を超えて、過ごしやすい気温になったと思えば、秋魚やら、きのこやら、新米やら。僕を太らせようとする何者かの陰謀だとしか考えられません。かつてはあんなにスリムだった僕のお腹も、椅子に座るたびにベルトの上で贅肉(ゼイニク)達が｢こんにちは｣と、その存在を主張してくる始末です。

そんな訳で今日は身長と体重を入力すると、理想体重を何Kgオーバーしてしまっているかを自動計算し表示するようなアプリケーションを制作することにします。ダイエットといえば、毎日ジョギングして筋トレして･･･、いやいやいや、それよりもまずは、しっかり自分の身体を自覚して、この季節においしいものを食べ過ぎてしまわないように自分を戒めることが先決です。

もちろん多くの皆さんは、日々運動を怠らず問題は無いものと思われますが、とりあえず今回は僕のお腹に免じて、是非お付き合いください。

今回は、
* 開発環境の導入 : Flex Builder 2の入手
* 初めてのFlex Builder 2 : Flex Builder 2 の基本的な使い方
* Flex2アプリケーションの作成 : mxmlとActionScript3.0入門
* アプリケーションサンプル

といった流れで説明を進めたいと思います。

開発環境の導入

まずはFlex2アプリケーションを制作するに当たり、最低限必要なものはコンパイラです。コンパイラさえあれば、mxmlやActionScriptからswfを生成することが可能です。コンパイラは、Adobe社WEBサイトより無償でダウンロードすることができます。このコンパイラさえあれば、mxmlやActionScriptをコンパイル可能です。

しかし、出来ることならば効率の良い開発を目指して、個人的にはFlex Builder2 という有償の開発環境を利用することをおススメします。これは、Javaの開発環境であるEclipseのプラグインとして提供されており(スタンドアロン版もあります)、EclipseでのJava開発とほぼ同様にFlex2の開発を行うことが出来ます。コード補完機能付きのエディタやドラッグ＆ドロップによるレイアウトの調整等、開発効率を高める様々な機能があります。Flex Builder 2 は試用期間として30日間は無料で利用することが出来ますので、是非見て触ってご確認ください。

Adobe社製品ページ(コンパイラ・体験版のダウンロードもこちらから)

なお今回は、Flex Builder 2 を利用した場合として、開発の工程を説明します。Flex Builder 2は上記リンク先のページ下部にある｢Flex Builder 2無償体験版｣からダウンロードできます。ダウンロードが完了したら画面にしたがってインストールを進めてください。

初めてのFlex Builder 2

図1

インストールが終了したら、Flex Builder 2を起動してください。図1のような画面になっていると思います。Flex Builder 2 による開発の場合はまず｢プロジェクト｣を作成しなければなりません。プロジェクトは、いくつかの種類がありますが今回は｢Flex2プロジェクト｣を作成します。メニューバーから、「ファイル」->「新規」->「Flexプロジェクト」と選択してください。

図2

すると図2のようなダイアログが現れますので、ここでは、｢ベーシック｣を選択し次へ、プロジェクト名を適当に決めたら、｢終了｣ボタンを押してください。これでプロジェクトが生成されました。

図3

図3のような画面になったでしょうか？これが、何も無い状態のFLex2アプリケーションです。mxmlファイルには<mx:Application>タグが既に自動で生成されていることと思います。これが、Flex2アプリケーションにおける土台になります。

mxml ファイルには、コードを直接編集するソースビューと、マウス操作で編集を行うデザインビューのどちらでも開発を行うことができます。切り替えは図4に示すボタンで行うことができます。ひとまずデザインビューに切り替えてみましょう。

図4

Flex2アプリケーションの作成

インターフェースの作成

図5

: 図6

まずは、インターフェースを作りましょう。先ほどのようにデザインビューにした状態で、初期状態であれば、図５のように左下にコンポーネントウインドウがあるはずです(無ければメニューバーから「ウインドウ」->｢コンポーネント｣)。コンポーネントウインドウから必要なコンポーネントをドラッグ＆ドロップするだけで、画面上に配置することができます。図6を参考にコンポーネントを配置してみてください。左側の上から、｢Labelコンポーネント｣｢NumericStepperコンポーネント｣｢Labelコンポーネント｣｢TextInputコンポーネント｣です。真ん中の棒のようなコンポーネントは｢VRuleコンポーネント｣で、右側には上から｢TextAreaコンポーネント｣「Buttonコンポーネント」を配置しています。サイズや位置はマウス操作で調整可能です。

次にプロパティを設定します。初期状態なら右下にプロパティウインドウがあるはずです(無ければメニューバーから「ウインドウ」->「プロパティ」)。各コンポーネントをクリックし選択することでプロパティウインドウが対応する内容に切り替わります。まずは、一番左上の「Labelコンポーネント」のテキストプロパティを「身長」と設定して見てください。Labelコンポーネントに表示される内容がテキストプロパティの内容に置き換わるはずです。もう一方の「Labelコンポーネント」のテキストプロパティには「体重」、さらに「Buttonコンポーネント」には「Check!」と設定しておいてください。残りのコンポーネントにはIDプロパティを設定します。｢NumericStepperコンポーネント｣には「myheight」、｢TextInputコンポーネント｣には「myweight」、「TextAreaコンポーネント」には「result」を設定してください。さらにもう一つ、｢NumericStepperコンポーネント｣のデフォルトは1~10の範囲となっています。図7のように、プロパティを編集してください。

:図7

デザインビューでの編集は、きちんとソースビューにも反映されます。ソースビューに切り替えて、確認をしてみてください。以下のようになっているはずです(コンポーネントの順番やxyの座標は違うかもしれません)。

<?xml version="1.0" encoding="utf-8"?>

<http://www.adobe.com/2006/mxml" layout="absolute" width="230" eight="150">

    <mx:Label x="10" y="10" text="身長"/>

    <mx:NumericStepper x="10" y="36" id="myheight"/>

    <mx:Label x="10" y="66" text="体重"/>

    <mx:TextInput x="10" y="92" width="65" id="myweight"/>

    <mx:VRule x="83" y="10" width="20" height="130"/>

    <mx:TextArea x="111" y="9" width="110" height="105" id="result"/>

    <mx:Button x="157" y="122" label="Check!"/>

</mx:Application>

コレで見た目は出来上がりです。あとは、機能を追加すれば完成になります。

機能の作成

機能は、ActionScriptで書きます。以下のコードを<mx:Application>の内側に挿入してください。

    <mx:Script>

        <![CDATA[

            public function CalcIdealWeight(mheight:Number, mweight:Number):String{

                var idealWeight:Number = Math.pow(mheight/100, 2)*22;

                var overWeight:Number = mweight - idealWeight;



                var resultText:String = "あなたの理想体重はnn" +

                                        Math.round(idealWeight) + "Kgn";

                if(overWeight > 0){

                    resultText += Math.round(overWeight) + "Kg のオーバー..."

                }

                return resultText;

            }

    ]

    </mx:Script>

mxml ファイル内では、ActionScriptは<mx:Script>タグ内に書かなければなりません。ActionScriptというプログラム言語について深く掘り下げるのは今回の主旨ではないため深くは説明しませんが、「CalcIdealWeight」と言う名前の関数を定義してあります。引数に身長と体重を渡すことで、計算結果を反映したテキストを返す関数です。

ちなみに、理想体重の計算方式は、BMI(身長×身長×22)を用いています。参考:Wikipedia：標準体重

インターフェースと機能のリンク

先ほどActionScriptで関数を作成しましたが、この関数をどこかで呼び出さなくてはなりません。ソースビューで、<mx:Button>タグを以下のように修正してください。

<mx:Button x=”157” y=”122” label=”Check!” click=”result.text = CalcIdealWeight(myheight.value, Number(myweight.text)) "/>

これで、ボタンクリックで関数が呼ばれます。｢NumericStepperコンポーネント｣の値にはID名.valueで、｢TextInputコンポーネント｣の値には、ID名.text（ただしこれは文字列なので、Number()で数値に変換しています。）でアクセスし、「TextAreaコンポーネント」の表示を操作します。

アプリケーションサンプル

さて、これで本日の目標であったアプリケーションは作成できました。

そういえば、最近は女性の技術者も多いそうです。女性の体重をおおっぴらに表示するわけにはいきません。ソースビューからTextInputコンポーネントのタグを以下のように修正しておきましょう。

<mx:TextInput x=”10” y=”92” width=”65” id=”myweight” displayAsPassword=”true "/>

予定通りならば、以下のようになっているはずです(FlashPlayer Ver9以上が必要です)。

width="230" height="150" name="dieting" align="middle"

play="true" loop="false" quality="high"

allowScriptAccess="sameDomain"

type="application/x-shockwave-flash"

pluginspage="http://www.adobe.com/go/getflashplayer">

上のサンプルにはいくつか機能が追加されています。ソースはこちらです。気になる方はご覧下さい。

最後に

いかがだったでしょうか？Flex2は確かに未だ知名度が低く、情報も少ないため、今回初めてFlex2に触れたと言う方にとっては、きっとわからない事だらけだったと思います。しかし、ユーザーインターフェースの制作に関しては非常に強力なコンポーネント群を持っていることや、ActionScriptとの連携によって複雑な処理もこなす事が可能であるというメリットがあり、
AJAXを使ったものと比べても比較的容易にWebアプリケーションのリッチなユーザインターフェースを制作することができます。

今回の記事がみなさんの足がかりにでもなれば幸いです。それでは、また次回。

こんにちは皆さん。佐藤です。

今日は｢Flex2｣について、説明をしたいと思います。

情報収集を怠らない皆さんならば、最近｢Flex2｣というFlashに似た何かが世に出たらしいぞ、と、そんな噂は耳にしているかとは思います。しかし、Flashとどう違うのか、そもそも Flex2とは一体なんなのだ、と、ヤキモキされている方も少なくないのではないかと思います。

Flex2

｢Flex2｣とは開発ツールです。Flex2を利用する事で、FlashPlayer9以上に対応する様々なWEBアプリケーションを制作することが可能です。

ちなみに、WEBサイトにあるアニメーションを一言で｢Flash｣と言っても、すでに意味が通るほど一般化しましたが、この｢Flash｣と言う言葉も本来は開発ツールを表す言葉です。

Flex2 について｢Flashみたいなものでしょ？｣と、一言で片付けてしまった方もいるかもしれません。確かに、Flex2、Flash、どちらの開発ツールを使用したとしても、最終的に生成されるものは、swf(ショックウェーブファイル)というファイルです。ユーザー側から見れば、Flex2で開発されようが Flashで開発されようが、特に違いはありません。

しかし、開発側から見れば、いくつもの違いがあります。

Flex2とFlashの違い

細かい機能としては色々な違いはありますが、一言でその違いを言うならば、Flashはアニメーション製作に特化したツールであり、Flex2はアプリケーション開発に特化したツールであるということです。

Flash

FlashはActionScriptと呼ばれるプログラム言語を使用することで、アニメーションの中に様々なトリックを仕込むことが可能です。また、ドローイングソフトとしての機能もあり、絵を描くことも外部から画像(や動画)を取り込むことも可能です。そして、マウス操作で簡単にレイアウトすることができます。さらに、ぼかしやグロウなどのエフェクト、モーションやトゥイーン等、アニメーションをより洗練するためのたくさんの機能を持っています。

アニメーションを制作する際には、非常に高機能なツールであることは間違いありません。

しかし、Flashでアニメーションではなく、何らかのアプリケーションを制作したい場合には不便な部分も出てきます。Flashの開発ではムービークリップと呼ばれる時間軸を持ったオブジェクトが基本となります。しかし、多くのアプリケーションでは、ユーザーからのアクションに対して処理が必要であり、時間軸は無用です。

またFlashでは、ActionScriptでギミックを実装する際にそのプログラムは、時間軸上かオブジェクト上に記述します。これは複雑な処理を行おうとするプログラマにとっては非常に扱いづらいものです(慣れてくればまた違うのかも知れませんが)。

例えばFlashの場合、メインムービークリップ上にムービークリップ(オブジェクト)とボタン(オブジェクト)が配置されているとします。ボタンが押された時の処理は、ボタンに直接記述できます。しかし、メインの時間軸上にも記述することは可能です。さらに、ムービークリップ上に記述することもそのムービークリップの時間軸上に記述することも出来ます。どこにでも書くことが出来るというのは、自由度が高い、と言えば聞こえが良いのですが、様々な場所に分散されて記述されたプログラムを一連のシステムとして稼動させるためには並々ならぬ努力(デバッグ)が必要です。なにより、プログラマとデザイナの作業範囲が密接に絡んでしまうことも問題です。

Flex2

一方でFlex2では、開発の基本はApplicationコンテナになります。Applicationコンテナには、様々なコンポーネントを配置することが出来ます。これらのコンポーネントは、ソート機能を装備したテーブルやロード状況を示すプログレスバーなどの多様なものが利用可能で、もちろんそれらをカスタマイズすることもできます。Flex2ではこれらのコンポーネントをマウス操作で画面上に配置することで自動的にmxml(xmlの拡張言語)が生成されます。内部的な処理には、ActionScriptを利用できます。

内部の処理はプログラマが他のオブジェクト指向型言語と同様のスタイルでActionScriptを使って記述することができます。さらにその内部処理をデザイナーがmxmlを使って呼び出すことが出来ます。Flex2を使う最も大きな利点としては、ActionScriptとmxmlという構成によってデザイナーとプログラマの作業範囲の切り分けが容易だという事かもしれません。

Flashのバージョンについて

ここまで｢Flash｣という表現で説明を続けてきましたが、これは現時点(2006年10月)でリリースされている最新のFlashであるFlash8を念頭に説明を行っています。Flex2では、ActionScript3.0が使用可能なのに対し、Flash8ではActionScriptの使用可能なバージョンは2.0までです。現時点で実際に制作を行なう場合にはこの点も考慮に入れた上で、開発ツールを選ぶ必要があります。(次バージョンのFlash9ではActionScript3.0を使用可能との事です。これは、すでにアルファ版で機能追加されています。)

Flex2による開発

ここで実際にFlex2で小さな小さなアプリケーションを開発してみたいと思います。

そう思っていましたが、ここまでずいぶん長くお話してしまいました。皆さんもお疲れのことだと思います。と、いうことで何か実際にmxmlとActionScriptのサンプルと共にお見せするのは次回にしたいと思います。

Flex2というものに少しでも興味を持っていただければ幸いです。それでは、また次回。