Xamarin.Forms オリジナルタイマーアプリを作ろうハンズオン

1. / 32
Xamarin で
オリジナルタイマーアプリを
作ろうハンズオン
1
JXUG XAMARIN でオリジナルタイマーアプリを作ろうハンズオン
2018年08月04日
石崎 充良

2. / 32
自己紹介
石崎 充良 ( @mishi_cs )
Japan Xamarin Users Group ( JXUG )
Microsoft MVP for Development Technologies
言語： C# XAML
活動：
・JXUG (もくもく会) (connpass)
・城東.NET Users Group (connpass)
・C# もくもく会 (connpass)
2

3. / 32
［１ページでわかる］
Xamarinの概要
3

4. / 32
Xamarin とは
・クロスプラットフォーム
・ネイティブアプリ
・(Android ・iOS・UWP) のAPI カバー率 100 %
・C# / .NET / Visual Studio ( / F# )
・クロスプラットフォームでコードを共通化する
4

5. / 32
注意点
5

6. / 32
Mac は必要
・iOS 向けのビルドは Mac 上で行わなければならない
これはどのクロスプラットフォームアプリ開発でも同様
iOS アプリのビルドは Mac 上で行わなければならない決まり
・Xamarin Live Player はビルドしていない
Mac 不要でアプリのデバッグができるが、アプリのビルドはしていない
浅い動作しかしないため、デバッグとしても UI 定義の確認程度
6

7. / 32
［再放送］
Xamarinの概要
7

8. / 32
Xamarin とは
・Android / iOS の API を C# から使えるようにしたもの
・C# (.NET) のライブラリを使えるようにしたもの
8
ロジックのみ共通化
UIはネイティブで個別に作りこむ
Shared C# App Logic
(.NET Standard)
iOS
C# UI
Android
C# UI
Windows
C# UI

9. / 32
Xamarin の2つの開発方法
9
Xamarin Native Xamarin Forms
ロジックのみ共通化
UIはネイティブで個別に作りこむ
ロジックとUIを共通化
UIは各プラットフォームの
同じ役割のUIが自動マッピング
Shared C# App Logic
(.NET Standard)
iOS
C# UI
Android
C# UI
Windows
C# UI
Shared C# App Logic
(.NET Standard)
Shared C# UI Code
(Xamarin.Forms)

10. / 32
ネイティブの UI
10

11. / 32
UI の開発手法
11
Xamarin.Native Xamarin.Forms
概要 ネイティブの技術を使用 UI 共通化ライブラリ
定義 Android では axml
iOS では storyboard など
xaml というシンプルな XML
制約 制限のない UI 各プラットフォームの最大公約数の機能
のみ
特徴 UI が共通化できない UI にこだわらないアプリなら UI まで共
通化可能
使いどころ コンシューマー向けアプリやデザ
インを重視する場合に
ビジネス向けアプリや機能重視のツール
系アプリなどに
Formsで細
かくUIを定
義したい
Custom Renderer で独自にネイティブの
コントロール/プロパティと結合するコン
トロールを作成可能

12. / 32
C# (.NET) のライブラリ
全体像
12
Xamarin
コード共有
Xamarin.Navive Xamarin.Forms.axml /
storyboard
Xamarin.Android
Xamarin.iOS
UI の定義UI の定義 どちらか選択

13. / 32
C#
・C 言語の流れをくむオブジェクト指向言語で比較的素直で覚えやすい
・言語の進化も歩みを止めていない
13

14. / 32
コード共有化
14

15. / 32
Xamarin とは
・Android / iOS の API を C# から使えるようにしたもの
・C# (.NET) のライブラリを使えるようにしたもの
15
ロジックのみ共通化
UIはネイティブで個別に作りこむ
Shared C# App Logic
(.NET Standard)
iOS
C# UI
Android
C# UI
Windows
C# UI

16. / 32
コード共有
16
共有コード
Android 用コード
iOS 用コード
参照して使用
Android の API
C# の API

17. / 32
実行
17

18. / 32
Xamarin.Forms
18

19. / 32
プロジェクトの新規作成
19

20. / 32
プロジェクトの新規作成
20
以前は “PCL” だった

21. / 32
出来上がるプロジェクト
21
共有コード
Android 用コード
iOS 用コード
UI 定義

22. / 32
XAML による UI の定義
22

23. / 32
C# によるコード
23

24. / 32
一目で分かった気になる Xamarin.Forms
24
データバインディング
リストの要素ごとの定義
ListView
TextView
LinearLayout
C# の API でコード共有
ページクラスの
メンバーとして
自動で定義される

25. / 32
実行
25

26. / 32
コードビハインド←
→MVVM
26

27. / 32
コードの記述場所
27
コードビハインド MVVM
概要 View のクラスにコードを書く Model-View-ViewModel
View と Model を分離してコードを書く
メリット 総コード量が少ない
プログラム初心者でも書ける
テストしやすい
コードが複雑になりづらい
デメリット テストがしづらい
コードが複雑になりやすい
総コード量が多い
プログラム初心者が扱えないことがある
使いどころ サンプルコード
一旦作って終わりのコード
プロダクトコード
継続してメンテナンスするコード
ハンズオン
での選択
入門者向けのもの
プログラム入門者向けのもの
特定の領域に特化したもの
実践的なもの
初級以上の方向けのもの
全体の作りを扱ったもの
今回はこちら

28. / 32
今回のハンズオン
28

29. / 32
技術的なキーワード
・Xamarin.Forms
・MVVM（Model-View-ViewModel）
・データバインディング
・メッセージング
・タイマー処理
・DependencyService
29

30. / 32
ハンズオンテキスト
30https://jxug.connpass.com/event/92252/

31. / 32
ハンズオンリスト
31

32. / 32
ハンズオンリスト
[入門]
・Xamarin Dev Days Japan ドキュメント https://github.com/chomado/xamarin-dev-doc
・Xamarin Hands On Lab https://github.com/ytabuchi/XamarinHOL
[初級]
・Xamarin.iOS https://github.com/TomohiroSuzuki128/XamiOSHandsOn01
・Xamarin.Android https://github.com/m-ishizaki/XamarinAndroidHandsOn01
・オリジナルタイマーアプリを作ろうハンズオン https://github.com/m-ishizaki/XamarinFormsMyTimerHO
[中級]
・Prism and Moq Entry Hands-on https://github.com/jxug/PrismAndMoqHansOn
・Prism for Xamarin.Forms入門 Hands-on https://github.com/jxug/PrismHandsOn
[特定領域]
・ViewRendererの要点を押さえるためのハンズオン https://github.com/P3PPP/NakayokunaruHandsOn
・App Center ハンズオン https://github.com/TomohiroSuzuki128/XamAppCenterSample2018
32

33. / 32
ありがとうございま
した！
33