MvvmCross 入門
- 2. 自己紹介 • @jz5 • プロ生ちゃんP • プログラマー
- 3. 本日の内容 • MvvmCross （MVVM フレームワーク）ユーザーが MvvmCross を紹介 – 今後使うかもしれないときのヒントになるかも • MvvmCross/MVVM を使っても使わなくてもどっちでもいいよ – MVVM の簡単な説明とあわせて MvvmCross の機能と使い方 を時間的にほんの少しずつ紹介 • MvvmCross でアプリを立ち上げ程度まで • 詳しくは公式ドキュメントと各種 Web サイトで • .NET 製アプリ開発者向け
- 4. 目次 • MVVM について • MvvmCross について • MvvmCross の使い方
- 5. MvvmCross 事例？ （ディーバで作っているもの） • Xamarin.iOS/Android + MvvmCross 製アプリ (BtoB) – 既存 Windows 版アプリ（C# 製）がありスマホ版を作成 • WPF + MvvmCross 製アプリ + ASP.NET (BtoB) – クライアントアプリ + Web サービス • Xamarin.iOS/Android + MvvmCross 製アプリ + ASP.NET (BtoC/BtoB) – クライアントアプリ + Web サービス • All C#
- 6. MVVM について
- 7. MVVM • GUI アプリを Model-View-ViewModel (MVVM) の構 造に分割して設計・実装するソフトウェアアーキテク チャパターン (Wikipedia より) – ビジネスロジック・バックエンドロジックのある GUI アプリ の開発用 – Martin Fowler の Presentation Model デザインパターン – MVC パターンの派生 – 目的は、プレゼンテーションとドメインを分離することで、ア プリケーション開発における保守性・開発生産性に役立てる
- 8. 余談: MVVM のはじまり • WPF/Silverlight のために Microsoft が開発（Wikipedia より） • 2005/10 に Microsoft の WPF/Silverlight アーキテクト の John Gossman が自身のブログで発表 • WPF/Silverlight のはじまり – WPF: • 2006/11 に WPF を含む .NET Framework 3.0 (WinFX) リリース • 2005/8 にコードネーム Avalon の正式名称が Windows Presentation Foundation (WPF) と発表 • Avalon: 2003/10 に PDC で発表 – Silverlight: • 2006/12 に Community Technology Preview 公開 • WPF/E: 2005/9 に PDC で発表
- 9. 余談 参考サイト • Introduction to Model/View/ViewModel pattern for building WPF apps – Tales from the Smart Client https://blogs.msdn.microsoft.com/johngossman/2005/10/08/introduction-to-modelviewviewmodel-pattern- for-building-wpf-apps/ • News：WinFX――Longhornが提供する「革新」の核心 http://www.itmedia.co.jp/news/0310/29/nj00_winfx.html • 後藤弘茂のWeekly海外ニュース https://pc.watch.impress.co.jp/docs/2003/1029/kaigai039.htm • マイクロソフトの「WPF/E」は「Flashキラー」になるか - CNET Japan https://japan.cnet.com/article/20099898/ • 本田雅一の「週刊モバイル通信」 https://pc.watch.impress.co.jp/docs/2005/0918/mobile309.htm
- 10. MVVM で分離 • GUI とビジネスロジックやバックエンドを分離 View ViewModel Model 知ってる （使う） 知ってる （使う） ビジネスロジック・ バックエンド 画面 ViewModel はデータを具体的にどう画面に表示したり するかは知らないし知っていてはダメ でも View に依存するデータや操作は知っている （例: テキストボックスに表示や入力されるテキストを 表すテキストプロパティと,ボタンを押されたときのア クションを表すコマンドは ViewModel にある） ×
- 11. MVVM のデータバインディング • View の UI 要素と ViewModel のプロパティを結びつける • 値が変わると結合先へ伝わる View ViewModel データ バインディング 例： テキストボックスのテキスト ボタンのアクション 例： 「テキストボックスのテキスト」プロパティ 「ボタンのアクション」コマンド（プロパティ）
- 12. データバインディングのコード記述のイメージ 例： テキストボックスのテキスト ボタンのアクション public class ViewModel { public string Text { get; set; } public ICommand Command { get; } } 例： 「テキストボックスのテキスト」プロパティ 「ボタンのアクション」コマンド（プロパティ） <TextBox Text="{Binding Text}" /> <Button Command="{Binding Command}" />
- 13. MvvmCross とは
- 14. .NET の MVVM 関連ライブラリ • ReactiveUI (★3,361) • MvvmCross (★2,271) • Prism (★1,866) • Caliburn.Micro (★1,371) • Catel (★285) • ReactiveProperty (★272) • FreshMvvm (★258) • DotVVM (★197) • Win Application Framework (★166) • xamvvm (★87) • Mvvm Light Toolkit • ...and more ★ : GitHub Star 2017/11/17 時点
- 15. MvvmCross • クロスプラットフォーム MVVM フレームワーク – Xamarin.iOS, Xamarin.Android, Xamarin.Mac, Xamarin.Forms, UWP, WPF – C# 製 (現在は C# 製アプリで使用が前提） – ライセンス: MS-PL
- 16. MvvmCross の主な機能 • ViewModel-View のデータバインディング • ViewModel 間のナビゲーション（画面遷移） • IoC (Inversion of Control: 制御の反転) と DI (Dependency Injection: 依存関係の挿入) • プラグイン
- 17. MvvmCross で MVVM Android View ViewModel Model iOS View WPF View 複数のプラットフォーム対応の場合も 各プラットフォームの View に対し共通の ViewModel-Model を使う
- 18. MvvmCross の今 • 今日（2017/11/20）現在 Ver. 5.4.2 – Ver. 5.0.0 が 2017年5月にリリース • Xmarin.Android/iOS が実質的なメインターゲット – プラットフォーム間で機能に差がある • v5.3 以降 Xamarin.Forms に積極的に対応中 • .NET Foundation に参加 (2017/11/15) • GitHub リポジトリ Owner: 4名 – オランダにある XABLU 社メンバーや Microsoft MVP を 中心に開発されている？
- 19. MvvmCross 良さそうなところ • 最近 開発が活発 – Issues, Pull request も反映されやすい（自分で修正したり 機能追加したりもできる） – MyGet で開発中のバージョンも使える • クロスプラットフォーム – iOS/Android/Windows/Mac で共通の ViewModel 使用・ ナビゲーションなども可能（実際のところは iOS/Android 両 対応ぐらいが現実的。ひとつのプラットフォームで MVVM の 実現・ナビゲーションなどの機能使用ももちろんアリ）
- 20. MvvmCross まだまだなところ • 現時点（v5.4.x）では .NET Standard 未対応 – ViewModel のプロジェクトは PCL プロジェクト – 現在 .NET Standard 2.0 絶賛対応中 (#2385) v6.0 リリース予定 • 破壊的変更が珍しくない – でも別に良いよね • 古いメジャーバージョンはサポートされない – 5.x系が登場したら4.x系の開発は基本終了 – でも別に良いよね • ヘビー級フレームワーク – 遅いこともある – 現在 46 の NuGet パッケージに分かれている • 情報はソースコードと英語のドキュメント – でも別に良いよね？ – 質問は Slack か Stack Overflow で
- 21. MvvmCross の使い方
- 22. MvvmCross でアプリ開発 • 最初から MvvmCross で作り始めないと途中 から MvvmCross 組み込みはたいへんかも
- 23. MvvmCross でのアプリのソリューション構成 • PCL* プロジェクト – *レガシーポータブル クラスライブラリのこと • 将来 .NET Standard クラスライブラリで作れる – ViewModel/Model 部分になる – MvvmCross では 名前.Core という名前空間をよく使う • Xamarin.iOS/Android/Mac/Forms, UWP/WPF プロ ジェクト – View 部分になる – Core プロジェクトを参照（複数のプラットフォーム対応のア プリでも Core プロジェクトはひとつ）
- 24. アプリのMvvmCross 化 （お約束のコードやライブラリの準備） 1. ソリューションに必要なプロジェクトを作成し NuGet“MvvmCross.StarterPack”をインストール – 公式でサポートしている方法 2. MvvmCross 用プロジェクトテンプレートを拡張機能 からインストールしてソリューションとプロジェクト を作成 – 有志が Visual Studio プロジェクトテンプレートを作成して いる – Getting Started with MvvmCross 参照
- 25. Sample • https://github.com/jz5/Pronama49Playground1 • MvvmCross.StarterPack から作成しただけのプロ ジェクト – Xamarin.iOS/Android, WPF • クロスプラットフォーム MVVM を実現
- 26. Sample (WPF) ResetTextCommand プロパティ Text プロパティ View データバインディング ViewModel
- 27. Sample (iOS) ResetTextCommand プロパティ Text プロパティ View データバインディング ViewModel ※ ViewModel 側は同じ class
- 28. MvvmCross の ViewModel • MvxViewModel を継承した class にする –※ 単にデータバインディングで変更を通知可能な class は MvxNotifyPropertyChanged class を継 承する • 余談: View 側の各種イベントを処理するのも簡単 –override メソッド (View~ メソッド) に記述
- 29. ViewModel のプロパティ private string _text = "Hello MvvmCross"; public string Text { get => _text; set => SetProperty(ref _text, value); } public IMvxCommand ResetTextCommand => new MvxCommand(() => Text = "Hello MvvmCross");
- 30. ViewModel のプロパティ • SetProperty –値が変更されたときのみ値を通知する MvvmCross のヘルパーメソッド • MvxCommand, MvxAsyncCommand –コマンド用 class
- 31. MvvmCross の View • 各プラットフォームの View class (UIViewController など) を継承した MvvmCross の View 用 class を使う – iOS: MvxViewController など – Android: MvxActivity など – WPF: WpfView など • ViewModel の型を指定できるジェネリック型の class があるのでそれを使うと便利 – MvxViewController<T> など
- 32. MvvmCross の View と ViewModel • 原則 View-ViewModel は1対1の関係 –名前で対応する View-ViewModel を探索 • 例: FooView と FooViewModel –iOS View: ~View/~ViewController –Android View: ~View/~Activity/~Fragment –WPF: View ~View/~Control
- 33. MvvmCross でデータバインディング • WPF/UWP: – XAML にデータバインディングの記述方法がある（ので それを使う） • iOS: – コードで UI 要素と ViewModel のプロパティを結びつ ける（MvvmCross の機能） • Android: – iOS と同じようにコードで記述 – XML に記述（MvvmCross の機能）
- 34. WPF のデータバインディング <TextBox Text="{Binding Text, Mode=TwoWay}" /> <Button Content="Reset" Command="{Binding ResetTextCommand }" />
- 35. iOS のデータバインディング var set = this.CreateBindingSet<MainView, MainViewModel>(); set.Bind(TextField).To(vm => vm.Text); set.Bind(Button).To(vm => vm.ResetTextCommand); set.Apply();
- 36. Android のデータバインディング <EditText android:layout_width="fill_parent" android:layout_height="wrap_content" local:MvxBind="Text Text" /> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Reset" local:MvxBind="Click ResetTextCommand" />
- 37. ぷちまとめ • マルチプラットフォームが実現 –ViewModel は共通 • MVVM が実現 –View-ViewModel のデータバインディング –View-ViewModel の分離
- 38. MvvmCross の機能
- 39. MvvmCross でナビゲーション • ViewModel class 内に画面遷移の記述がで きる –遷移先の ViewModel を指定 –引数・戻り値を設定できる • IMvxNavigationService の実体を DI で受 け取り使う
- 40. MainViewModel (別の画面へ値を渡す例) private IMvxNavigationService _navigation; public MainViewModel(IMvxNavigationService navigation) { _navigation = navigation; } // SecondView へ遷移させるコマンド public IMvxAsyncCommand ShowSecondViewCommand => new MvxAsyncCommand(async () => { await _navigation.Navigate( typeof(SecondViewModel), Text); }); コンストラクタから NavigationService 受け取り（Constructor Injection） ※ 余談: Service を参照する方法は これだけではない SecondViewModel 遷移と Text 値を渡す
- 41. SecondViewModel 作成 (値を受け取る例) public class SecondViewModel : MvxViewModel<string> { public override void Prepare(string parameter) { Text = parameter; } } ViewModel が受け取る型を指定 Prepare メソッドで値を受け取り
- 42. SecondViewModel (値を受け取る例) private IMvxNavigationService _navigation; public SecondViewModel(IMvxNavigationService navigation) { _navigation = navigation; } // 画面を閉じるコマンド public IMvxAsyncCommand CloseCommand => new MvxAsyncCommand(async () => { await _navigation.Close(this); }); MainViewModel と同じ Close で閉じる （呼び出した ViewModel へ戻る）
- 43. MvvmCross プラグイン • プラグインの仕組みがある – 有用なプラグイン • Messenger プラグイン: クラス間（VM-VM, VM-V 等）でメッセージ（何かしらの データ）を送受信する機能を提供 – 低機能・貧弱なプラグインも残っている • プラグインの主な役割はプラットフォーム間の差を吸収。よって… – MvvmCross に依存する機能以外はプラグインの仕組みを使う必要なし （MvvmCross プラグインの自作が必要な場面はほとんどない） – MvvmCross に依存しない Plugins for Xamarin などで事足りる
- 44. オマケ: MvvmCross の IoC/DI
- 45. Register // Immediate Singleton Mvx.RegisterSingleton<IService>(new Service()); // Lazy Singleton Mvx.RegisterSingleton<IService>(() => new Service()); // Instance per Resolve Mvx.RegisterType<IService, Service>();
- 46. Resolve // Resolve var service = Mvx.Resolve<IService>(); // CanResolve var exists = Mvx.CanResolve<IService>(); // TryResolve var success = Mvx.TryResolve<IService>(out var service);
- 47. Auto Registration • App (MvxApplication) class 内の初期化時に サービスを一括登録 CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton();
- 48. Construction // Constructor Resolution public class Foo { private readonly IService _iservice; public Foo(IService service) { _iservice = service; } } // IocConstruct // Foo のコンストラクタパラメーターを解決して Foo を生成 Mvx.IocConstruct<Foo>();
- 49. まとめ
- 50. 余談: MvvmCross をお金で支援 • Open Collective – コミュニティに支援者が継続的な寄付を行うための仕組みと オープンな入出金を行うサービス提供
- 51. まとめ • MVVM と MvvmCross を紹介 • MvvmCross はマルチプラットフォームの MVVM を実現するフレームワーク + 便利な機能 • 次のステップに進むには… – MvvmCorss 公式サイト – Xamarin Native + MvvmCross 本