O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

MvvmCross 入門

1.151 visualizações

Publicada em

http://pronama.jp/49

Publicada em: Software
  • Seja o primeiro a comentar

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

×