Model-View-(Reactive)Presenterパターンをやってみた話

1. UniRxでMV(R)Pパターン
をやってみた
@toRisouP
2015/04/16

2. 自己紹介
• とりすーぷ（@toRisouP)
• 趣味でUnityいじってます

3. みくみくまうす
• ニコ生の配信支援ツール
• MMDモデルがニコ生のコメントを読み上げる
• フリーソフトとして公開中
• Unity5製（内部でUniRx使ってる）
http://mikumikumouth.net/

4. uGUI
Unity GUI

5. みくみくまうす

6. uGUIに適したM-V-○パターン

7. Model View (Reactive) Presenter

8. MV(R)Pパターン
• UniRxを使ったuGUIのデザインパターン
• ModelとViewを「Presenter」がつなぐ
• データのやり取りにObservableとReactivePropertyを使う
• View/Modelの変更をReactiveに反映できる

9. Model-View-(Reactive)Presenterパターン
View
(uGUIコンポーネント等)）
Presenter
Model
ModelはPresenterに依存しない
ViewはPresenterに依存しない
PresenterがModelとViewを参照する

10. Model-View-(Reactive)Presenterパターン
View
(uGUIコンポーネント等)）
Presenter
Model
ReactiveProperty
内部状態の変化の通知
Subscribe
Viewへ反映
xxxAsObservable
ユーザ入力
Subscribe
Modelに反映

11. みくみくまうす
MV(R)Pパターンで実装してある

12. MV(R)P実装例
• 読み上げタイミング調整スライダ
• Slider または InputField を調整すると値をModelに反映
• 片方のViewを変動させるともう一方のViewに反映
• InputFieldの値域は-1500～1500
• ただしSliderの値は10刻み（-150～150）

13. Model (ConfigComponent)
関係図
SpeechTimingSlider
Presenter
SpeechTimingReactiveProperty
OnValueChangedAsObservable()
SpeechTimingInputField
Presenter
OnEndEditAsObservable()

14. SpeechTimingSliderPresenter

15. SpeechTimingInputFieldPresenter

16. MV(R)Pで実装してみた感想
• シンプルにキレイにまとまる
• ModelとViewの独立性が保たれるのがイイ！
• Viewの変換ロジックにRxのオペレータがそのまま使える
• Presenterの作り方は考える必要がありそう
– SceneあたりPresenterは1つにして集中管理する？
– 1つのUI要素あたり1つPresenterを作る？

17. まとめ
• UnityでRxが使えるの本当にスバラシイ
– uGUI周りがキレイに書けてとても助かる
– ゲームロジックとも結構相性が良い
– もっと流行らせたい
• MV(R)Pは現時点ではuGUIにおける最適解かも
– Rxの難しい部分が出てこないのでRx初心者でも使えるはず
@toRisouP

19. PresenterをView要素毎に作るパターン
View
Presenter
Model
View
Presenter
View
Presenter
View
Presenter
○ GetComponentでPresenterがViewを取得できる(スクリプト内で完結する)
○ 1Presenter当たりのコード量が少なくなって読みやすくなる
× View要素の数だけPresenterが必要になる

20. みくみくまうすのPresenterの数
• １UI要素あたり１Presenterで作ったら大変なことになった

21. Presenterを1つにまとめるパターン
View
Presenter
Model
View View View
○ 1つのPresenterで管理するのでどこで処理しているか把握しやすい
○ View要素の数の変更に対応しやすい
× ViewとPresenterの紐付けがInspector Viewからになる