Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

MvvmCross 入門

741 views

Published on

http://pronama.jp/49

Published in: Software
  • Be the first to comment

MvvmCross 入門

  1. 1. MvvmCross 入門 プログラミング生放送勉強会 第49回@大阪 2017/11/18 Rev1: 2017/11/20
  2. 2. 自己紹介 • @jz5 • プロ生ちゃんP • プログラマー
  3. 3. 本日の内容 • MvvmCross (MVVM フレームワーク)ユーザーが MvvmCross を紹介 – 今後使うかもしれないときのヒントになるかも • MvvmCross/MVVM を使っても使わなくてもどっちでもいいよ – MVVM の簡単な説明とあわせて MvvmCross の機能と使い方 を時間的にほんの少しずつ紹介 • MvvmCross でアプリを立ち上げ程度まで • 詳しくは公式ドキュメントと各種 Web サイトで • .NET 製アプリ開発者向け
  4. 4. 目次 • MVVM について • MvvmCross について • MvvmCross の使い方
  5. 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. 6. MVVM について
  7. 7. MVVM • GUI アプリを Model-View-ViewModel (MVVM) の構 造に分割して設計・実装するソフトウェアアーキテク チャパターン (Wikipedia より) – ビジネスロジック・バックエンドロジックのある GUI アプリ の開発用 – Martin Fowler の Presentation Model デザインパターン – MVC パターンの派生 – 目的は、プレゼンテーションとドメインを分離することで、ア プリケーション開発における保守性・開発生産性に役立てる
  8. 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. 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. 10. MVVM で分離 • GUI とビジネスロジックやバックエンドを分離 View ViewModel Model 知ってる (使う) 知ってる (使う) ビジネスロジック・ バックエンド 画面 ViewModel はデータを具体的にどう画面に表示したり するかは知らないし知っていてはダメ でも View に依存するデータや操作は知っている (例: テキストボックスに表示や入力されるテキストを 表すテキストプロパティと,ボタンを押されたときのア クションを表すコマンドは ViewModel にある) ×
  11. 11. MVVM のデータバインディング • View の UI 要素と ViewModel のプロパティを結びつける • 値が変わると結合先へ伝わる View ViewModel データ バインディング 例: テキストボックスのテキスト ボタンのアクション 例: 「テキストボックスのテキスト」プロパティ 「ボタンのアクション」コマンド(プロパティ)
  12. 12. データバインディングのコード記述のイメージ 例: テキストボックスのテキスト ボタンのアクション public class ViewModel { public string Text { get; set; } public ICommand Command { get; } } 例: 「テキストボックスのテキスト」プロパティ 「ボタンのアクション」コマンド(プロパティ) <TextBox Text="{Binding Text}" /> <Button Command="{Binding Command}" />
  13. 13. MvvmCross とは
  14. 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. 15. MvvmCross • クロスプラットフォーム MVVM フレームワーク – Xamarin.iOS, Xamarin.Android, Xamarin.Mac, Xamarin.Forms, UWP, WPF – C# 製 (現在は C# 製アプリで使用が前提) – ライセンス: MS-PL
  16. 16. MvvmCross の主な機能 • ViewModel-View のデータバインディング • ViewModel 間のナビゲーション(画面遷移) • IoC (Inversion of Control: 制御の反転) と DI (Dependency Injection: 依存関係の挿入) • プラグイン
  17. 17. MvvmCross で MVVM Android View ViewModel Model iOS View WPF View 複数のプラットフォーム対応の場合も 各プラットフォームの View に対し共通の ViewModel-Model を使う
  18. 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. 19. MvvmCross 良さそうなところ • 最近 開発が活発 – Issues, Pull request も反映されやすい(自分で修正したり 機能追加したりもできる) – MyGet で開発中のバージョンも使える • クロスプラットフォーム – iOS/Android/Windows/Mac で共通の ViewModel 使用・ ナビゲーションなども可能(実際のところは iOS/Android 両 対応ぐらいが現実的。ひとつのプラットフォームで MVVM の 実現・ナビゲーションなどの機能使用ももちろんアリ)
  20. 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. 21. MvvmCross の使い方
  22. 22. MvvmCross でアプリ開発 • 最初から MvvmCross で作り始めないと途中 から MvvmCross 組み込みはたいへんかも
  23. 23. MvvmCross でのアプリのソリューション構成 • PCL* プロジェクト – *レガシーポータブル クラスライブラリのこと • 将来 .NET Standard クラスライブラリで作れる – ViewModel/Model 部分になる – MvvmCross では 名前.Core という名前空間をよく使う • Xamarin.iOS/Android/Mac/Forms, UWP/WPF プロ ジェクト – View 部分になる – Core プロジェクトを参照(複数のプラットフォーム対応のア プリでも Core プロジェクトはひとつ)
  24. 24. アプリのMvvmCross 化 (お約束のコードやライブラリの準備) 1. ソリューションに必要なプロジェクトを作成し NuGet“MvvmCross.StarterPack”をインストール – 公式でサポートしている方法 2. MvvmCross 用プロジェクトテンプレートを拡張機能 からインストールしてソリューションとプロジェクト を作成 – 有志が Visual Studio プロジェクトテンプレートを作成して いる – Getting Started with MvvmCross 参照
  25. 25. Sample • https://github.com/jz5/Pronama49Playground1 • MvvmCross.StarterPack から作成しただけのプロ ジェクト – Xamarin.iOS/Android, WPF • クロスプラットフォーム MVVM を実現
  26. 26. Sample (WPF) ResetTextCommand プロパティ Text プロパティ View データバインディング ViewModel
  27. 27. Sample (iOS) ResetTextCommand プロパティ Text プロパティ View データバインディング ViewModel ※ ViewModel 側は同じ class
  28. 28. MvvmCross の ViewModel • MvxViewModel を継承した class にする –※ 単にデータバインディングで変更を通知可能な class は MvxNotifyPropertyChanged class を継 承する • 余談: View 側の各種イベントを処理するのも簡単 –override メソッド (View~ メソッド) に記述
  29. 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. 30. ViewModel のプロパティ • SetProperty –値が変更されたときのみ値を通知する MvvmCross のヘルパーメソッド • MvxCommand, MvxAsyncCommand –コマンド用 class
  31. 31. MvvmCross の View • 各プラットフォームの View class (UIViewController など) を継承した MvvmCross の View 用 class を使う – iOS: MvxViewController など – Android: MvxActivity など – WPF: WpfView など • ViewModel の型を指定できるジェネリック型の class があるのでそれを使うと便利 – MvxViewController<T> など
  32. 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. 33. MvvmCross でデータバインディング • WPF/UWP: – XAML にデータバインディングの記述方法がある(ので それを使う) • iOS: – コードで UI 要素と ViewModel のプロパティを結びつ ける(MvvmCross の機能) • Android: – iOS と同じようにコードで記述 – XML に記述(MvvmCross の機能)
  34. 34. WPF のデータバインディング <TextBox Text="{Binding Text, Mode=TwoWay}" /> <Button Content="Reset" Command="{Binding ResetTextCommand }" />
  35. 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. 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. 37. ぷちまとめ • マルチプラットフォームが実現 –ViewModel は共通 • MVVM が実現 –View-ViewModel のデータバインディング –View-ViewModel の分離
  38. 38. MvvmCross の機能
  39. 39. MvvmCross でナビゲーション • ViewModel class 内に画面遷移の記述がで きる –遷移先の ViewModel を指定 –引数・戻り値を設定できる • IMvxNavigationService の実体を DI で受 け取り使う
  40. 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. 41. SecondViewModel 作成 (値を受け取る例) public class SecondViewModel : MvxViewModel<string> { public override void Prepare(string parameter) { Text = parameter; } } ViewModel が受け取る型を指定 Prepare メソッドで値を受け取り
  42. 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. 43. MvvmCross プラグイン • プラグインの仕組みがある – 有用なプラグイン • Messenger プラグイン: クラス間(VM-VM, VM-V 等)でメッセージ(何かしらの データ)を送受信する機能を提供 – 低機能・貧弱なプラグインも残っている • プラグインの主な役割はプラットフォーム間の差を吸収。よって… – MvvmCross に依存する機能以外はプラグインの仕組みを使う必要なし (MvvmCross プラグインの自作が必要な場面はほとんどない) – MvvmCross に依存しない Plugins for Xamarin などで事足りる
  44. 44. オマケ: MvvmCross の IoC/DI
  45. 45. Register // Immediate Singleton Mvx.RegisterSingleton<IService>(new Service()); // Lazy Singleton Mvx.RegisterSingleton<IService>(() => new Service()); // Instance per Resolve Mvx.RegisterType<IService, Service>();
  46. 46. Resolve // Resolve var service = Mvx.Resolve<IService>(); // CanResolve var exists = Mvx.CanResolve<IService>(); // TryResolve var success = Mvx.TryResolve<IService>(out var service);
  47. 47. Auto Registration • App (MvxApplication) class 内の初期化時に サービスを一括登録 CreatableTypes() .EndingWith("Service") .AsInterfaces() .RegisterAsLazySingleton();
  48. 48. Construction // Constructor Resolution public class Foo { private readonly IService _iservice; public Foo(IService service) { _iservice = service; } } // IocConstruct // Foo のコンストラクタパラメーターを解決して Foo を生成 Mvx.IocConstruct<Foo>();
  49. 49. まとめ
  50. 50. 余談: MvvmCross をお金で支援 • Open Collective – コミュニティに支援者が継続的な寄付を行うための仕組みと オープンな入出金を行うサービス提供
  51. 51. まとめ • MVVM と MvvmCross を紹介 • MvvmCross はマルチプラットフォームの MVVM を実現するフレームワーク + 便利な機能 • 次のステップに進むには… – MvvmCorss 公式サイト – Xamarin Native + MvvmCross 本
  52. 52. プログラミング生放送勉強会 第49回@大阪 2017/11/18

×