Flash ユーザに贈る、Flex Builder のススメ
今月号の記事
Flash でコンテンツを作っているみなさんにとって、Flex Builder という存在が気になっている方は多いのではないでしょうか。Eclipse ベースの IDE 環境、なんだか凄そうだけれどもどこから手をつけて良いものか分からない。そんなみなさんへ、今回 EDGE では Flex User Group 精鋭陣の一人で F-site 主催のイベントでも数多く登壇されている 廣畑大雅 (taiga) さんにお話を伺う機会を得ることができました。廣畑さん自身、Flash から開発を始めて Flex Builder へ移行された経験をお持ちで、それぞれの特質を踏まえた開発を行われています。Flex Builder に興味をお持ちの方はもちろん、Flash とFlex Builder によるコラボレーションをお考えのみなさんは必読です。
Edge：廣畑さんが最初に Flash を触り始めたのはどのバージョンで、なぜ Flash をやりたいと思ったのか、その動機、時期を教えてください。
廣畑：Flash に初めて触れたのは、大学の新卒で IT ベンチャーに入社した年（2002年）の初夏、ちょうど Rich Internet Application という言葉が流行り始めた RIA 黎明期の頃です。バージョンは Flash MX (ver. 6) でした。
Flash を始めた動機ですが、元々 Flash コンテンツに興味があって、自発的に触り始めたということではなく、業務命令を下されてやらされていた感が強かったと思います。会社に Flash を使える人が 1 人も居なかったこともあり、気づいたら好奇心を持って勉強するようにはなっていましたが、Photoshop、XHTML、CSS、C 言語のスキルを多少持っていることが会社に採用された理由だったので、たまたま Flash 要員として適任と思われたのだと思います。意外とドライな出会いでした。
ちなみに、私が初めて世に出した Flash コンテンツは、Flash MX + Flash Remoting + ColdFusion 6 + Oracle 9 で構築したブランドメーカーのフル Flash 販促サイトでした。それ以降、販促／ EC ／企業サイトなどの Flashコンテンツを作ってきましたが、徐々にイントラコンテンツ（公には出せない大手企業の社内向け Flash アプリケーションの開発案件）を手がけることが多くなっていった気がします。
Edge：そんな廣畑さんが Flex Builder に出会ったのはいつごろ？ また使ってみようと思ったきっかけを教えてください。
廣畑：Flex Builder に出会ったのは 2007 年の 1 月でした。
このとき、既に会社を辞めてフリーランスに転向していたのですが、社員時代からお付き合いのあったシステム開発会社から SNS 構築案件の話を持ちかけられ、画面周りの設計／制作を依頼されました。先方からいただいた画面の提案書を見たとき、UI があまりにも煩雑で、Ajax やネイティブな Flash ではとても工期を守れそうにないと思い、Flex 2 アプリケーション構築策を選定し提案したことが、Flex Builder に出会うきっかけであり、Flex 開発者としての始まりでもありました。
もちろん、Flex フレームワークを過去に触った経験など無かったので、この提案もバクチというか冒険だったわけですが、V2 コンポーネントを使った Flash コンテンツの開発経験に自信を持っていたことや、ActionScript 3.0 を勉強する良いきっかけになるだろうという好奇心のお陰で、意欲的に取り組めました。
結局、提案した Flex 案件に 1 年以上携わることになったのですが、良い経験になりました。
Edge：Flash のユーザが Flex Builder を使ってみて、凄いと感じるところと、逆に、戸惑ってしまうことはどのようなところでしょうか？ 具体的にいくつかあげていただけたら嬉しいです。
廣畑：あくまで私個人の意見ですが、Flash MX ～ Flash 8 で V1、V2 コンポーネントを 10 個以上配置するような Flash コンテンツを制作した経験の有る方であれば、コンポーネントをレイアウトするときに、どれだけ楽に画面を構築できるか、また高いパフォーマンスで動作するかを実感できると思います。HTML を手入力で制作できる方であれば、MXMLというHTMLによく似たタグベース言語で開発できますし、それが苦手な人であっても、デザインモードで画面の状態を確認しながら画面を構築することもできます。
あとは、ActionScript エディタとしての性能でしょうか。Flash IDE のアクションパネルに比べて、Flex Builder のエディタは、コード補完やリファクタリングなどの機能が充実していますし、プロファイラでメモリの使用状況を監視することもできます。
逆に戸惑うところは
- タイムラインが存在しないこと
- パブリッシュ（ビルド）時に、trace() アクションを省略するオプションが用意されていないこと
- Flex Builder のビルドのショートカットキーと、Flash IDE のパブリッシュのショートカットキーが異なること
などでしょうか。
Edge：Flash と Flex Builder を併用して作業する場合、フォルダ構造や環境設定等、何か工夫されていることはありますか？
廣畑：Flash IDE と Flex Builder を併用して作業する場合、Flex アプリケーションの開発（Flex プロジェクトの開発） が主になり、Flex Component Kit を利用するケースがほとんどなので、Flex プロジェクト内 libs フォルダで .fla ファイルと、MovieClip (UIMovieClip) の基底クラス .as ファイルを管理します。
図1.Flex プロジェクト内 libs フォルダで
.fla ファイルと、MovieClip (UIMovieClip) の 基底クラス .as ファイルを管理します
package { import flash.display.MovieClip import mx.flash.UIMovieClip; /** * UIMovieClip Sample. * FLtoFXComponent MC の基底クラス * @author taiga */ public class FLtoFXComponent extends UIMovieClip { /** * Constructor */ public function FLtoFXComponent () { super(); stop(); } } }
図2. MovieClip (UIMovieClip) の基底クラス .as ファイル
図3. Flex プロジェクト内 libs フォルダはデフォルトで作成されるので、.fla ファイルから書き出した .swcファイルは自動的に追加されます。（ Flex Builder 3 の場合)
図4. Flash のシンボルプロパティ
MovieClip ( UIMovieClip ) のリンケージ設定
併用して作業するときに意識するのはこれくらいですね。MovieClip (UIMovieClip) のオーサリング作業以外は、すべて Flex Builder を使った作業になるので、Flash IDE 側で工夫していることはほとんどありません。
Flex Builder には、スタンドアロン版、Eclipse プラグイン版と 2 種類ありますが、私は Eclipse プラグイン版を使用しています。Eclipse は WTP (Web Tools Platform) 同梱パッケージを使用していて、それに加えてエディタ拡張の Eclipse プラグイン（JStyle、 AnyEdit tools、Columns for Eclipse など）を活用しています。
Edge：プログラム経験のない人が Flex Builder を始めようとする場合、まずはどんなところから手を出すと挫折しないでしょう？
廣畑：プログラム経験のない人に、いきなり ActionScript 3.0 のコーディングをさせるのは色々と難しいと思うので、まずは、Flex アプリケーションの画面構築から手を出してみてはいかがでしょうか。Flex プロジェクトを新規に作成し、Flex Builder のデザインモードを触ってみることから始めるとよいと思います。そうすることによって、実際の画面とタグの関係が直感的に理解できるようになっていくと思います。Flex のビジュアルコンポーネントは 50 種類以上あるので、1 つ 1 つ覚えるのには有効な手段ではないでしょうか。
Flex 3 Component Explorer や Flex Style Explorer で公開されているサンプルを参考に、実験用プロジェクトを作成してトライ＆エラーを繰り返すことも有効な手段だと思います。画面構築に慣れたら、徐々に ActionScript 3.0 に慣れていけば挫折することはないのではないでしょうか。
図5. Flex 3 Component Explorer
図6. Flex Style Explorer
Edge：複数人で開発をする場合、なにか工夫されていることはありますか?
廣畑：一番大切なのは作業分担ですね。
Flex アプリケーションのコンテンツ部分に絞った話になりますが、Flex アーキテクトとデザインアーキテクトに、担当者を 1 人ずつ立てます。兼任できれば 1 人ですべて抱え込んでも良いとも思いますが、煩雑なアプリケーションを設計／開発するときに、コンポーネントの外観などといった見た目のデザインや、アニメーションなどのインタラクションデザインなどのことまで考えながら並行作業することは、かなり大変な作業なので、作業分担するに越したことはないと思います。あとは、画面（機能）単位で必要な人間を投入するという感じでしょうか。
次に意識することは、チーム内での ActionScript コーディング規約です。経験上、案件によって厳密度が多少変動しますが、変数や関数の命名規則、ASDoc コメントの挿入などといった最低限のマナーはもちろん、コンポーネントの分割ルールや ActionScript の記述箇所などのルールは、チーム内で事前に意識あわせするよう心がけています。
頻繁に再利用するような Util 系クラスや Skin 系のクラスは、ライブラリプロジェクトで一元管理しています。ちなみに、ソース管理は Subversion を利用しています。
図7. SVN (Subversion) のリポジトリロケーション設定
（例：Spark Project のリポジトリを閲覧する）
Subversion を利用するためには、別途 SVN クライアントのツールが必要になりますが、 私は Eclipse の SVN プラグイン (Subversive) を使用しています。
図8. Spark Project の SVN (Subversion) リポジトリ
Edge：Flex Builderの最大の魅力はなんですか?
廣畑：
Flex アプリケーションを開発できること
ActionScript エディタとしての能力
この 2 点に尽きますね。
Edge：Flash & Flex Builder を利用したデザイナーデベロッパワークフローで広がる未来はどのようなものがあると考えますか？ 「あったらいいな！」といった希望がありましたらお願いします。
廣畑：今以上に Flex アプリケーションが、コンシューマコンテンツに使われると嬉しいですね。
日本の Flex アプリケーションは、米国と異なり、コンシューマコンテンツよりも圧倒的にイントラコンテンツにばかり普及しているような気がします。実際、Flex User Group のユーザー数は日々増加しているようですが、それに対して公に公開されているコンテンツ（事例）が少ないという現状が、それを証明しているのではないでしょうか。やはり公に公開されている事例が少ないということは面白くありませんし、これから Flex を始める人たちに魅力を伝えるのも難しいと思います。これは個人的に問題だとすら思います。
そんな状況に Flash 技術者が介入することによって、Flex アプリケーションの活用シェアが広がり、開発者がモチベーションを高く保ち続けながら魅力的なコンテンツを量産できたら素敵ではないでしょうか。
来年あたりに台頭して来るであろう Flex 4 や Thermo によって、デザイナーデベロッパワークフローがより面白くなってきそうなのも楽しみですね。
Edge：本日はどうもありがとうございました。
廣畑 大雅 (taiga)taiga.jp
フリーランスの Web ディレクター／デザイナー。
Flash コンテンツ、Flex アプリケーションの設計／開発を中心に活動中。
Adobe 公式ユーザグループ F-site にも懇親会専用スタッフとして活動する。
