SlideShare a Scribd company logo
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 Technologies
Xamarin MVP
連載・執筆
Build Insider Xamarin Tips
.NET開発テクノロジ入門2016年版
コミュニティ
Japan Xamarin User Group 主宰
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
Blog: Xamarin 日本語情報
3
田淵義人@エクセルソフト
Xamarinとは
銀の弾丸ではない
C# / .NET / Visual Studio
フル “ネイティブ” アプリ
API 100% 移植
コード共通化
Xamarin
5
2つの開発手法
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.Forms
Pattern&Practices
Testable&Maintenable
24
Project Blue Monkey
フェンリル株式会社 様
http://biz.fenrir-
inc.com/application_dev
elopment/casestudy_ap
p/nhk_kouhaku.html
NHK 紅白
25
株式会社エムティーアイ 様
http://www.xlsoft.com/jp/pr
oducts/xamarin/apps_saken
omy.html
Xamarin.Forms 活用事例
Sakenomy
26
@muak_x さん
http://kamusoft.hatenab
log.jp/entry/2016/11/08/
220810
27
色しらべ
@yamamo さん
https://docs.com
/yamamoto-
takahiro/9893/jxu
gc-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
手を動かす
Teratail
Twitter (#Xamarin #JXUG タグで呟く)
39
聞く
読む・見る・聞く・調べる
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.org
http://jxug.connpass.com
もご参加ください。また来ます!
田淵義人@エクセルソフト
Twitter: @ytabuchi
facebook: ytabuchi.xlsoft
080-7015-3586
45

More Related Content

PDF
Xamarin概要+最新情報
PDF
モバイル向けクロスプラットフォーム開発ツール Xamarin の概要とその利点
PDF
Xamarin の概要と活用事例
PDF
Xamarin概要と活用方法
PDF
Xamarin から使う Azure
PDF
Computer Vision と Translator Text API 使ってみた
PDF
NET Standard と Xamarin
PDF
Xamarin 概要~Windows Embedded の業務用端末から Android へのシームレスな移行~
Xamarin概要+最新情報
モバイル向けクロスプラットフォーム開発ツール Xamarin の概要とその利点
Xamarin の概要と活用事例
Xamarin概要と活用方法
Xamarin から使う Azure
Computer Vision と Translator Text API 使ってみた
NET Standard と Xamarin
Xamarin 概要~Windows Embedded の業務用端末から Android へのシームレスな移行~

What's hot (20)

PPTX
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
PDF
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
PDF
この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015
PDF
Xamarin概要
PDF
Xamarin 基礎講座 2016年7月版
PPTX
ゆるふわ Xamarin Tips
PDF
Xamarin 概要 2017/01/15
PDF
Realm Mobile Platform 概要
PDF
BlueMonkeyプロジェクトのご紹介
PDF
20171202 Xamarinの歩き方
PPTX
Xamarin Overview
PDF
C# と Xamarin
PDF
Xamarin.forms+azureで始めるモバイル開発
PDF
Xamarin 基礎講座
PPTX
Xamarin.formsとカスタムコントロールの話
PDF
Xamarin.Forms概要
PDF
WPF開発者がXamarin.Macを触るその前に
PPTX
第1回 Japan Xamarin User Group Conference - Xamarin 概要
PDF
BoxViewの美味しい食べ方
PDF
ちょっとエモい話
Xamarin ~ iOS/Android/Windows アプリを C# で作ろう~
Xamarin de:code セッション:Windows Phone / iOS / Android アプリ同時開発のススメ
この辺でXamarin導入による 効果と限界をしっかり把握してみよう MVP Community Camp 2015
Xamarin概要
Xamarin 基礎講座 2016年7月版
ゆるふわ Xamarin Tips
Xamarin 概要 2017/01/15
Realm Mobile Platform 概要
BlueMonkeyプロジェクトのご紹介
20171202 Xamarinの歩き方
Xamarin Overview
C# と Xamarin
Xamarin.forms+azureで始めるモバイル開発
Xamarin 基礎講座
Xamarin.formsとカスタムコントロールの話
Xamarin.Forms概要
WPF開発者がXamarin.Macを触るその前に
第1回 Japan Xamarin User Group Conference - Xamarin 概要
BoxViewの美味しい食べ方
ちょっとエモい話
Ad

Viewers also liked (18)

PDF
XamarinとAWSをつないでみた話
PDF
10分でわかる無料になったXamarin
PDF
Xamarin.forms入門
PDF
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
PDF
Xamarin.Mac をこれからはじめるあなたへ
PDF
kintoneの検索高速化への取り組み
PDF
Goでヤフーの分散オブジェクトストレージを作った話 Go Conference 2017 Spring
PDF
条件式評価器の実装による管理ツールの抽象化
PDF
Xamarinの歩き方
PDF
ヒューマンコンピュテーションのための専門家発見(ステアラボ人工知能シンポジウム2017)
PDF
自然言語処理分野の最前線(ステアラボ人工知能シンポジウム2017)
PPTX
視覚×言語の最前線(ステアラボ人工知能シンポジウム2017)
PDF
My client wanted their apps synced, and I made it with Go
PDF
Google Cloud Dataflow meets TensorFlow
PDF
#Nanocristalización #84minerales #controllinnerseal para pavimentos de #Horm...
PPTX
Private Actors
PPTX
Workshop Science and Media EEMCS 27th March 2017
PPTX
Introduction to MongoDB with Sitecore
XamarinとAWSをつないでみた話
10分でわかる無料になったXamarin
Xamarin.forms入門
Xamarin 概要 @ 「Xamarin」って何? Wエバンジェリストによる特濃「Xamarin」勉強会 Rev2
Xamarin.Mac をこれからはじめるあなたへ
kintoneの検索高速化への取り組み
Goでヤフーの分散オブジェクトストレージを作った話 Go Conference 2017 Spring
条件式評価器の実装による管理ツールの抽象化
Xamarinの歩き方
ヒューマンコンピュテーションのための専門家発見(ステアラボ人工知能シンポジウム2017)
自然言語処理分野の最前線(ステアラボ人工知能シンポジウム2017)
視覚×言語の最前線(ステアラボ人工知能シンポジウム2017)
My client wanted their apps synced, and I made it with Go
Google Cloud Dataflow meets TensorFlow
#Nanocristalización #84minerales #controllinnerseal para pavimentos de #Horm...
Private Actors
Workshop Science and Media EEMCS 27th March 2017
Introduction to MongoDB with Sitecore
Ad

Similar to Xamarinをこれから始める皆様へ (20)

PDF
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
PDF
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
PDF
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
PPTX
Developers.io.札幌 xamarinってどうよ
PDF
Xamarin 概要 2014年08月版
PDF
Windows Phone / iOS / Android アプリ同時開発のススメ
PDF
Xamarin 概要 2015年5月版
PDF
Xamarin の特徴と開発手法概要
PDF
Xamarin 紹介:Windows Phone / iOS / Android アプリ同時開発のススメ 2015/8/20 版
PDF
Xamarin.Forms のこれまでとこれから
PDF
Introduction to Xamarin - JXUG 20171209
PDF
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
PDF
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
PDF
Visual Studio + xamarin で始めるモバイル アプリ開発
PPTX
Xamarin.Forms.WPF を試してみた
PDF
XamarinStudio勉強会 2014/09/08
PPTX
Xamarin 実戦投入時の留意点再確認
PDF
10分で分かるxamarin
PPTX
Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama
PPTX
Xamarin で始めるクロスプラットフォーム開発
Xamarin 概要 @ 2014/10/18 わんくま同盟 東京勉強会 #92
Xamarin 20141212 モバイルカフェスペシャル 「C#で作るiOS/Androidのクロスプラットフォームスマホアプリ開発」
Xamarin 概要 @ 2014/11/08 第2回 Japan Xamarin User Group Conference 西日本編
Developers.io.札幌 xamarinってどうよ
Xamarin 概要 2014年08月版
Windows Phone / iOS / Android アプリ同時開発のススメ
Xamarin 概要 2015年5月版
Xamarin の特徴と開発手法概要
Xamarin 紹介:Windows Phone / iOS / Android アプリ同時開発のススメ 2015/8/20 版
Xamarin.Forms のこれまでとこれから
Introduction to Xamarin - JXUG 20171209
C# を使い倒す!クロス プラットフォーム アプリ開発とクラウド連携の新潮流 - Xamarin セッション
C#でのクロスプラットフォーム モバイル開発環境 Xamarin のご紹介
Visual Studio + xamarin で始めるモバイル アプリ開発
Xamarin.Forms.WPF を試してみた
XamarinStudio勉強会 2014/09/08
Xamarin 実戦投入時の留意点再確認
10分で分かるxamarin
Xamarin基礎講座 Xamarinハンズオン(2016.09 浜松) #JXUG #jaghama
Xamarin で始めるクロスプラットフォーム開発

More from Yoshito Tabuchi (12)

PDF
Kong Summit 2021 振り返り
PDF
Kong 概要
PDF
勉強会参加のススメ
PDF
Kong Enterprise の紹介
PDF
How does a sales person grow up his community
PDF
Xamarin で Cognitive Services を使う
PDF
Xamarin で Cognitive Services を使ってみよう
PDF
Xamarinを触り始めた頃の話〜触りたい人に向けて〜
PDF
2018年のXamarinの概要と活用方法
PDF
Xamarin概要と活用方法
PDF
Xamarin 概要
PDF
Xamarin バッドノウハウ大全
Kong Summit 2021 振り返り
Kong 概要
勉強会参加のススメ
Kong Enterprise の紹介
How does a sales person grow up his community
Xamarin で Cognitive Services を使う
Xamarin で Cognitive Services を使ってみよう
Xamarinを触り始めた頃の話〜触りたい人に向けて〜
2018年のXamarinの概要と活用方法
Xamarin概要と活用方法
Xamarin 概要
Xamarin バッドノウハウ大全

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