わんくま同盟 東京勉強会 #60

業務アプリでの Silverlight 活用事例～ Prism と Rx を使ってみた～

田中　孝佳　 (@tanaka_733)

わんくま同盟 東京勉強会 #60

自己紹介

• （株）ワークスアプリケーションズ勤務– 国産 ERP パッケージベンダー– 研究部門所属

• クラスタ– 仕事： AWS, Java, Eclipse, Oracle

– 趣味 : Azure, Silverlight, Windows Phone 7

– その他：低温物理 , Scheme, Erlang

わんくま同盟 東京勉強会 #60

どんな仕事？

研究部門のお仕事

• クラウドを使って面白いことをする• 社内のクラウド利用を促進させる• 雑誌に執筆したり ( まだ 1 本ですが ) など社外

活動

クラウド管理ツールの開発担当

• 誰でも気軽に安全にクラウドを使えるようにする

• 研究材料としてのチャレンジングな技術を入れる

わんくま同盟 東京勉強会 #60

クラウド管理ツールで Silverlight 使いました！

RIA 技術を調査したい• Java の GUI には苦労しっぱなし・・・• Flash より業務アプリに向いている気がする

C#, Visual Studio, Silverlight 万歳！ • 開発生産性高い• 機能開発に集中できる開発環境

ただし、サーバーサイドは Java です• 会社としての判断もありつつ• これはこれで研究としては面白いかも

わんくま同盟 東京勉強会 #60

出てきた問題点

標準の UI 部品じゃ足りない• Grid 系のコンポーネントとか

MVVM のための部品がほしい

疎結合を維持したい• ViewModel と View をいつ結びつける？• ViewModel 間で疎結合なままイベント飛ばしたい

通信部分の非同期処理の記述が面倒

きっといいフレームワークがあるはず・・・

わんくま同盟 東京勉強会 #60

フレームワークを導入しました

Pattern & Practices Prism• MVVM サポート、テストサポート• DI(MEF) 　など

Rx(Reactive Extentions)• 非同期を LINQ 的に使いやすく！

Silverlight Toolkit• 標準の UI 部品の不足を補う

• DataGrid, BusyIndicator とか便利

Blend SDK• Expression Blend 使ってないけど SDK は必須

わんくま同盟 東京勉強会 #60

アーキテクチャ図 ( クライアント側 )

Java(JAX-RS)

わんくま同盟 東京勉強会 #60

サーバーサイドとの通信

• RESTful API(JSON over HTTPS) を採用• Silverlight 側は HttpWebRequest を利用

– HTTP 処理をクライアント側にする

• デフォルトのブラウザ側だとエラーコードやエラー時のレスポンスボディが取得できません

• 英語の方が詳しい資料あり〼http://msdn.microsoft.com/en-us/library/dd920295%28v=vs.95%29.aspx

わんくま同盟 東京勉強会 #60

Prism とは

• MVVM サポート、 DI(MEF, Unity) など複数の機能をもった大きなフレームワーク– http://compositewpf.codeplex.com/

• ドキュメントも結構充実している– 英語だけど

• MVVM のサポートが充実– 今日の講師の方のブログなどでも勉強

• （個人的には）必要な部分だけ使えばいいと判断しました

わんくま同盟 東京勉強会 #60

Prism の導入効果

MVVM サポート• ViewModel 用の基底クラス (NotificationObject)• DelegateCommand• ただ、不足しているところも感じるので自前で実装

DI 的なサポート• View と View 、 View と ViewModel• EventAggregator

テストサポート• ViewModel に対してテストを書けるには書ける ( け

ど・・・ )

わんくま同盟 東京勉強会 #60

ViewModel のサンプル

コードテンプレートを定義しておくと便利

プロパティ変更イベントの発火

用意されている基底クラスを継承

わんくま同盟 東京勉強会 #60

View

わんくま同盟 東京勉強会 #60

ViewModel と EventAggregator

デザイン時に Bindingするために

引数なしコンストラクタが必要だった

DI的に IEventAgregatorを注入

わんくま同盟 東京勉強会 #60

Rx の導入効果・・・の前に、それ以前の状態

Silverlight の通信は全て非同期

• 今のところ 150程度

取得した JSON文字列をC# のオブジェクトにマッピングする処理が入る

RESTful 　 API の数だけメソッドが必要

オレオレフレームワークで共通化しよう！

わんくま同盟 東京勉強会 #60

いけてないコード　その (1)

• Event 方式 (WebClient と同様 )• よく見かけるけどコーディングが面倒

わんくま同盟 東京勉強会 #60

いけてないコード　その (2)

• 取得した後の処理を Action<T> として渡す

• 失敗時もあるので、引数は 2 つ使いづらい

わんくま同盟 東京勉強会 #60

Rx というものを知りました

• AWS SDK for WP7 というブログを書いたときに neuecc さんにコメントを頂きました

わんくま同盟 東京勉強会 #60

Rx

• 非同期を LINQ 的に簡単に–参考にさせてもらった資料

• http://www.slideshare.net/neuecc/reactive-extensions-8049041

• C# 5.0 async CTP もあるけど CTP だし、5.0 のリリース時期も読めない・・・

• WP7 では最初から Rx がライブラリに入ってる

• Data Developer Center入りして開発プロジェクトとしても継続されそう

わんくま同盟 東京勉強会 #60

Rx を採用しよう

• 通信部分の返り値は全て IOveservable<T>にする

• 呼び出し側はこんな感じ– メソッドチェーンかつラムダ式なのは好みで

す

わんくま同盟 東京勉強会 #60

Rx を採用しよう

• 通信部分はこんな感じ

わんくま同盟 東京勉強会 #60

まとめ

Silverlight はクライアントだけでも導入できる

• サーバーとクライアントに明確な API を作る

生産性を上げるためにはフレームワーク導入

• 大きいフレームワークなので必要な機能を使う• MVVM サポートしてくれるけど不足も感じる

Prism

• 非同期を簡単に扱える強力なフレームワーク• 非同期部分の返り値は IObservable<T>

Rx

わんくま同盟 東京勉強会 #60

おまけ ( という名の宣伝 )

• ブログ書いてます• ( 会社のブログ )

– http://dev.worksap.co.jp/Members/t_tanaka/– AWS, Java ネタがメイン。一部 Silverlight ネ

タ• ( 個人ブログ )

– http://tanaka733.blogspot.com/– Silverlight, Azure, WP7 ネタメイン