2017/3/25(土) の CLR/H #104 の発表資料です。

1. Xamarinをこれから始める皆様へ
2017/3/25(土)
CLR/H #clrh104 ～ Xamarin in 札幌 ～
Japan Xamarin User Group
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft

2. 営業(セールスエンジニア) 兼 新規事業開発室 室長
Xamarin コミュニティエバンジェリスト
Microsoft MVP Visual Studio and Development Technologies
Xamarin MVP
連載・執筆
Build Insider Xamarin Tips
.NET開発テクノロジ入門2016年版
コミュニティ
Japan Xamarin User Group 主宰
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
Blog: Xamarin 日本語情報
3
田淵義人＠エクセルソフト

3. Xamarinとは
銀の弾丸ではない

4. C# / .NET / Visual Studio
フル “ネイティブ” アプリ
API 100% 移植
コード共通化
Xamarin
5

5. ２つの開発手法
Shared C# App Logic
(PCL)
Shared XAML/C# UI Code
(Xamarin.Forms)
iOS
C# UI
Shared C# App Logic
(PCL)
Android
C# UI
Windows
C# UI
Xamarin.FormsXamarin Native
ロジックのみ共通化
UIはネイティブで個別に作りこむ
6

6. 必要な知識
プラットフォーム
個別
Xamarin Native
iOS API Objective-C, Swift Xcode
Android API Java Android Studio
Windows API Visual StudioC#
API 言語 統合開発環境
iOS API Objective-C, Swift Xcode
Android API Java Android Studio
Windows API Visual StudioC#
Xamarin.Forms
iOS API
Android API
Windows API
Objective-C, Swift Xcode
Java Android Studio
Visual StudioC#Xamarin.Forms
UI toolkit
7

7. UIは個別
ネイティブAPIは個別
PCL or Shared
ネットワーク
Json, XML
永続化
async/await
8
Xamarin ネイティブ
iOS
C# UI
Shared C# App Logic
(PCL)
Android
C# UI
Windows
C# UI
Xamarin Native
ロジックのみ共通化
UIはネイティブで個別に作りこむ

8. Xamarin ネイティブ
9

9. 抽象化UIライブラリ
最大公約数
ワンソース・ネイティブUI/UX
XAML / MVVM
拡張可能
10
Xamarin.Forms
Shared C# App Logic
(PCL)
Shared XAML/C# UI Code
(Xamarin.Forms)
Xamarin.Forms

10. Pages
11

11. Layouts
12

12. Controls
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView
EntryCell ImageCell SwitchCell TextCell ViewCell
13

13. Xamarin.Forms
ワンソース
ネイティブの
UI/UX
XAML
MVVM
14

14. XAML
15

15. XAMLの機能
16
機能 Xamarin.Forms でのサポート
XAML 2009 仕様 a
シェイプ (四角、楕円、パス など) BoxView
Resource, Style, Trigger a
Data binding a
Data template a
Control template Custom Renderer
Render Transform a
アニメーション コードのみ
カスタム XAML behavior a
カスタムマークアップ拡張 a
Value converter a

16. XAML

17. 2*3 の Grid
図のようになるように設定
1行目と2行目は高さが1:3
3行目の高さは100
Aはサイズ指定なし、Bは50x50、CはDの
上に重なる、Dは高さ100、Eは幅150高
さ50、Fは幅は50、右から20のマージン
18
Grid
1
3

18. 19
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="3*" />
<RowDefinition Height="100" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="Red" />
<BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="Red" HeightRequest="50" WidthRequest="50"
HorizontalOptions="Center" VerticalOptions="Center" />
<BoxView Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="2" BackgroundColor="Red" HeightRequest="100"
VerticalOptions="Center" />
<BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="Gray" Opacity="0.5" />
<BoxView Grid.Row="2" Grid.Column="0" BackgroundColor="Red" HeightRequest="50" WidthRequest="150"
VerticalOptions="Start" />
<BoxView Grid.Row="2" Grid.Column="1" BackgroundColor="Red" Margin="0,0,20,0" WidthRequest="50"
HorizontalOptions="End" />
</Grid>

19. Forms Previewer
Visual Studio：［表示＞その他のウィ
ンドウ＞Forms Previewer］
Xamarin Studio：XAML ファイルを開い
て右上のプレビューボタンをクリック
22

20. どんなアプリが作れるの？

