http://pronama.jp/49

1. MvvmCross 入門
プログラミング生放送勉強会
第49回@大阪
2017/11/18
Rev1: 2017/11/20

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 本

52. プログラミング生放送勉強会
第49回@大阪
2017/11/18