狠狠撸

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

自己紹介
? @jz5
? プロ生ちゃんP
? プログラマー

本日の内容
? MvvmCross （MVVM フレームワーク）ユーザーが
MvvmCross を紹介
– 今後使うかもしれないときのヒントになるかも
? MvvmCross/MVVM を使っても使わなくてもどっちでもいいよ
– MVVM の簡単な説明とあわせて MvvmCross の機能と使い方
を時間的にほんの少しずつ紹介
? MvvmCross でアプリを立ち上げ程度まで
? 詳しくは公式ドキュメントと各種 Web サイトで
? .NET 製アプリ開発者向け

目次
? MVVM について
? MvvmCross について
? MvvmCross の使い方

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#

MVVM
? GUI アプリを Model-View-ViewModel (MVVM) の構
造に分割して設計?実装するソフトウェアアーキテク
チャパターン (Wikipedia より)
– ビジネスロジック?バックエンドロジックのある GUI アプリ
の開発用
– Martin Fowler の Presentation Model デザインパターン
– MVC パターンの派生
– 目的は、プレゼンテーションとドメインを分離することで、ア
プリケーション開発における保守性?開発生産性に役立てる

余談: 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 で発表

余談参考サイト
? 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

MVVM で分離
? GUI とビジネスロジックやバックエンドを分離
View ViewModel Model
知ってる
（使う）
知ってる
（使う）
ビジネスロジック?
バックエンド
画面 ViewModel はデータを具体的にどう画面に表示したり
するかは知らないし知っていてはダメ
でも View に依存するデータや操作は知っている
（例: テキストボックスに表示や入力されるテキストを
表すテキストプロパティと,ボタンを押されたときのア
クションを表すコマンドは ViewModel にある）
×

MVVM のデータバインディング
? View の UI 要素と ViewModel のプロパティを結びつける
? 値が変わると結合先へ伝わる
View ViewModel
データ
バインディング
例：
テキストボックスのテキスト
ボタンのアクション
例：
「テキストボックスのテキスト」プロパティ
「ボタンのアクション」コマンド（プロパティ）

データバインディングのコード記述のイメージ
例：
テキストボックスのテキスト
ボタンのアクション
public class ViewModel
{
public string Text { get; set; }
public ICommand Command { get; }
}
例：
「テキストボックスのテキスト」プロパティ
「ボタンのアクション」コマンド（プロパティ）
<TextBox
Text="{Binding Text}" />
<Button
Command="{Binding Command}" />

.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 時点

MvvmCross
? クロスプラットフォーム MVVM フレームワーク
– Xamarin.iOS, Xamarin.Android, Xamarin.Mac,
Xamarin.Forms, UWP, WPF
– C# 製 (現在は C# 製アプリで使用が前提）
– ライセンス: MS-PL

MvvmCross の主な機能
? ViewModel-View のデータバインディング
? ViewModel 間のナビゲーション（画面遷移）
? IoC (Inversion of Control: 制御の反転) と
DI (Dependency Injection: 依存関係の挿入)
? プラグイン

MvvmCross で MVVM
Android
View
ViewModel Model
iOS
View
WPF
View
複数のプラットフォーム対応の場合も
各プラットフォームの View に対し共通の
ViewModel-Model を使う

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 を
中心に開発されている？

MvvmCross 良さそうなところ
? 最近開発が活発
– Issues, Pull request も反映されやすい（自分で修正したり
機能追加したりもできる）
– MyGet で開発中のバージョンも使える
? クロスプラットフォーム
– iOS/Android/Windows/Mac で共通の ViewModel 使用?
ナビゲーションなども可能（実際のところは iOS/Android 両
対応ぐらいが現実的。ひとつのプラットフォームで MVVM の
実現?ナビゲーションなどの機能使用ももちろんアリ）

