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

お久しぶりです。佐藤です。

まずはじめに皆さん、「Apollo」はご存知でしょうか？Apolloはadobe社が現在開発中のアプリケーション実行環境です。Flash(ActionScript)はもちろんのこと、HTMLやJavaScript等の(クライアントサイドの)WEB系技術を使って、デスクトップアプリケーションを制作することができるようになります。このApolloはまだ開発中(現在パブリックアルファ版)のため、実行環境や開発用のSDKはAdobe Lab内でしかダウンロードできません。にもかかわらず、5月23日に開催されたApollo mini Camp @ Tokyoというイベントでも、大勢の方がApolloの最新情報を聞きに来ていました。このイベントではAdobe社の方が今後のApolloの展開について最新情報を説明してくれるということで僕も大慌てで申し込んだのですが、最終的にはわずか数時間で250人も集まりすぐに申し込みを締め切ったそうです。この「Apollo」がどれほど期待されているのかがわかりますね。

先日のApollo mini Campには、僕も出席してきました。このイベントで聞くことのできた内容を参考に、今回はApolloについて書きたいと思います。とは、言っても、Apollo mini Campに関してのレポートは、既に良い記事が大量に出ていますし、あれから早10日以上、完全に時期を逸してしまいました。そこで今日はもっと根本的な事を書きたいと思います。

そもそも、Apolloにこんなにも多くの開発者が興味深々なのはなんで？

ブログなどの様々な記事をみても、｢Apollo」という言葉がごく自然に登場し、ずいぶんと知名度があがったように感じます。ですが、当のApolloはいまだパブリック アルファ版で、正式版はまだまだ先の予定です。開発者側ではない一般のユーザーには、Apolloのランタイムなど、まだまったくといって良いほど普及していません。まだアルファバージョンなので当然ですが。なのに、なぜこんなに開発者側では盛り上がっているのでしょうか？僕自身もApolloの正式な登場を待つ一人として、今回はその理由について僕の意見を述べてみたいと思います。

既存のWEB系技術を使える

Apolloを使ってデスクトップアプリケーションが作れる！ってこれだけ聞いても、別にすごいことだとは思えません。デスクトップアプリケーションを制作したいなら、C#でもJavaでも他にいくらでも選択肢があるじゃないか、と思う方もいらっしゃるかもしれません。はい。確かにその通りです。別にApolloでなくても良いんです。ただ、Apolloの特徴の中で特に興味深いのは既存のWEB系技術を用いてデスクトップアプリケーションの開発ができる、という部分です。

Apolloでは一般的なブラウザが対応しているクライアントサイドの技術であれば、そのほとんどを利用できます。Flash(ActionScript)もHTMLもJavaScript(Ajax)も利用できます。さらにいえば、Flash(ActionScript)だけでもHTMLだけでもJavaScript(Ajax)だけでもアプリケーションが開発できます。つまり、現在何かしらのWEB系の開発に携わっている人の多くは、(完全なサーバーサイドの開発者でなければ)Apolloによって今すぐにでもデスクトップアプリケーションの開発者になれます。しかも、そのために新しい言語を覚える必要はありません。すなわち、既に知っている知識の中でWEBアプリもデスクトップアプリもどちらも開発ができるようになるのです。

WEBとデスクトップの境が無くなる？

さらに、WEB系の技術をそのままデスクトップアプリケーションの技術とすることで、もう一つ利点があります。例えば既に存在するWEBアプリをデスクトップアプリケーションへ、あるいはApolloアプリをWEB上でも利用できるように、そういった移行のコストが非常に小さくなります。なぜなら、基本的にはどちらも同じように動くからです。データの読み込み・保存等、WEBアプリとデスクトップアプリでは違う部分もありますので、もちろん完全にそのままというわけにはいかないとは思いますが、それでもほとんどの機能部分は再利用可能だと考えられます。作り方・使い方によってはWEBアプリをそのままApollo内で動作させて、まるでデスクトップアプリのように利用する、ということもできます。すなわち、WEB/デスクトップの両方を想定したアプリケーションやWEB/デスクトップを連携したアプリケーションなどこれまで容易にできなかったことができるようになるのです。

今より面白いことができる（かも）

おまけに、単純に今まで技術的にできなかったことができるようになります。通常WEBブラウザではhtmlのページの中にFlash(swf)がレイアウトされるスタイルになります。ところがApolloの環境内では、Flashオブジェクトもhtmlオブジェクトもほぼ同列に扱われます。よって、ApolloではFlash(swf)の中にhtmlのページをレイアウト、の中にFlash(swf)、の中にPDFを配置。のようなこともできます。また、htmlもオブジェクトとして扱われるために、ぼかし効果や回転・拡大などのエフェクトをhtmlページにかけることもできます。有効な使用状況が想定できませんが、WEB業界には独創的な方々が多々いますので、いずれ納得できる使い方を誰かが提案してくれるものと思います。なにより、大は小を兼ねる、ではありませんが、できるかできないかだったらできた方が良いに決まってます。

