Xamarin で ReactiveUI を使ってみた

1. Xamarin で ReactiveUI を使ってみた 2014.4.19 すまべん特別編「Xamarin 2.0であそぼう！」@関東 1

2. 自己紹介 • @amay077 • 位置情報エンジニア、  モバイルアプリエンジニア、etc • VB6→VC6→C#2.0  →Java/Obj-C→C#5.0 • Cosmoroot,Inc(Nagoya, Tokyo) 2 地図, 位置情報, オープンデータ, C#, Android, iOS, Xamarin Now Hot topics

3. • （ロジネビュラ） • 千年先まで費用ゼロのクラウド型倉庫管理システム • （ジクウ） • リアルタイム位置データ収集プラットフォーム • Nepula（ネプラ） • 基幹業務システム向けPaaS おもにココ担当クラウドサービスプロバイダ 3

4. HexRinger developed at ハマッカソン #2 ref http://blog.airs.co.jp/2010/12/06/hamackathon-20101204.html 4

5. しゃべPOI developed for OpenStreetMappers 続きは… 位置情報系Androidアプリケーションの開発 - Togetterまとめ 5

6. 富士フォト with ふじのくにオープンデータ MashupAward9, アーバンデータチャレンジ東京2013 ref シビックハックの広まりと地方エンジニアの躍進 ‒ MA9総括 ¦ ﬁnder 6

7. 富士フォト with ふじのくにオープンデータ MashupAward9, アーバンデータチャレンジ東京2013 7 iOS版は Xamarin で作りました

8. おことわり • 資料内の C# コードはスペース節約のため「後ろ { カッコ」にしています • Xamarin の勉強会なので iOS/Android 中心の話をします • Mac が主PC なので Xamarin Studio を使っています 8

9. 目次 • MvvmCross ではダメ？ • Reactive Extensions について • ReactiveUI とは • まとめ 9

10. MvvmCross ViewModel Model View(Droid) View(iOS) IHogeService HogeDroid HogeTouch PCL PF毎のView+DataBinding PF固有機能(カメラ、アプリ連携、GPS…) 10

11. MvvmCross • Xamarin でクロスプラットフォームアプリを開発する際の事実上標準のMVVMフレームワーク • Android, iOS, WinStore, WP, Mac などに対応 • M-VM を PCL で共通にできる • プラットフォーム依存機能は IoCコンテナで 11

12. これで良くね？ 12

13. MvvmCross のデメリット • 全方位＆高機能が故にFat！ • アセンブリ数:15（プラグインも入れると 40over） • チュートリアル動画が40本以上もある • ルールたくさん（Binding、ValueConverter、 Service、Plugin…） 13

14. MvvmCross のデメリット • クロスプラットフォームな為、機能が最大公約数 • 前の画面からの戻り値を受け取れない(Android の onActivityResult)とか • 各PFの最新機能に追いつけない • iOS - Storyboard • Android - Fragment 14

15. MvvmCross 以外の選択肢 15

16. QuickCross • https://github.com/MacawNL/QuickCross • No-Binary！ • PowerShell でコマンド叩くとコードを生成 • Mac なので試せませんでした… 16

17. propertycross.com 各SDKでクロスPF開発するための指針が書いてあるみたい圧倒的じゃないか… 17

18. そして ReactiveUI 18

19. …の前に ! Reactive Extensions ! について 19

20. Reactive Extensionsとは • https://rx.codeplex.com/ • 非同期処理やイベントを LINQ っぽく書いてチェインできるスゴイやつ • TPL(async/await含む) と比べると、複数の結果を返せるのでストリーム処理に便利 20

21. 私とRx • Android の非同期処理でコールバック地獄 • jQuery.Deferred みたいなの欲しい • 「.NET には Rx がある」というのを知る  ref:Reactive Extensionsで非同期処理を簡単に by @neueccさん  「なにこれスゴイ！」 • Java には Rx ないの？ 21

22. Java でも Rx • reactive4java - 開発終了 • Androidアプリ開発で使ってます • LINQ to Objects もあるよ • RxJava • 事実上標準の Rx for Java になる気配 • Netﬂix なので安心なんじゃないでしょうか 22

23. こうなる事は分かってた // Java - reactive4java! ObservableBuilder.range(0, 9)! .where(new Func1<Integer, Boolean>() {! @Override public Boolean invoke(Integer x) {! return x % 2 == 0;! }! }).select(new Func1<Integer, Float>() {! @Override public Float invoke(Integer x) {! return x / 2f;! }! }).register(new Observer<Float>() {! @Override public void next(Float x) { ! System.out.println(x); ! }! @Override public void ﬁnish() { }! @Override public void error(Throwable arg0) { }! }); 23 // C#! Observable.Range(0, 10)! .Where(x => x % 2 == 0)! .Select(x => x / 2f)! .Subscribe(Console.WriteLine);

