Xamarin.Formsで証券取引アプリを作成したのでそれについて説明

1. 証券取引アプリ
について
JXUG22

2. 自己紹介
・名前 宮坂雅彦
・twitter @omanuke
・F#大好き

3. アジェンダ
アプリの説明
中の構造とコードの共通化について
それを支えるF#の啓蒙

4. 証券取引アプリ概要
HS証券様の証券取引アプリをXamarin.Forms
で作成させていただきました。
http://www.hs-sec.co.jp/mt/

5. 画面例

6. 特徴
WebAPIでデータセンターとやり取り。
画面数、数十。起点となる十数枚の画面があり、
うち4枚をタブとして表示。残りの画面はその他の
中にあり必要に応じて表示順序などカスタマイズ。
プラットフォーム間でのコード共有率93%以上。
パッケージとして作ってあり先日別のお客様にも
納入しました。

7. プロジェクトの構成
VMやその上のモデル・
サービス層などはF#
各社共通部、C#でPCL部
分と各OS用
各社個別部、 C#でPCL
部分と各OS用。ここに
AppDelegateや
MainActivity含みます。
今のところソリューショ
ンは一緒。

8. アプリケーション動作イメージ

9. アプリケーション動作イメージ
スタートアップシーケンス
サービス群の開始
サービスを通してサーバーにログインなどして
初期化しつつVMのType->Func<View>マップの
登録
バックグラウンドのスタートアップ処理終わった
ら初期のタブのVM元にView生成して画面表示

10. アプリケーション動作イメージ
サービス部はアクターとして動きながら大
体Rxでつながってる。
VMはサービス部とRxなどでつながりなが
ら内部もReactivePropertyっぽいものでView
とつながる。内部ロジックもRｘでやってると
こも。
その後処理に応じて次の画面のVM生成-
>View生成してナビゲーションプッシュなど
表示したい方法で表示など。

11. フレーム
Xamarin.FormsはネイティブのSDKを抽象化してUI
の作成を作れるようにしてくれますが、アプリケー
ションの構造などについてはそれほど枠組みがあ
るわけではない。
それを補うものとしてMvvmCrossやPrismなどが
ある。
開発当初はまだPrismもあまり話に上がってな
かったし細かい制御とか出来なそうだしで結局必
要なもの自前で作りました。

12. フレーム

13. フレーム
Type->Func<View>でのビューの生成。そのビューをナビ
ゲーションプッシュ、ポップアップ、オーバーレイ表示。
VM側で次の画面をどう表示するかのViewMessageを生
成。ViewMgrで受けてViewを生成しつつIViewHandlerに渡
しViewMessageに指示されたように表示。
VMインスタンス->PageじゃなくType->Func<View>とかして
るのはその方がいろいろ柔軟になるから。遅延生成とか。
Viewにしとけば表示方法も自由にできる。Pageとして表示
したければPageでラップすればいいし、組み合わせも自由
にできる。

14. フレーム
IViewHandlerの実装としてiOS側では
TabbedPageを継承したものをベースに普
通の作りで実装
Android側はPage上でGridを使いナビ
ゲーションバーやタブページっぽいもの、
ポップアップやオーバーレイなどアニメー
ションを絡めてそれっぽく表示。普通の
TabbedPageの挙動が仕様と合わなかった
ため・・・

15. アプリケーション固有の挙動
ユーザー認証きれた時にどの画面よりも上にロ
グイン画面が表示されるように制御したい
画面によって回転出来るもの出来ないものを切り
替えたい
起動の速度を早くするためにタブページでも表示
するもの以外は遅延生成したい。
発注後に注文リストに飛べるなど色々ナビゲート
したい
ページを半透明でオーバーレイ表示したい・・・

16. フレーム
Prismとかの汎用的なフレームワークだとものに
よっては実現困難だったり方法調査に時間かかっ
ていたのかもとも思う。別案件でMvvmCrossの時
いろいろ困った。
事情によって既存のを使うか、自前で作るか検
討した方がいいかも。
今回は自前で作ってiOSとAndroidの非共通部分
もフレームワーク側に押し込んで、普段の処理の
記述の際はほとんど気にしないように大体できた

