検証特集：結局、RIAはどれを使うべきなのか？（最終回）

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

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

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

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

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

□ 処理の流れ

- PR -

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

ViewHelper/コードビハインドでは、アプリケーションの初期化時にユーザー一覧取得処理をDAOに依頼。その際のリクエストパラメータはリクエストDTOに詰める
- DAO：Data Access Object。データアクセスをカプセル化
- DTO：Data Transfer Object。データを送受信する際の入れ物。宅配の小包
- 今回のリクエストDTOの中身は空。すなわち、ユーザー全件取得を依頼
DAOでは、XML形式でアプリケーションに埋め込んであるユーザー一覧データを取り出す

この部分をサーバへのリクエストに書き換えると、本格的なものに変身

XML形式のデータをオブジェクト形式に変換

データはオブジェクト形式が一番使いやすく、パフォーマンスも良いので変換する

ユーザー一覧データをレスポンスDTOに詰めてViewHelper/コードビハインドに返す
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);

          }

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

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

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

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

1-2-3

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

結局、RIAはどれを使うべきなのか？バックナンバー連載インデックスへ»

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

TechTargetジャパン

リッチクライアント & 帳票フォーラム新着記事

次のモバイルアプリはどのフレームワークで作る？ （2012/5/24）
スマホアプリの開発を容易にするJavaScriptのフレームワークが続々と増えている。それぞれの良さや仕組み、何がどこまでできるのかを徹底解剖する
「LESS＆専用エディター」でCSSをシンプルに書こう （2012/5/23）
「LESS」はCSS初心者に向けた、シンプルなライブラリだ。「LESS」で、変数などのプログラミングの基礎的な考え方もCSSで学ぼう
学校が世界一のデジタル環境になったら （2012/5/18）
授業はアーカイブに蓄積され、家からも見られる。家族が授業テーマのアイデアを出す。そんな姿が実現されるかもしれない
1000万ドル調達も夢じゃないクラウドファウンディング （2012/5/15）
クラウドファンディングは、寄付型でも投資型でもない「購入型」が主流。商品を“開発する前に販売”して開発費用を集める逆転のシステムだ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

＠IT Sepcial

＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

ニュース一覧へ

お勧め求人情報

転職／派遣情報を探す

エンジニアの求人情報、ただいま増加中
【転職サーチ】SIer／Web企業／新規事業
スマホ開発で、あなたのキャリアを生かす

派遣エンジニアにお役立ちの仕事情報
「派遣・フリーで働くメリット」とは？
活躍する派遣エンジニアの本音

エンジニアのキャリア実現を応援します

ITトレメ「ビジネス基礎」シリーズ開始
「マナー＆コミュニケーション編」「法律・知財・債権管理編」

＊先週の人気講座ランキング＊
～ Android編～

ホワイトペーパー（TechTargetジャパン）