24. で ReactiveUI とは 24

25. ReactiveUI • http://www.reactiveui.net/ • Reactive Extensions を全面的に採用した MVVMフレームワーク • WPF, WP, WinStore, iOS, Android, Mac 対応 • 元Microsoft で GitHub の中の人が作ってる 25

26. MvvmCross のこれ… ViewModel Model View(Droid) View(iOS) IHogeService HogeDroid HogeTouch PCL 26

27. ReactiveUI でもできます ViewModel Model View(Droid) View(iOS) IHogeService HogeDroid HogeTouch PCL IObservable IObservable IObservable M-V-VM の「つなぎ」に Rx を使ったら… …もっと COOL に！ 27

28. 基本的なクラス構成 MvxViewModel : INotifyPropertyChanged MvxActivity MvxViewController … MvvmCross ReactiveObject : INotifyPropertyChanged ReactiveActivity ReactiveViewController … ReativeUI View ViewModel 28

29. ViewModel の例 public class HogeViewModel : ReactiveObject {! string _myName;! public string MyName {! get { return _myName; }! set { this.RaiseAndSetIfChanged(ref _myName, value); }! }! ! public HogeViewModel() {! this.MyName = "amay077";! }! } 29

30. View と Binding の例 public partial class HogeViewController : ! ReactiveViewController, IViewFor<HogeViewModel> {! public override void ViewDidLoad() {! base.ViewDidLoad();! ! this.OneWayBind(this.ViewModel, ! vm => vm.MyName, ! v => v.lblMyName.Text, ! x => x.ToUpper());! ! this.ViewModel = new HogeViewModel();! }! } 30

31. View と Binding の例この ViewModel の… MyName プロパティを… Viewのラベルに表示する… …大文字に変換してからね 31 public partial class HogeViewController : ! ReactiveViewController, IViewFor<HogeViewModel> {! public override void ViewDidLoad() {! base.ViewDidLoad();! ! this.OneWayBind(this.ViewModel, ! vm => vm.MyName, ! v => v.lblMyName.Text, ! x => x.ToUpper());! ! this.ViewModel = new HogeViewModel();! }! }

32. Binding いろいろ // this = ReactiveViewController! ! // 双方向 Binding! this.Bind(this.ViewModel, ! vm=> vm.MyName, v => v.EditMyText.Text);! ! // コマンドに Bind! this.BindCommand(this.ViewModel, ! vm => vm.MyCommand, ! v => v.MyButton); 32

33. Rx っぽい ViewModel public class HogeViewModel : ReactiveObject {! ObservableAsPropertyHelper<DateTime> _time;! public DateTime Time {! get { return _time.Value; }! }! ! public HogeViewModel() {! _time = Observable.Interval(! TimeSpan.FromSeconds(1))! .Select(x => DateTime.Now)! .ToProperty(this, vm => vm.Time);! }! } 33

34. public class HogeViewModel : ReactiveObject {! ObservableAsPropertyHelper<DateTime> _time;! public DateTime Time {! get { return _time.Value; }! }! ! public HogeViewModel() {! _time = Observable.Interval(! TimeSpan.FromSeconds(1))! .Select(x => DateTime.Now)! .ToProperty(this, vm => vm.Time);! }! } Rx っぽい ViewModel 1秒毎に… 現在時間を… プロパティに設定する 34

35. Property を IObservable へ public class HogeViewModel : ReactiveObject {! bool _isAgreed;! public bool IsAgreed {! get { return _isAgreed; }! set { this.RaiseAndSetIfChanged(ref _isAgreed, value); }! }! ! public HogeViewModel() {! IObservable<bool> agreed = ! this.ObservableForProperty(vm => vm.IsAgreed)! .Select(x => x.Value);! }! } 35