最後に

さて、以上がApolloを期待してしまう大まかな理由です。今回の文章には僕の主観的な意見も混ざって、長々と書いてしまいましたが、おそらくApolloを期待して待っている理由なんて、結局はみんな同じです。一言で言ってしまえば、「今、できないことが、Apolloでできるようになるから」ですね。

WEB系の開発者の中にも、ApolloはFlashに似たようなもの、なんて考えて意識してなかった方もいるのではないでしょうか？先ほども書いたとおり、Flashが使えなくとも、HTMLやJavaScriptだけで十分です。現在は、パブリック アルファのApolloですが、夏ころにはパブリック ベータが、そして2007年の秋ころにはApollo1.0としてリリースされる予定だそうです。まだまだ時間がありますね。少し触ってみてはいかがでしょうか？

注)「Apollo」とは開発コード名なのだそうです。なので、実際の正式リリース時にはApollo1.0ではなく別の名前になるようです。

こんにちは。佐藤です。今回はFlex2で扱われる技術についてです。具体的にはActionScript3.0 と FlexFramework2.0について、ほんの触り程度ですが紹介をしたいと思います。

ActionScript

まず、ActionScriptとはプログラム言語の名称です。インターネット上では、「AS」などと略されていることもあります。ActionScriptの大きな特徴としてはFlashPlayer上で動作する、ということです。プログラマでない方にはピンと来ないかもしれませんが、例えばC言語でWindows用に作成されたアプリケーションはMacでは(そのままでは)動かすことができません。また、WEBの世界でも例えばJavaScriptで書かれた処理はOSやブラウザの違いに常に敏感でなくてはなりません。ところが、ActionScriptで制作されているならば、OS等に依存せずFlashPlayerさえあればどのような環境でも同様に動作させることができるということで、開発する側からすると非常に大きなことなのです。

ActionScriptとJava

Java言語というプログラム言語をご存知でしょうか。Java言語で制作されたアプリケーションもJavaVMという仮想マシン上で動作させることができます。つまり、ActionScriptと同様に、JavaでもJavaVMさえあればどのような環境でも動くアプリケーションを制作することができます。歴史的にはActionScriptよりもJavaの方がずいぶんと古いのですが、日々コンピュータに関わっていない方々にとっては、今やJava/JavaVMよりもFlash/FlashPlayerの方が有名なような気がします。ちなみにFlashPlayerはこの数年で一気に有名になり、今やFlashPlayerの普及率はほぼ100％なのだそうです。

ActionScript3.0

ActionScript3.0は、その名の通りActionScriptのバージョン3.0です。ActionScript2.0と比べると、言語としての構造や書き方が大きく変わっていて、Adobe社の報告によれば最大10倍ほど処理が早くなるそうです。ActionScriptは、前述の通りFlashPlayer上で動作するのですが、正確にはFlashPlayerの一部であるAVM(ActionScript仮想マシン)で解釈され実行されます。このAVMにもバージョンがあり、FlashPlayer8以前にはAVM1が搭載されています。FlashPlayer9以上ではAVM1とAVM2の両方が搭載されています。ActionScript2.0(ActionScript1.0)はAVM1によって動作し、ActionScript3.0はAVM2によって動作します。すなわち、ActionScript3.0で制作したものはFlashPlayer9以上の新しいバージョンでしか動かないということです。ちなみにFlex2.0ではActionScript2.0は使えませんので、つまりはFlashPlayer9以上を対象にせざるを得ません。とは言っても先ほどのFlashPlayerの普及率の資料を見る限りでは、そこまで心配しなくても良いようにも考えられます(FlashPlayer9の日本での普及率80%以上)。

唯一少しだけ気になる点としては、Wiiに搭載されたブラウザにはFlashPlayer7が導入されました。そのため現時点では残念ながら、Flex2.0を使う限りWii上で動くものは制作できません。

Flex Framework2.0

続いてはFlex Framework2.0について少しだけ説明をします。Flex Framework2.0は、大量のコンポーネント群です。コンポーネントというのは、イメージとしてはデザインのことも考えられたクラスのようなものです。

例えばボタンを作ろうと思った場合に、その作り方は人それぞれです。その中でももっとも基本的な作り方としてはActionScriptを使って、全ての機能を自ら実装するという作り方です。画像を表示したり、複数の画像を切り替えたり、マウスでクリックされたときに特定の処理を行ったり、といった処理はActionScriptの関数で実現可能です。すると、最低でも以下のような感じのプログラムを書かなければなりません。

