[Flex2]ActionScript3.0 と FlexFramework2.0
2007年04月26日（木）18:00｜sato
こんにちは。佐藤です。今回は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が実際にどのようなものなのかという概念だけでもつかんでいただければ幸いです。
