Xamarin.Forms とコンソールアプリでモデル層を共通化してみた

Transcript

1. Xamarin.Forms とコンソールアプリでモデル層
   を共通化してみた
   まどすた #2 2017/03/11
   Yuka Abuno
   

   View Slide

2. @yu_ka1984
   Yuka Abuno
   http://tamafuyou.hatenablog.com/
   シグマコンサルティング株式会社
   アーキテクト
   になることが目標
   

   View Slide

3. 初めてXamarin.Formsを使ったスマホアプリプロジェクトは
   WPFアプリをスマホで使えるようにするプロジェクトでした。
   ほとんどコード共通化できなかった(´・ω・`)
   

   View Slide

4. .NET Frameworkで書けるクライアントアプリ
   2010年当時 現在
   ▪ コンソールアプリ
   ▪ Windows Forms (まだまだ現役!(^^)!)
   ▪ WPF
   ▪ UWP
   ▪ Xamarin Mac
   ▪ Xamarin Android
   ▪ Xamarin iOS
   ▪ Unity
   ▪ erc
   ▪ コンソールアプリ
   ▪ Windows Forms(当時も現役!(^^)!)
   ▪ WPF
   ▪ Mono Gtk#
   ▪ SilverLight
   

   View Slide

5. Xamarin開発だけでも
   Xamarin.Formsを使ってクロスプラットフォーム開発
   UIも共通コードで爆速＼(^o^)／
   Xamarin Nativeで各プラットフォーム毎に
   Nativeと同じ実装方法で
   最適なUIを目指して開発
   一つのプロダクトでXFとXNの２タイプの開発を行うこともあり得る。
   

   View Slide

6. これからの.NETアプリ開発は
   マルチプラットフォーム開発を通り越して
   マルチタイプ開発が前提になる
   かもしれない・・・
   

   View Slide

7. C#のGUIアプリは
   Model – View – Whatever
   Ｍ
   V
   C P VM
   Ｍ
   V
   Ｍ
   V
   

   View Slide

8. VM fat
   VM
   Ｍ
   V
   Model層にある関数をコールして
   戻り値を受け取ってＶＭに反映
   VMでロジックが書かれている
   VM fat
   

   View Slide

9. マルチタイプ
   what
   ever
   Ｍ
   V
   クライアントGUIタイプ
   コマンド CLIタイプ
   タイプが違っても共通化で
   きるのるはモデル層
   • バックエンド
   • ハードウェアデバイス
   • インフラ
   

   View Slide

10. モデル層は入出力をつなげたら動く
    タイプに依存しないアプリケーションそのもの
    

    View Slide

11. アプリケーションそのものなモデル層は
    コンソールアプリでも使えるはず
    

    View Slide

12. 簡単なチャットアプリを作ってみました。
    http://websocketscaletest1.azurewebsites.net/
    ASP.NET Core の WebSocketとスケールアウトを検証する
    ために作ったブラウザサンプルアプリ。
    バックエンド ->
    • Azure WebApps
    • ASP.NET Core
    • ASP.NET WebSocet Server
    • Azure ServiceBus
    フロントエンド->
    • Vue.js (JavaScript MVVM フレームワーク)
    フロントエンドを
    コンソールアプリ
    Xamarin.Forms(Android/iOS)
    で作成
    Xamarin.Forms とコンソールアプリでモデル層を共通化して
    

    View Slide

13. Visual Studio 2017 RC
    ChatSample
    クラスライブラリ(.NET Standard)
    App1
    Xamarin.Forms ( Shared )
    ConsoleApp1
    コンソールアプリ(.NET Core)
    https://github.com/yuka1984/ChatXFSample
    

    View Slide

14. ChatServiceクラス
    入力
    非同期メソッド
    • LoadRoomsAsync
    • JoinRoomAasync
    • ExitRoomAsync
    • SendMessageAsync
    出力
    • INotifyPropertyChanged(BindableBase)
    • INotifyCollectionChanged (ReadOnlyObservableCollection)
    • ErrorEventHandler
    入力 状態変更通知
    

    View Slide

15. インスタンス管理
    アプリケーションを構成するためのモデル層のインスタンスを提供する事はモ
    デル層の責務
    コンテナーを使ってアプリに必要なモデル層のインスタンスをモデル層で構築
    して引き出せるようにする。
    Repositoryクラスやプラットフォーム依存となるようなクラスはInterfaceを
    作成して差し替えられるようにする
    

    View Slide

16. Xamarin.Formsの場合
    ▪ MVVM
    ▪ ViewModelクラスとViewクラスは基本的に１対１の関係(例外あり)
    ▪ ViewModelクラスとServiceクラスはＮ対Nの関係
    ▪ ReactivePropertyを使用することでサービスクラスの変更通知に対する
    ViewModelのプロパティへの反映を行う
    V
    M
    V
    M
    V
    M
    V
    V
    V
    Ｓ
    Ｓ
    Ｓ
    

    View Slide

17. ReactiveProperty
    モデル側の
    プロパティ
    VM側のプ
    ロパティ
    Rx
    public RoomModel SelectedRoom{
    get { return selectedRoom; }
    private set { this.SetProperty(ref this.selectedRoom, value); }
    }
    public string UserName {
    get { return username; }
    private set { this.SetProperty(ref this.username, value); }
    }
    ReadOnlyReactiveProperty Title = service.ObserveProperty(x => x.SelectedRoom).Select(x => x?.Name)
    .CombineLatest(
    service.ObserveProperty(x => x.UserName),
    (roomname, username) => $"{username} - {roomname}"
    )
    .ToReadOnlyReactiveProperty();
    

    View Slide

18. コンソールアプリの場合
    ▪ ごりごり実装してみました
    ▪ サービスクラスの変更通知はイベントで受信してコンソール出力へ反映
    

    View Slide

19. まとめ
    ▪ これからの.NETクライアント開発はマルチプラットフォームに加えてマルチタイプ開発を
    意識すると良いかもしれない
    ▪ モデル層はアプリケーションそのもの
    ▪ .NETプログラマにマルチプラットフォーム/マルチタイプ開発な環境を用意してくれて、
    様々なプラットフォーム開発の知識やデザインパターンの勉強をさせてくれる凄い人た
    ちに
    感謝っ・・・・！
    圧倒的感謝っ・・・・！
    

    View Slide

20. ご清聴ありがとうございました。
    

    View Slide