MvvmCross まだまだなところ
? 現時点（v5.4.x）では .NET Standard 未対応
– ViewModel のプロジェクトは PCL プロジェクト
– 現在 .NET Standard 2.0 絶賛対応中 (#2385) v6.0 リリース予定
? 破壊的変更が珍しくない
– でも別に良いよね
? 古いメジャーバージョンはサポートされない
– 5.x系が登場したら4.x系の開発は基本終了
– でも別に良いよね
? ヘビー級フレームワーク
– 遅いこともある
– 現在 46 の NuGet パッケージに分かれている
? 情報はソースコードと英語のドキュメント
– でも別に良いよね？
– 質問は Slack か Stack Overflow で

MvvmCross でアプリ開発
? 最初から MvvmCross で作り始めないと途中
から MvvmCross 組み込みはたいへんかも

MvvmCross でのアプリのソリューション構成
? PCL* プロジェクト
– *レガシーポータブルクラスライブラリのこと
? 将来 .NET Standard クラスライブラリで作れる
– ViewModel/Model 部分になる
– MvvmCross では名前.Core という名前空間をよく使う
? Xamarin.iOS/Android/Mac/Forms, UWP/WPF プロ
ジェクト
– View 部分になる
– Core プロジェクトを参照（複数のプラットフォーム対応のア
プリでも Core プロジェクトはひとつ）

アプリのMvvmCross 化
（お約束のコードやライブラリの準備）
1. ソリューションに必要なプロジェクトを作成し
NuGet“MvvmCross.StarterPack”をインストール
– 公式でサポートしている方法
2. MvvmCross 用プロジェクトテンプレートを拡張機能
からインストールしてソリューションとプロジェクト
を作成
– 有志が Visual Studio プロジェクトテンプレートを作成して
いる
– Getting Started with MvvmCross 参照

Sample
? https://github.com/jz5/Pronama49Playground1
? MvvmCross.StarterPack から作成しただけのプロ
ジェクト
– Xamarin.iOS/Android, WPF
? クロスプラットフォーム MVVM を実現

Sample (WPF)
ResetTextCommand プロパティ
Text プロパティ
View
データバインディング
ViewModel

Sample (iOS)
ResetTextCommand プロパティ
Text プロパティ
View
データバインディング
ViewModel
※ ViewModel 側は同じ class

MvvmCross の ViewModel
? MvxViewModel を継承した class にする
–※ 単にデータバインディングで変更を通知可能な
class は MvxNotifyPropertyChanged class を継
承する
? 余談: View 側の各種イベントを処理するのも簡単
–override メソッド (View~ メソッド) に記述

ViewModel のプロパティ
private string _text = "Hello MvvmCross";
public string Text
{
get => _text;
set => SetProperty(ref _text, value);
}
public IMvxCommand ResetTextCommand =>
new MvxCommand(() => Text = "Hello MvvmCross");

ViewModel のプロパティ
? SetProperty
–値が変更されたときのみ値を通知する
MvvmCross のヘルパーメソッド
? MvxCommand, MvxAsyncCommand
–コマンド用 class

MvvmCross の View
? 各プラットフォームの View class
(UIViewController など) を継承した MvvmCross の
View 用 class を使う
– iOS: MvxViewController など
– Android: MvxActivity など
– WPF: WpfView など
? ViewModel の型を指定できるジェネリック型の class
があるのでそれを使うと便利
– MvxViewController<T> など

MvvmCross の View と ViewModel
? 原則 View-ViewModel は1対1の関係
–名前で対応する View-ViewModel を探索
? 例: FooView と FooViewModel
–iOS View: ~View/~ViewController
–Android View: ~View/~Activity/~Fragment
–WPF: View ~View/~Control

MvvmCross でデータバインディング
? WPF/UWP:
– XAML にデータバインディングの記述方法がある（ので
それを使う）
? iOS:
– コードで UI 要素と ViewModel のプロパティを結びつ
ける（MvvmCross の機能）
? Android:
– iOS と同じようにコードで記述
– XML に記述（MvvmCross の機能）

WPF のデータバインディング
<TextBox Text="{Binding Text, Mode=TwoWay}" />
<Button Content="Reset"
Command="{Binding ResetTextCommand }" />

iOS のデータバインディング
var set = this.CreateBindingSet<MainView, MainViewModel>();
set.Bind(TextField).To(vm => vm.Text);
set.Bind(Button).To(vm => vm.ResetTextCommand);
set.Apply();

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" />

ぷちまとめ
? マルチプラットフォームが実現
–ViewModel は共通
? MVVM が実現
–View-ViewModel のデータバインディング
–View-ViewModel の分離

MvvmCross でナビゲーション
? ViewModel class 内に画面遷移の記述がで
きる
–遷移先の ViewModel を指定
–引数?戻り値を設定できる
? IMvxNavigationService の実体を DI で受
け取り使う

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 値を渡す

SecondViewModel 作成 (値を受け取る例)
public class SecondViewModel : MvxViewModel<string>
{
public override void Prepare(string parameter)
{
Text = parameter;
}
}
ViewModel が受け取る型を指定
Prepare メソッドで値を受け取り

SecondViewModel (値を受け取る例)
private IMvxNavigationService _navigation;
public SecondViewModel(IMvxNavigationService navigation)
{
_navigation = navigation;
}
// 画面を閉じるコマンド
public IMvxAsyncCommand CloseCommand =>
new MvxAsyncCommand(async () =>
{
await _navigation.Close(this);
});
MainViewModel と同じ
Close で閉じる
（呼び出した ViewModel へ戻る）

MvvmCross プラグイン
? プラグインの仕組みがある
– 有用なプラグイン
? Messenger プラグイン: クラス間（VM-VM, VM-V 等）でメッセージ（何かしらの
データ）を送受信する機能を提供
– 低機能?貧弱なプラグインも残っている
? プラグインの主な役割はプラットフォーム間の差を吸収。よって…
– MvvmCross に依存する機能以外はプラグインの仕組みを使う必要なし
（MvvmCross プラグインの自作が必要な場面はほとんどない）
– MvvmCross に依存しない Plugins for Xamarin などで事足りる

オマケ: MvvmCross の IoC/DI

Register
// Immediate Singleton
Mvx.RegisterSingleton<IService>(new Service());
// Lazy Singleton
Mvx.RegisterSingleton<IService>(() => new Service());
// Instance per Resolve
Mvx.RegisterType<IService, Service>();

Resolve
// Resolve
var service = Mvx.Resolve<IService>();
// CanResolve
var exists = Mvx.CanResolve<IService>();
// TryResolve
var success = Mvx.TryResolve<IService>(out var service);

Auto Registration
? App (MvxApplication) class 内の初期化時に
サービスを一括登録
CreatableTypes()
.EndingWith("Service")
.AsInterfaces()
.RegisterAsLazySingleton();

Construction
// Constructor Resolution
public class Foo
{
private readonly IService _iservice;
public Foo(IService service)
{
_iservice = service;
}
}
// IocConstruct
// Foo のコンストラクタパラメーターを解決して Foo を生成
Mvx.IocConstruct<Foo>();

余談: MvvmCross をお金で支援
? Open Collective
– コミュニティに支援者が継続的な寄付を行うための仕組みと
オープンな入出金を行うサービス提供

まとめ
? MVVM と MvvmCross を紹介
? MvvmCross はマルチプラットフォームの
MVVM を実現するフレームワーク
+ 便利な機能
? 次のステップに進むには…
– MvvmCorss 公式サイト
– Xamarin Native + MvvmCross 本

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

狠狠撸

MvvmCross 入門

Recommended

More Related Content

What's hot (19)

Similar to MvvmCross 入門 (20)

More from jz5 MATSUE (16)

Recently uploaded (6)

MvvmCross 入門