package {

    import flash.display.Sprite;

    import flash.display.Bitmap;

    import flash.events.MouseEvent;



    public class Button_ASonly_scratch extends Sprite

    {

        [Embed(source="assets/button_default.png")]

        private var button_default_png:Class;       // ボタン画像のswfへの埋め込み

        private var button_default:Bitmap = new button_default_png();



        [Embed(source="assets/button_over.png")]

        private var button_over_png:Class;　　　　　　　//　ボタン画像(マウスオーバー時)の埋め込み

        private var button_over:Bitmap = new button_over_png();



        public function Button_ASonly_scratch()

        {

            addChild(button_default);

            button_over.visible = false;

            addChild(button_over);

            addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);

            addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

            addEventListener(MouseEvent.CLICK, mouseClickHandler);

        }



        protected function mouseOverHandler(me:MouseEvent):void{

            // マウスポインタがボタン上の時の処理

　　　　　　　　　　　　button_over.visible = true;

            button_default.visible = false;

        }



　　　　　　　　protected function mouseOutHandler(me:MouseEvent):void{

            //マウスがボタン上から離れたときの処理

　　　　　　　　　　　　button_default.visible = true;

            button_over.visible = false;

        }



        protected function mouseClickHandler(me:MouseEvent):void{

            // クリックされた場合の処理

        }

    }

}

たかがボタンに、なかなかの行数がかかります。もしデザイナブルな気持ちの場合には、より一層大変です。画像を埋め込んで、読み込んで表示できるクラスに変換して･･･。このあたりがFlashとの大きな違いですね。もう少し楽に作りたいと思います。そこで、SimpleButtonというクラスを使ってみます。

package

{

    import flash.display.SimpleButton;

    import flash.display.Bitmap;

    import flash.events.MouseEvent;



    public class Button_ASonly extends SimpleButton

    {

        [Embed(source="assets/button_default.png")]

        private var button_default_png:Class;       // ボタン画像のswfへの埋め込み

        private var button_default:Bitmap = new button_default_png();



        [Embed(source="assets/button_over.png")]

        private var button_over_png:Class;　　　　　　　//　ボタン画像(マウスオーバー時)の埋め込み

        private var button_over:Bitmap = new button_over_png();



        public function Button_ASonly(){

            super(button_default, button_over, button_over, button_over);

            addEventListener(MouseEvent.CLICK, mouseClickHandler);

        }



        protected function mouseClickHandler(me:MouseEvent):void{

            // クリックされた場合の処理

        }

    }

}

このような感じになります。先ほどよりも少々短くなりました。SimpleButtonクラスには、マウスがボタンに乗った(外れた)場合に表示を切り替えるなどといった、その名の通り最低限のボタンの機能が既に定義されています。ここで、FlexFrameworkを用いると、さらに簡単に、そして直感的にボタンを作ることができます。FlexFrameworkには、Buttonコンポーネントがあるため、新たにクラスを作る必要はありません。表示する場所に以下のようにタグを書けば、ここまでActionScriptで実装したものと同様(以上)のものを表示することができます。

<mx:Button upSkin="@Embed('assets/button_default.png')" overSkin="@Embed('assets/button_over.png')" click="{/*クリックした時の処理*/}" />

また、コンポーネントの良いところは、デザインの事も考えられて設計されているということです。SimpleButtonというクラスには、デフォルトの画像やエフェクトは定義されていません。ボタンとして必要な最低限の機能が定義されているだけです。対してButtonコンポーネントの場合にはデフォルトのデザインが定義されています。また、デザインに対してスタイルシートを使って簡単な変更を加えることも可能です。

一言だけ付け加えるならば、FlexFrameworkは非常に便利なのですが、このFrameworkを使うことが常にベストというわけではありません。FlexFrameworkを用いることで様々な部分が既に用意されていて簡単に利用できるのですが、逆に言えば用意されていないことは使えない(or 使うのが非常に大変)ということです。例としては上記のボタンコンポーネントでは、ボタン上に任意の文字列を表示する機能が提供されています。しかし、この文字列を表示しているオブジェクトはコンポーネントの中で隠蔽され直接扱うことができません。もしここで、ボタン上の文字列の表示を複数行にしてスクロールバーをつけたい場合には、ボタン上の文字列の定義を拡張しなければなりませんが、コンポーネントではテキストの文字を設定する機能しか提供されていません。テキストオブジェクトを拡張するためにはどうしたらいいのか、と調べていくうちにどんどん深みへはまっていくかもしれません。簡単にボタンを作るためにFrameworkを使っているのに･･･、なんて事にもなりかねません。

最後に

さていかがだったでしょうか。今回紹介したActionScript3.0 と FlexFramework2.0は、Flex2.0という環境で開発を行う際の基本の技術です。しかし、｢Flex｣という抽象的な単語にかくされて、意外に耳にしないような気もします。ActionScript3.0とFlexFramework2.0が実際にどのようなものなのかという概念だけでもつかんでいただければ幸いです。