Macromedia Flex を利用したリッチインターネットアプリケーションの構築: Flash ユーザーからの展望

Flash ユーザーが Flex に出会い、Flex がFlash ユーザーに出会う。まだ、互いのことはよく知らないにしても、共通点は多々あります。いずれは素晴らしい関係を結ぶ始まりかもしれません。

Flash Player を開発プラットフォームとしたリッチ インターネット アプリケーション構築が勢いを増すのを目の当たりにするのは、個人的に胸を躍らされるものがあります。まだ初期段階にあるとはいえ、EMI の film & TV Music ソングライセンシングエクストラネット (http://www.emifilmtv.com) や Mixed Grill 製作による Intro カンファレンスネットワーキングアプリケーション (http://www.intronetworks.com) を見ると、何かが大きく動いているような感じがします。また、Macromedia Flex がリリースされたことで、まったく新しいチームメンバーが結集するような気がし始めています。

『「タイムライン｣と言うだけで逃げ出さないで！』

経歴を簡単にお話すると、私はバージョン 3 (1998 年頃) 以来の Flash ユーザーで、それ以来、私の Flash への思い入れに変わりはありません。初めて Flash に触れた時点で、私はすでに沢山のマルチメディア コンテンツ制作の経験を積んでいたので、タイムラインやライブラリといった概念を理解し、これらを利用することは難解ではありませんでした。コンピューターサイエンスのトレーニングを修了した後は、おそらく本来タイムラインやライブラリといった概念の使用が想定されていなかったようなところで、これらを利用することに力を注いでいましたが、次第に、タイムラインやライブラリをアプリケーション開発に利用する方法を編み出していくようになりました。例えば、フォームの各状態はタイムライン上にフレームを確保することで作成し、個々のクラスはライブラリ内のシンボルとして収め、さらには、ライブラリはクラスのブラウザに見立てて使用するようになっていました。アプリケーションデベロッパーであれば誰もが使いたくなるような、なにか偉大なものに直面しているかのようにさえ感じ始め、とても見栄えの良い、リッチでインタラクティブなアプリケーション (少なくとも私はそう感じていました) を開発するようになっていきました。そこで、よりリッチなアプリケーションを構築するための素晴らしい新手法に同士を連れ込みたくなり、私のオーサリングコンセプトを知り合いの Java デベロッパーや C++ デベロッパーに見せることにしました。

しかし、このオーサリングコンセプトを見たほぼ全員は、私に対してクレイジーだと感じていました。

ただし、彼らは必ずしも悪い意味で「クレイジー」と感じたのではなく、「なるほど、つまり、君はマッドサイエンティストというわけか」といった軽い気持ちでこの感想を抱いていたのです。しかし、Flash ユーザーの皆さんがご存知のとおり、Flash で作成したアプリケーションは断然に見栄えが良い上に、より広範にデプロイでき、彼らが簡単に無視できるものではありませんでした。ところが、私が Flash を起動し、このこよなく愛するオーサリングツールを使用してアプリケーションを開発する工程を見せると、彼らはたいてい、「驚きの沈黙」や「恐怖」に似た反応を示しました。

このような反応こそが問題なのです。今増え続ける、私を含めた数多くのFlash パワー ユーザーは、マルチメディアデザイナーの繊細さをアプリケーション開発の領域に持ち込むことによって、魅力溢れ、しかもカリスマ性さえを持ったユーザーインタラクションが導き出されることを確信しています。しかも、Flash Player には、新たな言語コンセプトや構文構成が続々と追加されてきており、コード指向のユーザーでも、ありとあらゆる事柄をほぼすべて実現することができます。しかし、Flash コミュニティに属さない多数のハードコアデベロッパーたちにとっては、我々が達成し得た事柄は、おおよそ近づきがたい存在だったといえます。彼らにとって、タイムラインやライブラリといった概念は簡単に習得し難く、しかも Flash の環境には、通常のソフトウェアエンジニアにとって馴染みのない機能が多数収録されています。この馴染みのなさは、その規模を問わずに、苛立ちや葛藤の原因となってしまっています。はっきり言って、Flash は威圧的な存在なのです。このことは、特に単にコードを記述することに慣れているパワーデベロッパーに関して言えます。

単にコードを記述する

Macromedia Flex はまさにこのような問題を解消するために開発されています。Flex を利用すれば、Flash アプリケーションの全体 を EMACS や BBEdit でさえ構築できます。新しい開発環境を習得する必要や、タイムラインとの格闘、さらには、ライブラリに惑わされることは、すべて皆無です。デベロッパーの立場から見た場合、まずしなければならないのは MXML、ActionScript、コンポーネントの 3 つの基礎を習得するだけです。しかも、これら 3 つは、すべてデベロッパーにとって馴染みやすいものばかりです。

非常にシンプルな MXML アプリケーションの例を見てみましょう (図 1 参照)。アプリケーションのコードは以下の通りです。

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application width='200' height='170' 
        xmlns:mx="http://www.macromedia.com/2003/mxml">
    <mx:Script>
    <![CDATA[
        function bPressed()
        {
             alert("Hello World");
        }
    ]]>
    </mx:Script>
    <mx:Button height="40" label="Here's a Button!" 
             click="bPressed()"/>
</mx:Application>

図 1. 史上最強 (?) の Flex アプリケーションのスクリーンショット

このアプリケーションには特に機能がありませんが、このサンプルを見れば分かるように、Flex の基礎的な開発にはほとんど時間が掛かりません。

では、ちょっとした思い付きですが、ここで、仮に Flash IDE を一度も触れたことのない Java デベロッパーが Flash 上でこのアプリケーションを動作させるには、どのような手順が発生するかを考えてみましょう。

1. ステージをクリックし、プロパティインスペクタから適切なダイアログボックスを開き、ステージの幅と高さを調整します。
2. コンポーネントパネルを探し出して、ボタンをステージにドラッグし、プロパティインスペクタを利用してボタンに名前を付けます。
3. プロパティインスペクタを使用してボタンの幅と高さを調整し、ボタンにラベルを設定します。ラベルに指定したテキストの量に応じて、ボタンの幅を再調整します。
4. ステージにアラートコンポーネントをドラッグします。
5. アラートコンポーネントをステージ上から排除し、ライブラリ内に存在しているかを確認します。
6. ボタンが存在するタイムライン上のフレームを選択し、アクションパネルを開きます。
7. アラートが表示されるように、アクションパネルに addEventListener のコードを記述します。
8. Control + Enter キーを押してムービーをプレビューします。

この手順リストには、Java デベロッパーが直感的に推測できないような UI 操作や概念が少なくとも 3 つあります。さらに、デベロッパーは不必要なパネルに惑わされないようにしなくてもなりません。しかも、ここに示したサンプルは想定できるシナリオの中でも一番簡単なものです。Java デベロッパーの場合、より複雑なアプリケーションの開発時に伴う、込み入ったプリローディングやタイムライン管理の問題に直面する以前に、アニメーションを理解するためのチュートリアルの段階で挫折してしまいます。

Flex は、従来のデベロッパーに対して、彼らが望み、しかも彼らが既に慣れ親しんだ開発環境を利用できるようにすることで、今までの問題を解決するように開発されています。各 MXML タグはステージ上に配置できるコンポーネントにマップされており、各コンポーネントのプロパティはタグの属性を利用して設定することができます。また、Flex サーバーは MXML ファイルを SWF にコンパイルして、ブラウザに配信します。Flex は非常にシンプルであるにもかかわらず、とてもパワフルな機能を提供します。

マッドサイエンティストの告白

実は、初めて Flex で作業し始めたとき、私は Flex を使用する理由が理解できませんでした。これは、Flex があまりにもシンプルすぎるからです。Flash の表現力と Flash のさまざまな概念が提供するパワーにあまりにも慣れていたため、Flash 以外でオーサリングする意味がわからなかったのです。私の場合、ほとんどの事柄を Flash で実現できるので、Flex が Flash 同等のコントロールを提供できるとは思えませんでした。しかし、ある意味、妙な危険性を感じていたのも事実です。もしかして、この偉大な新技術が Flash を圧倒し、Flash の地位を脅かすのではないのだろうか、というように。。。

しかし、Flex での作業を進めるにつれ、私は Flex が現在の Flash 使用用途に加えて、新たな選択肢をデベロッパーに提供することに気づくようになりました。

思うに、私が常に Flash をひいきにする理由には、Flash がさまざまな世界を一つにする力を持っていことが挙げられます。Flash の「ユビキタス」さは、単に Flash Player の普及度をもの語るのではなく、Flash に関与できる人々の多さに関しても言える事柄です。要するに、Flash は従来のグラフィックデザイナーの資質と、インタラクティブデザイナー、アニメーター、サウンドプロデューサー、コーダーなどといった、さまざまなプロフェッショナルが出会う環境なのです。しかし、驚くほど守備範囲の広い Flash とはいえ、Flash は経験を積んだデベロッパーが必要とするツールとはやや言い難いものです。しかし、Flash ユーザーはこれらのデベロッパーを必要としているのです！デベロッパーの大多数は、これまで Flash での作業にほとんど関与できませんでした。しかし、これからは Flex が、Flash プラットフォームや Flash を取り巻く多数の有能な Flash ユーザーを、デベロッパーの良きパートナーとなるようにし、Flash がさらにユビキタスになることを支援します。

では、このような開発シナリオの中で、我々のような Flash エキスパートの役割は一体何なのでしょうか。もちろん従来のデベロッパーと協同できることは素晴らしいのですが、経験豊富な Flash エキスパートが Flex アプリケーションを作成する上でどのような役割を担えるというのでしょうか。

Flash と Flex の架け橋: コンポーネント

これまで Flash でコードを書いてきた人であれば、おそらくコンポーネントを作成したことがあると思います。また、そうであれば、コンポーネントを SWC ファイルとして Flash からエクスポートできることを知っていると思います。Flex のほぼすべての MXML タグは、SWC ファイルに直接マップすることができます。もちろん、Flex だけで独自のコンポーネントを構築することも可能ですが、スキンや低レベルなムービークリップイベントの管理、特に UI コンポーネントなどに関しては、リッチなコンポーネントのデザインやインタラクションを作成するという点で、やはり Flash が最もパワフルなツールと言えます。

では、次に挙げる基本的な Flash コンポーネントが、Flex とどのように連携できるかを見てみましょう。

class MyButton extends UIComponent
{
    [Event("click")]

    function MyButton(Void) : Void
    {
        // ボタンのセットアップ – ここでは、詳細は重要ではありません
    }

    [Inspectable(category="General",verbose=1)]
    function get label() : String
    {
        // ボタンのラベルを返します
    }

    function set label(s : String)
    {
        // ボタンのラベルを設定します
    }

    function onRelease(Void) : Void
    {
        dispatchEvent({type:"click"});
    }
}

これは、あるボタンの例です。仮に、このクラスをライブラリ内のコンポーネントにバインドし、SWC としてエクスポートしたとします。なお、上記の例では、青字で示す 2 つのタグがどのように Flex に関わってくるのかが重要なので、ボタンの実際の機能のコードは省略しています。これらのタグは、Flex コンパイラに対して、コンポーネント用の MXML タグにどのイベントとプロパティを許可するかを指示しています。この SWC ファイルを Flex アプリケーションと同じディレクトリに配置すれば、以下のタグが利用できるようになります。

<MyButton label="My First Flex Component!" click="doSomething()" /> 

このタグを記述すれば、ラベルプロパティが設定されたボタンがステージに配置され、しかも、"click" イベントに対するイベントハンドラが設定されます。もちろん、この例は明らかに簡素化されたものですが、Flex は Flash のコンポーネントに精通したコーダーに対して、新たなコラボレーションの可能性を提供することが理解できると思います。要するに、Flash ユーザーが作成したコンポーネントに対して、従来のデベロッパーがビジネスロジックを追加するといったこれボレーションが可能になります。

Flash と Flex の架け橋: デザイン

もし、あなたが素晴らしい Flash のインタラクティブデザイナー / グラフィックデザイナーならば、Flex はあなたを必要としています！ デベロッパーにとっての Flex の強みは、マルチメディアや繊細なインタラクションのデザインができる点ではありません。したがって、Flash プラットフォームをこれほど強力なものに成長させた高度な Flash ユーザーには、常に活躍の場が存在します。Flash ユーザーは引き続き Flash を利用して、リッチコンポーネント全体のデザインや、既存コンポーネント群に対するデザイン性の追加などの作業を行う必要があります。また、おそらく最も重要なのは、アニメーションや、ビデオ、リッチメディア、インタラクティブデザインといった、あらゆる Flash コンテンツは、我々が Flash 上で構築する必要があります。Flex は、"Image" タグや @Embed を用意して、これらのコンテンツを待ち望んでいます。

"Image" タグと @Embed は、私が最も気に入っている Flex の機能です。これらは、Flash がデベロッパーの世界へ歩み寄る上で、ほぼすべてを実行できるようにする、架け橋の役割を担っていると言えます。非常に基本的な例ですが、次のようなアニメーションがあったとします。

このコンテンツをご覧いただくには、最新バージョンの Adobe Flash Player が必要です。
無償で配布している Adobe Flash Player を今すぐダウンロードしてください。

これは、Flash を初めて使ったその日に制作するような、実に単純なカラートゥイーンを含むムービークリップのシンボルです。この SWF には、"MyAnimation.swf" というファイル名が付いており、その中には最初のフレームに書き出すように設定した "GlowingCircle" という名前のシンボルが含まれています。では、@Embed を利用することで、Flex 上でなにができるかを見てみましょう。

<?xml version="1.0" encoding="iso-8859-1"?>
<mx:Application width='300' height='200' 
       xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*">

   <mx:Image source="@Embed('MyAnimation.swf')" />
   <mx:List dataProvider="{['one','two', 'three', 'four']}" 
       width="100" height="100" 
       defaultIcon="@Embed('MyAnimation.swf#GlowingCircle')" />

</mx:Application>

上記のコードを実行すると以下のようになります。

このコンテンツをご覧いただくには、最新バージョンの Adobe Flash Player が必要です。
無償で配布している Adobe Flash Player を今すぐダウンロードしてください。

@Embed は、Flex が MXML ファイルから作成する SWF に、他の SWF またはシンボルをコンパイルすることができる非常に便利なツールです。しかも、この処理はすべてコンパイル時に行われるので、アプリケーション実行時にローディングが発生することはありません。上記のコードでは、@Embed を 2 通りの方法で使用しています。1 つ目の方法は "Image" タグのソースとして使用しています。この場合、Flex の "Image" タグは我々の予想通りに動作し、単に画像 (ここでは SWF) を表示します。より興味深いのは、2 つ目の使用方法です。

上記の "List" コンポーネントに defaultIcon が設定されていること (青字で表示) に注目してください。Flash の場合、このパラメータはアイコンとして使用する、ライブラリ内のシンボル名を受け付けます。一方の Flex にはライブラリが存在しませんが、その代わりに Flex は、指定した SWF のライブラリ内を検証することができます。つまり、@Embed('MyAnimation.swf#GlowingCircle') を記述してシンボルを指定することで、Flex が生成するアプリケーションに、MyAnimation.swf のシンボルを含めることができます。@Embed を利用することで、Flash 上で作成したものがすべて Flex アプリケーション内に埋め込め、無限の可能性が広がります。要するに、@Embed を使用することで Flash 環境を Flex の傘下として扱えるようになり、Flex がデベロッパーとデザイナーがコラボレートするプラットフォームを提供するようになります。

最後に

可能性を考察することは、とても刺激的です。しかし、Flex が万人向けではないことを念頭におく必要もあります。Flex はサーバーテクノロジーであるがために、より多くのコストを必要とし、デプロイ作業も Flash よりやや困難です。また、ランタイムフレームワークも複雑であり、Flash で作成する少容量アプリケーションより多くの帯域幅を消費します。したがって、Flex が Flash の代わりになるというわけではありません。既に Flash を熟知し、その使いやすさに慣れているデベロッパーは、引き続き Flash を使用してください。Flash は素晴らしい製品であり、Macromedia は引き続き Flash に対する開発努力を惜しみません。要するに、Flash ユーザーが Flash でのオーサリングに見切りを付ける理由は全くありません。

Flex は、エンジニアとデザイナーが多岐にわたり協同する必要があり、大量のビジネスロジック層を必要とする、大規模なイントラネットや高速インターネットアプリケーションなどをターゲットとして開発されています。これは、一部の熟練 Flash デベロッパーが既に探索し始めている開発分野です。この分野は、従来のデベロッパーが Flex に興味を持つことで、さらなる飛躍を遂げようとしているエリアともいえます。また、Flex の登場は、Flash がより確立された団体において、さらに重要な存在となる良い機会でもあり、引いては、Flash デベロッパーに新たな開発機会を提供することになります。

「ユビキタス」が売りの Flash なので、Flash プラットフォームがさらに多くのデベロッパーをサポートするのは素晴らしいことです。Flash は各分野のプロフェッショナルがさらに協力し合い、互いから学び、一体となって新たな試みを始めることを可能にします。こうしてこそ、リッチで魅了的な体験が誕生するのです。

著者について