Flexアプリケーション開発をRailsライクに簡単にする軽量フレームワーク「RIALY」

By kato 2010年04月20日

RIALY というFlex用の軽量フレームワークを開発しGitHubで公開しました。機能やドキュメントはこれから追加していく予定ですが、まずは簡単に紹介したいと思います。

開発の経緯

1年ぐらい前からエアーズではクライアント側にFlexを使う案件が多くなってきているのですが、Flexのイベントフレームワークだけで開発するとどうしてもコンポーネント間の依存性が強くなってしまいます。そこで既存のFlex用フレームワークを調査して、まず初めに PureMVC を採用してみました。

PureMVCを採用したことでコンポーネント間の依存性を弱くするという問題はかなり解消し、無事にひとつのプロジェクトを終わらせることができました。しかしコマンドパターンをベースとするPureMVCでは大量の定型コードを書く必要があって面倒だったことや、UIと処理とをよりキレイに分離したかったことから、次にPureMVCのパターンをベースにイベント処理用のメタデータタグやコマンドの代わりとなるコントローラー層を追加した独自フレームワークを開発しました。

その後、その独自フレームワークをもとに、Railsライクな命名規則や環境ごとの設定の切り替え機能などを導入してさらに改良・軽量化したものが今回公開した RIALY になります。

RIALYの利点

MXMLとActionScriptの分離

Flexの宣言的UIであるMXMLファイルとプログラム処理を記述するActionScriptを別けて書くことには、チーム内での分業をしやすくしたり、アプリケーションのメンテナンス性を向上させたりするメリットがあります。

他のFlex用フレームワークではMXMLファイルの中に、イベント発生をActionScriptに伝えるための部分的な内部スクリプトが必要であったり、ActionScriptと結びつけるための特別なMXMLタグが必要であったりしますが、RIALYではアプリケーションのメインのMXMLファイルの中で以下のようなboot関数を1回呼び出すだけですませることができます。

<?xml version="1.0"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    initialize="boot(this)">
  <mx:Button id="button" label="Click me!" />
</mx:Application>

処理をカプセル化する必要のあるカスタムコンポーネントをMXMLで作成する場合を除き、アプリケーション内のMXMLファイルにはScriptタグやその他のActionScript連携用タグは一切必要ありません。

独自メタデータタグによる見通しの良さ

RIALYではMXMLコンポーネントで発生したイベントの処理や、アクションの実行結果をMXMLビューに反映させる処理を、独自のメタデータタグで宣言することができます。例えば、イベント処理ではイベントの発生元と処理メソッドを以下のように同じ場所にまとめられるので、少ないコードで見通し良く書くことができます。

[EventHandler("button.click")]
public function doSomething(event:Event):void {
  ...
}

Railsライクで判りやすいシンプルな規約

RIALYはRuby on RailsからCoCやDRYといった考え方の影響を受けて開発されています。フレームワーク内で使用する命名規約もRailsにとても良く似ていて、例えばUserControllerのloginメソッドは、"user.login"という文字列表現で呼び出すことができます。

その他、プロジェクトのディレクトリ構成や環境ごとの設定の切り替え機能などもRailsを参考にしているため、RailsやRailsライクなその他のウェブフレームワークの経験がある開発者の方は理解しやすいと思います。

環境ごとの設定の切り替え

Railsでは開発・テスト・本番の各環境ごとに設定を簡単に切り替えることができます。RIALYでも、開発用の"development"と本番用の"production"という2つの環境を標準で用意してある他、テスト用やステージング用の環境を追加することもできます。

環境ごとの設定の切り替えは、アプリケーション用のConfigクラスでそれぞれの環境に対応した初期化メソッドに記述するだけなのでとても簡単です。例えばサーバーと連携するFlexアプリケーションを開発する場合、リモートサービスのエンドポイントURLは開発環境と本番環境で異なることが普通ですが、そのような場合も以下のようにそれぞれのURLを簡単に設定できます。

public class ApplicationConfig extends Config {
  
  public var url:String;
  
  public function development():void {
    url = "http://localhost:8080/service/";
  }
  
  public function production():void {
    url = "http://app.example.com/service/";
  }
  ...
}

何も指定しない標準の環境は"development"で、コンパイル時に環境を指定することでそれぞれの環境用のSWFファイルを作成することができます。RIALYではビルドツールの Maven と Flexmojos というMavenプラグインを使用していて、本番環境用のSWFを作成する場合はコマンドラインから以下のように指定できます。

% mvn -P production flexmojos:compile-swf

いますぐ試すには

最初に書いたように、RIALYにはこれから機能やドキュメントを追加していく予定ですので弊社以外の開発で投入するのは時期早尚だと思いますが、ここまで読んだくださった方には実際に試してフィードバックをいただけるとありがたいです。以下の手順で動作させることができます。

  • MavenおよびFlex 3 SDKをインストールし、mvnコマンドとmxmlcコマンドにパスを通しておきます。
  • GitHubからRIALYのブランクアプリケーション rialy-flex-blank-app を取得します。
  • 取得したrialy-flex-blank-appの中に移動し、mvnコマンドでSWFへのコンパイルをおこないます。無事にコンパイルが通った場合、targetディレクトリ内にSWFファイルが生成されます。
    % mvn flexmojos:compile-swf

今後の開発予定

今後は以下のような開発を予定しています。

  • Adobe AIRおよびFlex 4への対応
  • サンプルアプリケーションやチュートリアルの作成
  • MVCパターンでいうM(モデル層)の追加
  • アプリケーションジェネレータやコードジェネレータの提供

Adobe AIRについてはすでに対応できているはずですが検証がまだ出来ていません。Flex 4についてはコンポーネント層に大きな変更があったようなので修正対応が必要な感じです。

ジェネレータがないのは不便なので、差し当たり次はMavenのプラグインかRubyスクリプトでジェネレータを作成するつもりです。

次回予告

次回は近日中に開発予定のジェネレータを使って、簡単なアプリケーションを実際に作ってみるチュートリアルを公開します。４月の終わりか５月の初めになる予定。お楽しみに！

Bookmark and Share