xamarinをこれから始める皆様へ
TRANSCRIPT
Xamarinをこれから始める皆様へ
2017/3/25(土)CLR/H #clrh104 ～ Xamarin in 札幌 ～
Japan Xamarin User Group
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
営業(セールスエンジニア) 兼 新規事業開発室 室長Xamarin コミュニティエバンジェリストMicrosoft MVP Visual Studio and Development TechnologiesXamarin MVP
連載・執筆Build Insider Xamarin Tips.NET開発テクノロジ入門2016年版
コミュニティJapan Xamarin User Group 主宰Twitter: @ytabuchifacebook: ytabuchi.xlsoftBlog: Xamarin 日本語情報
3
田淵義人＠エクセルソフト
Xamarinとは
銀の弾丸ではない
C# / .NET / Visual Studio
フル “ネイティブ” アプリ
API 100% 移植
コード共通化
Xamarin
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
必要な知識
プラットフォーム個別
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
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はネイティブで個別に作りこむ
Xamarin ネイティブ
9
抽象化UIライブラリ最大公約数
ワンソース・ネイティブUI/UX
XAML / MVVM
拡張可能
10
Xamarin.Forms
Shared C# App Logic
(PCL)
Shared XAML/C# UI Code
(Xamarin.Forms)
Xamarin.Forms
Pages
11
Layouts
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
Xamarin.Forms
ワンソース
ネイティブのUI/UX
XAML
MVVM
14
XAML
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
XAML
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
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>
Forms Previewer
Visual Studio：［表示＞その他のウィンドウ＞Forms Previewer］
Xamarin Studio：XAML ファイルを開いて右上のプレビューボタンをクリック
22
どんなアプリが作れるの？
Expense(経費精算)アプリ適度な機能
ログイン、カメラ、クラウドにデータ保存、オフライン保存、日付／金額／場所などの入力、チャート
更にOCR、GPS、管理者モード、承認、Excel出力などの機能も
Prism for Xamarin.FormsPattern＆Practices
Testable＆Maintenable
24
Project Blue Monkey
フェンリル株式会社 様
http://biz.fenrir-inc.com/application_development/casestudy_app/nhk_kouhaku.html
NHK 紅白
25
株式会社エムティーアイ 様
http://www.xlsoft.com/jp/products/xamarin/apps_sakenomy.html
Xamarin.Forms 活用事例
Sakenomy
26
@muak_x さん
http://kamusoft.hatenablog.jp/entry/2016/11/08/220810
27
色しらべ
@yamamo さん
https://docs.com/yamamoto-takahiro/9893/jxugc-17-xamarin
28
AzureVM Power Switch
@kikutaro_ さん
http://kikutaro777.hatenablog.com/entry/2016/08/07/230423
29
坂道46セレクション
https://www.xamarin.com/prebuilt
Prebuilt サンプル
30
Acquaint Sport Xamarin CRM My Shoppe
資料一覧
ビデオ録画
31
JXUGC #17 お前の Xamarin アプリを見せてみろ！
C#er/XAMLer/WPF/UWP → Forms
iOS/Android ネイティブ経験者 → ネイティブ
素早く簡単に作る → Forms
きれいに細かく作る → ネイティブ
社内プロジェクト → Forms
受託開発 → ？？
HTML/JS → Cordova? React Native?
32
Xamarin.Forms VS Xamarin ネイティブ
Xamarinをこれから始める皆様へ
Visual Studio 2017 なら、インストールするだけ！http://ytabuchi.hatenablog.com/entry/visualstudio2017
Android SDK をちゃんとインストール
Intel HAXM の x86 Emulator を使用する*個人的な見解です
丁寧に環境構築
34
Android SDK／各バージョンのSDK Platform
35
Xamarin逆引きTips - Build Insider
Xamarinに関する投稿 - Qiita
Xamarin Advent Calendar 2016
Insider.NET > .NET TIPS - ＠IT
JXUG : 関連ページ、ブログ一覧
Xamarin 日本語ドキュメントの紹介 : XLsoft エクセルソフト
36
日本語ドキュメントを読む
かずきのXamarin.Forms入門
Xamarinエキスパート養成読本 (Software Design plus)
Xamarinではじめるスマホアプリ開発 (I/O BOOKS)
37
書籍
Xamarin Charange (←New)
Xamarin ハンズオン (初級)
Xamarin.Android ListView ハンズオン (初級)
Xamarin Dev Days Tokyo ハンズオン (中級)
Xamarin.Forms CustomRenderer ハンズオン (中級)
JXUG で主催しているハンズオンやもくもく会に参加http://jxug.connpass.com
38
手を動かす
読む・見る・聞く・調べるGuides - Xamarin (ドキュメント)
Recipes - Xamarin (逆引き辞典)
Xamarin Blog
Xamarin channel - Youtube (セッション動画)
Xamarin Forums
Stackoverflow
PreBuilt アプリBuild Apps Quickly using Prebuilt App Templates - Xamarin
40
英語ドキュメント
Xamarin.iOS／Xamarin.Android は iOS API／Android APIの薄いラッパーである
ネイティブの情報を探して Xamarin で使う
41
iOS／Android ネイティブの情報
通称「Forms本」または「ペゾルド本」日本語版を作成中です。
原文は以下で公開中
https://developer.xamarin.com/guides/xamarin-forms/creating-mobile-apps-xamarin-forms/
42
Creating Mobile Apps with Xamarin.Forms Book
まとめ
C# だけで iOS／Android アプリを開発できる
ネイティブ API はゆっくり覚えれば良い
Xamarin は怖くない
44
ありがとうございます
http://jxug.orghttp://jxug.connpass.comもご参加ください。また来ます！
田淵義人＠エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
080-7015-3586
45