36. Reactive な Command public class HogeViewModel : ReactiveObject {! public bool IsAgreed { // 省略! public ICommand Register { get; private set; }! ! public HogeViewModel() {! IObservable<bool> agreed = ! this.ObservableForProperty(vm => vm.IsAgreed)! .Select(x => x.Value);! var cmd = new ReactiveCommand(agreed);! cmd.Subscribe(_ => /* 実行した時の処理 */);! this.Register = cmd;! }! } 36

37. View で使う public partial class HogeViewController : ! ReactiveViewController, IViewFor<HogeViewModel> {! public override void ViewDidLoad() {! ! this.Bind(this.ViewModel, ! vm=> vm.IsAgreed, v => v.ToggleAgreed);! ! this.BindCommand(this.ViewModel, ! vm=> vm.Register, v => v.RegisterButton); 37 Registerコマンドの CanExecute が true の時のみ押せる

38. 実行したところ 38 vm.Register.Subscribe( _=> /* 実行した時の処理 */)

39. Command実行∼ Property更新を流れるように 39

40. シナリオ 40 Model ! .GpsAvailable .GetLocations() ViewModel ! .Location .StartGps() View bind notify listen notify

41. Model(適当) public class MyLocationModel {! public IObservable<bool> GpsAvailable() {! return Observable.Return(true);! }! ! public IObservable<LatLon> GetLocation() {! var r = new System.Random();! ! return Observable.Interval(TimeSpan.FromSeconds(1))! .Select(x => new LatLon(! 34d + r.NextDouble(), ! 135d + r.NextDouble()));! }! } 41

42. ViewModel public class FourthViewModel : ReactiveObject {! MyLocationModel _model = new MyLocationModel();! ! ObservableAsPropertyHelper<LatLon> _location;! public LatLon Location { get { return _location.Value; } }! ! public ICommand StartGps { get; private set; }! ! public FourthViewModel() {! var cmd = new ReactiveCommand(_model.GpsAvailable());! ! _location = cmd.SelectMany(_ => _model.GetLocation())! .ToProperty(this, vm => vm.Location);! ! this.StartGps = cmd;! }! } 42

43. public class FourthViewModel : ReactiveObject {! MyLocationModel _model = new MyLocationModel();! ! ObservableAsPropertyHelper<LatLon> _location;! public LatLon Location { get { return _location.Value; } }! ! public ICommand StartGps { get; private set; }! ! public FourthViewModel() {! var cmd = new ReactiveCommand(_model.GpsAvailable());! ! _location = cmd.SelectMany(_ => _model.GetLocation())! .ToProperty(this, vm => vm.Location);! ! this.StartGps = cmd;! }! } ViewModel 43 Execute されたらモデルで測位開始、結果を逐次 Property へ GPS が使えるなら CanExecute = true

44. View は普通に Binding public override void ViewDidLoad() {! base.ViewDidLoad();! ! this.OneWayBind(this.ViewModel, ! vm => vm.Location, v => v.LatLabel.Text, ! x => x.Lat.ToString("0.00"));! ! this.OneWayBind(this.ViewModel, ! vm => vm.Location, v => v.LonLabel.Text, ! x => x.Lon.ToString("0.00"));! ! this.BindCommand(this.ViewModel, ! vm => vm.StartGps, v => v.StartGpsButton);! ! this.ViewModel = new FourthViewModel(); ! } 44

45. 複合条件 (Rx を活かして) 45

46. シナリオ 46 ViewModel ! .Red .Green .Blue .Color View bind notify depends

47. ViewModel public class FifthViewModel : ReactiveObject {! ﬂoat _red;! public ﬂoat Red {! get { return _red; } set { this.RaiseAndSetIfChanged(ref _red, value); }! }! /* Blue, Green は省略 */! ! ObservableAsPropertyHelper<Color> _color;! public Color Color { get { return _color.Value; } }! ! public FifthViewModel() {! var r = this.ObservableForProperty(vm => vm.Red).Select(x => x.Value);! var g = this.ObservableForProperty(vm => vm.Green).Select(x => x.Value);! var b = this.ObservableForProperty(vm => vm.Blue).Select(x => x.Value);! ! _color = Observable.CombineLatest(r, g, b, ! (x, y, z) => new Color(x, y, z)).ToProperty(this, vm => vm.Color);! }! } 47

48. public class FifthViewModel : ReactiveObject {! ﬂoat _red;! public ﬂoat Red {! get { return _red; } set { this.RaiseAndSetIfChanged(ref _red, value); }! }! /* Blue, Green は省略 */! ! ObservableAsPropertyHelper<Color> _color;! public Color Color { get { return _color.Value; } }! ! public FifthViewModel() {! var r = this.ObservableForProperty(vm => vm.Red).Select(x => x.Value);! var g = this.ObservableForProperty(vm => vm.Green).Select(x => x.Value);! var b = this.ObservableForProperty(vm => vm.Blue).Select(x => x.Value);! ! _color = Observable.CombineLatest(r, g, b, ! (x, y, z) => new Color(x, y, z)).ToProperty(this, vm => vm.Color);! }! } ViewModel 48 3つの値がったら初回設定、以降はいずれかが変わったら設定

49. View と Binding public override void ViewDidLoad() {! this.Bind(this.ViewModel, vm => vm.Red, v => v.RedSlider.Value);! this.Bind(this.ViewModel, vm => vm.Green, v => v.GreenSlider.Value);! this.Bind(this.ViewModel, vm => vm.Blue, v => v.BlueSlider.Value);! ! this.OneWayBind(this.ViewModel, ! vm => vm.Color, ! v => v.ColorView.BackgroundColor, ! x => new UIColor(x.R, x.G, x.B, 1f));! } 49 iOSなのでUIColorに変換

50. View で MultiBinding でも public override void ViewDidLoad() {! var r = this.ObservableForProperty(v => v.ViewModel.Red)! .Select(x => x.Value);! var g = this.ObservableForProperty(v => v.ViewModel.Green)! .Select(x => x.Value);! var b = this.ObservableForProperty(v => v.ViewModel.Blue)! .Select(x => x.Value);! ! Observable.CombineLatest(r, g, b, ! (x, y, z) => new UIColor(x, y, z, 1f))! .ObserveOn(RxApp.MainThreadScheduler)! .Subscribe(x => this.ColorView.BackgroundColor = x);! } 50 UIThread で

51. ところで今まで紹介したこれ 51

52. ReactiveProperty の方がイケてますよね 52 http://reactiveproperty.codeplex.com/

53. スッキリ！ public class FifthViewModel {! public ReactiveProperty<float> Red { get; private set; }! public ReactiveProperty<float> Green { get; private set; }! public ReactiveProperty<float> Blue { get; private set; }! ! public ReactiveProperty<Color> Color { get; private set; }! ! public FifthViewModel() {! ! this.Color = Observable.CombineLatest(Red, Green, Blue, ! (x, y, z) => new Color(x, y, z)).ToReactiveProperty();! ! }! } 53

54. ReactiveUI で画面遷移 • MvvmCross では • ShowViewModel<NextViewModel>() • ReactiveUI だと • Router.NavigateCommandFor<NextViewMo del>() - 参照 • が、iOS/Android では未対応のようで… 54

55. 画面遷移 • 画面遷移はプラットフォーム毎に仕組みが違って、しかも進化が早い • MvvmCross も、iOS の Storyboard に対応し切れていない • 割りきって View に画面遷移コードを書くか、  Resolver（後述）を使って自作する 55

56. IoC というか DI というか • MvvmCross では • Service を使う by @iseebiさん • ルールに従えば Resolver を意識することない • ReactiveUI では • RxApp.MutableResolver を使う • 全てコードを書く必要あり 56

57. Resolver の仕組み r = RxUI.Resolver HogeDroid (Android) HogeTouch (iOS) Model IHogeService r.Register(()=>new HogeDroid(), typeOf(IHogeService)) var svc = r.GetService<IHogeService>() …PCL 57

58. public partial class AppDelegate : UIApplicationDelegate {! public override bool FinishedLaunching(! UIApplication app, NSDictionary options) {! ! var r = RxApp.MutableResolver;! ! r.Register(! () => new HogeTouch(), ! typeof(IHogeService));! または! r.RegisterLazySingleton(! () => new HogeTouch(), ! typeof(IHogeService)); Resolver へ登録 58 都度インスタンスを生成初回1回だけ、あと使い回し

59. Resolver を使ってインスタンス化 // Model(PCL) にて! ! IHogeService svc = ! RxApp.MutableResolver.GetService<IHogeService>();! ! svc.SomeMethod(); // 実体は Resolver に登録したクラス 59

60. まとめ 60

61. ReactiveUI のメリット • Rx で、(主に)ViewModel のコードを削減 • IoCコンテナ(Resolver)でPF固有機能を解決 • iOS/Android/WPF などの DataBinding が用意されている 61

62. 参考リンク • neue cc   http://neue.cc/ • かずきのBlog@hatena  http://okazuki.hatenablog.com/ • Rx入門 ¦ xin9le.net  http://xin9le.net/rx-intro • GitHub's Xamarin starter apps  http://log.paulbetts.org/open-source-githubs-xamarin- starter-apps/ 62

63. ありがとうございました 63

64. おまけ • Rx も PCL 化されましたが、 • Android用、iOS用のSystem.Reactive.PlatformServices.dll  は、どこに？  あるいはどうやってビルドしたらよいでしょう？ • あと PlatformServices.dll は  iOS の AOT で問題なく使えるのでしょうか？ • ref:https://twitter.com/atsushieno/status/ 457399573363712000 64

65. おまけ • PCL の Profile に Silverlight を含めると IObservable が無くなってしまうので実質SLは (ry • Profile78   This is Xamarin's current preferred profile.  とのこと。 65

Xamarin で ReactiveUI を使ってみた

You are reading a preview.

Check these out next

Xamarin で ReactiveUI を使ってみた

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Similar to Xamarin で ReactiveUI を使ってみた (20)

More from Hironov OKUYAMA (9)

Recently uploaded (20)