JXUG Fukuoka Material at 9th, December, 2017.

1. Xamarin 概要
2017/12/9(土)
JXUG福岡 Xamarin 初心者向けハンズオン
Japan Xamarin User Group
株式会社 アイキューブドシステムズ
藤本武

2. アジェンダ
事例
Xamarin 概要
共通化のしくみ
まとめ

3. Xamarin でどんなアプリが作れるの？

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

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

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

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

8. Xamarin とは

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

10. C#
10
button.Click += async (sender, e) =>
{
var client = new HttpClient();
using (var reader = new StreamReader(await client.GetStreamAsync("xxx")))
{
var deserializer = new XmlSerializer(typeof(Rss));
var latest = deserializer.Deserialize(reader) as Rss;
var feed = latest.Channel.Items
.Where(x => x.Link.Contains("xamarin"))
.Select(x => x.Title).ToList();
}
};

11. ２つの開発手法
11
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はネイティブで個別に作りこむ

12. 必要な知識
プラットフォーム
個別
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
12

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

14. Xamarin ネイティブ
14

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

16. Pages
16

17. Layouts
17

18. 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
18
Switch

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

20. XAML
20

21. Header と Footer
シンプルな ImageCell を使用
21
例) ListView

22. 22
<ListView ItemsSource="{Binding Items}" CachingStrategy="RecycleElement" HasUnevenRows="true"
IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}"
RefreshCommand="{Binding RefreshDataCommand}">
<!--Header-->
<ListView.Header>
<StackLayout Padding="10" BackgroundColor="#dadada" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"
Text="Header" TextColor="Black" />
</StackLayout>
</ListView.Header>
<!--Built in Cells-->
<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Detail="{Binding Detail}"
ImageSource="{Binding ImageUrl}"
Text="{Binding Text}" />
</DataTemplate>
</ListView.ItemTemplate>
<!--Footer-->
<ListView.Footer>
<StackLayout Padding="10" BackgroundColor="#dadada" HorizontalOptions="FillAndExpand" Orientation="Horizontal">
<Label FontAttributes="Bold" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center"
Text="Footer" TextColor="Black" />
</StackLayout>
</ListView.Footer>
</ListView>

23. 共通化の仕組み

24. PCL vs Shared
#if __ANDROID__
#if __IOS__
24
Windows
AndroidiOS

25. .NET Standard = PCL の上位互換
ポータブル クラス ライブラリとの比較
Xamarin.Forms の .NET Standard 対応
Share More Code with .NET Standard 2.0 | Xamarin Blog
Xamarin.Forms Stable Comes to .NET Standard 2.0 | Xamarin Blog
.NET Standard／PCL／Shared Library
25

26. .NET Standard | Microsoft Docs
主に技術日記: .NET Standard のおさらい
さいきんの.NETのこととかNuGetとかCoreとかよく分からないよ
ねーって話 - Qiita
Xamarin.Forms+.NET Standard 1.6を試す – Takashi
Kawasaki – Medium
.NET Standard
26

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

28. まとめ

29. アイディアをすぐにモバイルに！
C# だけで iOS／Android アプリを開発できる
Xamarin.Forms ではデスクトップアプリのように
Xamarin.iOS／Xamarin.Android でしっかりと
ネイティブ API はゆっくり覚えれば良い
Xamarin は楽しい
29

30. Xamarin をやってみたくなったら

31. Mac
Apple Developer Program への加入
勉強するのを楽しむ心
https://www.visualstudio.com/ja/ から評価版をダウンロード
必要なもの

32. 32
Visual Studio 評価版

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

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

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

36. プログラミング Xamarin 上巻
Xamarin ネイティブによるモバイルアプリ開発
Essential Xamarin
Xamarinプログラミング入門 C#によるiOS、Androidアプリケー
ション開発の基本
基礎から学ぶ Xamarinプログラミング
かずきのXamarin.Forms入門
36
書籍

37. Xamarin ハンズオン (初級)
Xamarin.Android ListView ハンズオン (初級)
Xamarin Dev Days Tokyo ハンズオン (中級)
Xamarin＆Microsoft Cognitive Services ハンズオン (中級)
Xamarin.Forms CustomRenderer ハンズオン (中級)
Xamarin.Forms＆Prism.Forms、Moq ハンズオン (上級)
JXUG で主催しているハンズオンやもくもく会に参加
http://jxug.connpass.com
37
手を動かす

38. Teratail
Facebook の JXUG グループ
Twitter (#Xamarin #JXUG タグで呟く)
38
聞く

39. 読む・見る・聞く・調べる
Guides - Xamarin (ドキュメント)
Recipes - Xamarin (逆引き辞典)
Xamarin Blog
Xamarin channel - Youtube (セッション動画)
Xamarin Forums
Stackoverflow
Prebuilt アプリを読む
39
英語情報

40. ありがとうございます。
ぜひ触ってみてください！
40