21. Expense(経費精算)アプリ
適度な機能
ログイン、カメラ、クラウドにデータ保存、オフライン
保存、日付／金額／場所などの入力、チャート
更に
OCR、GPS、管理者モード、承認、Excel出力などの機
能も
Prism for Xamarin.Forms
Pattern＆Practices
Testable＆Maintenable
24
Project Blue Monkey

22. フェンリル株式会社 様
http://biz.fenrir-
inc.com/application_dev
elopment/casestudy_ap
p/nhk_kouhaku.html
NHK 紅白
25

23. 株式会社エムティーアイ 様
http://www.xlsoft.com/jp/pr
oducts/xamarin/apps_saken
omy.html
Xamarin.Forms 活用事例
Sakenomy
26

24. @muak_x さん
http://kamusoft.hatenab
log.jp/entry/2016/11/08/
220810
27
色しらべ

25. @yamamo さん
https://docs.com
/yamamoto-
takahiro/9893/jxu
gc-17-xamarin
28
AzureVM Power Switch

26. @kikutaro_ さん
http://kikutaro777
.hatenablog.com/
entry/2016/08/07
/230423
29
坂道46セレクション

27. https://www.xamarin.com/prebuilt
Prebuilt サンプル
30
Acquaint Sport Xamarin CRM My Shoppe

28. 資料一覧
ビデオ録画
31
JXUGC #17 お前の Xamarin アプリを見せてみろ！

29. C#er/XAMLer/WPF/UWP → Forms
iOS/Android ネイティブ経験者 → ネイティブ
素早く簡単に作る → Forms
きれいに細かく作る → ネイティブ
社内プロジェクト → Forms
受託開発 → ？？
HTML/JS → Cordova? React Native?
32
Xamarin.Forms VS Xamarin ネイティブ

30. Xamarinをこれから始める皆様へ

31. Visual Studio 2017 なら、インストールするだけ！
http://ytabuchi.hatenablog.com/entry/visualstudio2017
Android SDK をちゃんとインストール
Intel HAXM の x86 Emulator を使用する
*個人的な見解です
丁寧に環境構築
34

32. Android SDK／各バージョンのSDK Platform
35

33. Xamarin逆引きTips - Build Insider
Xamarinに関する投稿 - Qiita
Xamarin Advent Calendar 2016
Insider.NET > .NET TIPS - ＠IT
JXUG : 関連ページ、ブログ一覧
Xamarin 日本語ドキュメントの紹介 : XLsoft エクセルソフト
36
日本語ドキュメントを読む

34. かずきのXamarin.Forms入門
Xamarinエキスパート養成読本 (Software Design plus)
Xamarinではじめるスマホアプリ開発 (I/O BOOKS)
37
書籍

35. Xamarin Charange (←New)
Xamarin ハンズオン (初級)
Xamarin.Android ListView ハンズオン (初級)
Xamarin Dev Days Tokyo ハンズオン (中級)
Xamarin.Forms CustomRenderer ハンズオン (中級)
JXUG で主催しているハンズオンやもくもく会に参加
http://jxug.connpass.com
38
手を動かす

36. Teratail
Twitter (#Xamarin #JXUG タグで呟く)
39
聞く

37. 読む・見る・聞く・調べる
Guides - Xamarin (ドキュメント)
Recipes - Xamarin (逆引き辞典)
Xamarin Blog
Xamarin channel - Youtube (セッション動画)
Xamarin Forums
Stackoverflow
PreBuilt アプリ
Build Apps Quickly using Prebuilt App Templates - Xamarin
40
英語ドキュメント

38. Xamarin.iOS／Xamarin.Android は iOS API／Android API
の薄いラッパーである
ネイティブの情報を探して Xamarin で使う
41
iOS／Android ネイティブの情報

39. 通称「Forms本」または「ペゾルド本」
日本語版を作成中です。
原文は以下で公開中
https://developer.xamarin.com/guides/xamarin-
forms/creating-mobile-apps-xamarin-forms/
42
Creating Mobile Apps with Xamarin.Forms Book

40. まとめ

41. C# だけで iOS／Android アプリを開発できる
ネイティブ API はゆっくり覚えれば良い
Xamarin は怖くない
44

42. ありがとうございます
http://jxug.org
http://jxug.connpass.com
もご参加ください。また来ます！
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
080-7015-3586
45