結局、RIAはどれを使うべきなのか?
連載インデックスへ
検証特集:結局、RIAはどれを使うべきなのか?(最終回)

FlexとSilverlightで同じアプリを作って比較してみた


クラスメソッド株式会社
福田 寅成
2009/2/24


サンプルのアーキテクチャ

 今回利用したアプリケーションのアーキテクチャは前述のFlexの記事で利用した簡単なアーキテクチャを少し改造したものです。アーキテクチャの図は以下のようになります。

図 サンプルアプリケーションのアーキテクチャ図
図 サンプルアプリケーションのアーキテクチャ図(画像をクリックすると拡大します)

処理の流れ

- PR -

 処理の流れは以下のようになっています。以後、「/」と、「/」で区切る単語があった場合はFlex用語、はSilverlight用語を表すことにします。

  1. ViewHelper/コードビハインドでは、アプリケーションの初期化時にユーザー一覧取得処理をDAOに依頼。その際のリクエストパラメータはリクエストDTOに詰める
    • DAO:Data Access Object。データアクセスをカプセル化
    • DTO:Data Transfer Object。データを送受信する際の入れ物。宅配の小包
    • 今回のリクエストDTOの中身は空。すなわち、ユーザー全件取得を依頼
  2. DAOでは、XML形式でアプリケーションに埋め込んであるユーザー一覧データを取り出す
    • この部分をサーバへのリクエストに書き換えると、本格的なものに変身
  3. XML形式のデータをオブジェクト形式に変換
    • データはオブジェクト形式が一番使いやすく、パフォーマンスも良いので変換する
  4. ユーザー一覧データをレスポンスDTOに詰めてViewHelper/コードビハインドに返す
  5. ViewHelper/コードビハインドは、画面のデータグリッドのデータプロバイダ/データソースにユーザー一覧データをセット
  •  そのほか、以下は作る際に注意したことです(コーディングのテクニックなので、読み飛ばしてもらってかまいません)。

  • ※全体で注意したこと
    • 命名規則をできるだけ合わせる
    • コメントに同じものを書く
    • 変数やメソッドなどの役者の数も処理の流れも同じになっている必要がある
    • Flexでは、『諸悪の根源であるバインディング』は使わない
    • Silverlightでも使わないようにした
  • ※Viewで注意したこと
    • XAMLでは、StackPanelを使う
    • FlexにおけるBox。箱に詰めれば、勝手に整列してくれるので使いやすい
    • Silverlightのみマージンや背景色などをスタイル設定(Flexに見た目を似せるため)
  • ※DAOで注意すること
    • DAOではサーバに処理をリクエストしていないが、そうしているかのような作りにする

ソースコードはどれぐらい違うのか?

 それでは、見た目は同じになったFlexアプリとSilverlightアプリのソースコードを比較していきましょう。

XMLベースの画面定義

 FlexのMXMLとSilverlightのXAMLは、それぞれタグを記述して画面をレイアウトしていきます。基本的にMXML/XAML内にロジックは書かないので、画面のレイアウトに専念します。

 画面の「レイアウト」には、FlexではBox、SilverlightではStackPanelを利用しましました。どちらも内部の要素を縦か横に自動的に整列してくれるので、業務系の画面作成には向いているレイアウトコンポーネント/レイアウトコントロールだと思います。

 重要な部品であるデータグリッド(コンポーネント/コントロール)ですが、ほとんど同じ感じでコードが書けてびっくりです。

Flex版データグリッド(実際のデモのソースコードから一部を抜粋)
<!-- ユーザー一覧データグリッドです。 -->
<mx:DataGrid id="userListDataGrid" width="300" height="200">
  <mx:columns>
    <mx:DataGridColumn headerText="名前" dataField="name"
      width="100"/>
    <mx:DataGridColumn headerText="住所" dataField="address"
      width="200"/>
 </mx:columns>
</mx:DataGrid>