17. コードの共通化例としての
チャート
特徴
15000行ぐらい
リリースタイミングによってバージョンは異なって
いるが、同じものをWindows.Forms、WinRT、
Xamarin.iOS、Xamarin.Android、HTML5のCanvas、
Azureでのチャート画像生成など複数プロジェク
トで利用
作るにあたって既存のチャートを研究して色々
と変態的な機能が盛り込まれてるけど日の目を
見ていない

18. コード共通化例としての
チャート
共通ロジック部はF#
のPCL、その他部分は
アプリやシステムごと
のプラットフォームで
実装。
HTML5へはF#部分を
JSトランスパイラで
Canvas用のIGraphicを
s実装。

19. コード共通化例としての
チャート

20. コード共通化例としての
チャート
こんな感じの四角を描く、線を描く、文字を
書くというのを実装すればチャートが描かれ
る。SkiaSharpで描くのも割と楽だった。フォ
ントで手間取ったけれど。
後は周りのデータ取得部分とか操作する
部分を実装すればチャートとして動く。

21. 共通化の基本指針
当たり前のことだけれど共通化部分と非共
通部分をインターフェースでくっきりわけ、共
通化できるところはどんどん共通化部分に
押し込み非共通部分を小さくする。
共通部分と非共通部分のインターフェース
明確にすることで相互の影響度合いも最小
化する。

22. 共通化の基本指針
その辺ができてると共通部分を修正しても
壊れないし新しいアプリで非共通部分を作
るのも楽。デバッグ含めた生産性の改善。
無理に共通化しておかしくなる時もあるけ
ど、基本的には共通化を目指す->抽象化が
必要->本質の理解・設計の改善に役立つ。
常日頃からなにが汎用的部分と特殊化部
分か。どう変えたら汎用的部分が広がるか
を考えるのは良いこと。

23. F#の啓蒙
F#は
.NETのエコシステムが使えどこでも動き
強力なIDEのサポートも(一応)受けられ
簡潔にバグの少ないコードをかけ生産性が高
い
とてもよいアプリケーション実装言語です。

24. F#の啓蒙
簡潔にバグ少なく書ける理由
型推論
強力なパターンマッチ
デフォルトイミュータブル
コンピュテーション式
それらにより簡潔なコードで記述力が高い

25. F#の啓蒙
型推論デモ

26. F#の啓蒙
パターンマッチデモ

27. F#の啓蒙
デフォルトイミュータブル
コレクションの中身をforeachでぐるぐる回してるときにコ
レクションに値を追加しようとして怒られた人
クラスの外部に中身をうかつにさらしたりクラス内部でも
ひょいっと値をいじっていじられて、それゆえそれに気づ
かずデバッグで困った人
並列処理でデータの変な更新によるバグに困った方
そんな方にイミュータブルおすすめ。
F#はmutableもつかえるけれど変更する場所を局
所化できるだけでバグが出にくくなる（と思いま
す）

28. F#の啓蒙
コンピュテーション式
モナドを実装できる仕組み(できないものもある)
ある目的向けのDSL的なことを書くのにも使える
option型を扱うmaybe<=流行りのnull安全
C#ではコンパイラをいじって実装してる
async/awaitも類似のものをライブラリとして実装
している。

29. F#の啓蒙
チェックがネストする
こんなコードが…
こんな感じに
一つでも失敗したら全体が失敗する式

30. F#の啓蒙
失敗しても確認項目すべてチェックして失
敗した個所をまとめて列挙する式

31. F#の啓蒙
失敗しても確認項目すべてチェックして失
敗した個所をまとめて列挙する式

32. F#の啓蒙
JSONパーサー

33. まとめ
もうXFは安定実用期。迷わず行けよ。
行けばわかるさ。
せっかくのXamarinだからコード共通
化頑張るといいよ
F#はいいぞ

34. 人材募集
XamarinでF#やりたい方はぜひ
ScalaやRust、Clojureも触れる…かも