Silverlight版データグリッド(実際のデモのソースコードから一部を抜粋)
<data:DataGrid x:Name="UserListDataGrid" AutoGenerateColumns="False"
  Width="300" Height="200">
  <data:DataGrid.Columns>
    <data:DataGridTextColumn Header="名前"
      Binding="{Binding Path=Name}" Width="100"/>
    <data:DataGridTextColumn Header="住所"
      Binding="{Binding Path=Address}" Width="200"/>
  </data:DataGrid.Columns>
</data:DataGrid>

 データグリッドの列を定義するオブジェクト(DataGridColumn/DataGridTextColumn)で、ヘッダーのテキスト文字やデータグリッドに設定された配列データの各要素のどのプロパティを表示するかを指定しています。このデータグリッド部分のみならず、MXML/XAMLで記述した全体のコードがすごく似ていてびっくりしています。

画面ロジック

 ViewHelper/コードビハインドで記述する内容は、例えば以下のようなものです。

  • 画面要素などにイベントハンドラを設定
  • 画面要素で発生したイベントに関するイベントハンドラの処理を行う
  • DAOにリクエストを投げてデータを取得
  • 画面に値をセット
  • 画面の見た目を切り替え
  • 権限によってボタンを出すとか出さないとか
  • 画面を入れ替え

 さすがにFlexとSilverlightでは、このロジック部分の記述は違ってくるだろうと思っていましたが、これまたほとんど同じようにできました。

 DAOにユーザー一覧取得をリクエストする部分の処理を見てみましょう。

Flex版ユーザー一覧取得処理(SampleViewHelper#getUserList)
/**
* ユーザー一覧を取得します。
*/
private function getUserList():void {
    // 空のリクエストDTOを作成します。
    // ユーザー一覧取得には特に取得条件は不要なので
    // リクエストDTOは空です。
    var dto:UserRequestDto = new UserRequestDto();

    // ユーザー一覧を取得します。
    dao = new UserDao();
    dao.addEventListener(ResultEvent.RESULT,
        getUserListResultHandler);
    dao.getUserList(dto);
}

Silverlight版ユーザー一覧取得処理(Sample.xaml.cs#GetUserList)
/// <summary>
/// ユーザー一覧を取得します。
/// </summary>
private void GetUserList()
{
    // 空のリクエストDTOを作成します。
    // ユーザー一覧取得には特に取得条件は不要なので
    // リクエストDTOは空です。
    UserRequestDto dto = new UserRequestDto();

    // ユーザー一覧を取得します。
    Dao = new UserDao();
    Dao.Result += new UserDao.ResultEventHandler(
        GetUserListResultHandler);
    Dao.GetUserList(dto);
}

 それぞれ今回作成したシンプルなアーキテクチャに基づいて処理しています。

  1. リクエストDTOを作成
  2. 必要に応じてリクエストパラメータをリクエストDTOに設定(今回は空)
  3. DAOを新規作成
  4. DAOの結果イベント(ユーザー一覧成功したよイベント)にイベントハンドラを設定
  5. DAOのメソッドを呼び出す(リクエストDTOを引数に)

 DAO内では、HTTPによるサーバリクエストやソケット接続による通信処理は非同期に行われ、レスポンスは結果イベントで受けることになります。この部分の流れを同じにするために、ViewHelper/コードビハインドでもDAOを呼び出す際はイベントハンドラを用意して呼び出します。

 次ページでは、比較した結果をまとめ、最後に筆者がこれまで3年近く業務用RIAを開発して培った“マナー”を示します。これは、Flex/Silverlight以外でも応用できると考えますので、ぜひご覧ください。

1-2-3

 INDEX
検証特集:結局、RIAはどれを使うべきなのか?(最終回)
FlexとSilverlightで同じアプリを作って比較してみた
  Page1
異なるRIA技術で同じアプリを作ってみよう
検証サンプル「マスタメンテナンスアプリ」
Page2
ソースコードはどれぐらい違うのか?
  Page3
FlexとSilverlightは似ている?
標準“マナー”を作り、多くのRIA技術に触れよう



リッチクライアント&帳票 全記事一覧へ



HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間
ソリューションFLASH