2017/10/7(土) いま注目のMicrosoft最新テクノロジーをキャッチアップ ~ Azure、Cognitive Services、Xamarin ~ ＠ Java Küche 勉強会（https://java-kuche.doorkeeper.jp/events/65072）で発表した資料です。

1. Xamarin概要と活⽤⽅法
2017/10/7(⼟) いま注⽬のMicrosoft最新テク
ノロジーをキャッチアップ ~ Azure、Cognitive
Services、Xamarin ~ @ Java Küche
Japan Xamarin User Group
⽥淵義⼈＠エクセルソフト

2. 営業(セールスエンジニア) 兼 新規事業開発室 室⻑
Xamarin コミュニティエバンジェリスト
Microsoft MVP Visual Studio and Development Technologies
Xamarin MVP
コミュニティ
Japan Xamarin User Group 主宰
Twitter: @ytabuchi
Facebook: ytabuchi.xlsoft
Blog: Xamarin ⽇本語情報
2
⽥淵義⼈＠エクセルソフト

3. アジェンダ
事例
Xamarin 概要
共通化のしくみ
Demo 振り返り
まとめ

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

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

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

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

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

9. Demo
9

10. Xamarin とは

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

12. C#
12
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();
}
};

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

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

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

16. Xamarin ネイティブ
16

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

18. Pages
18

19. Layouts
19

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

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

22. XAML
22

23. Header と Footer
シンプルな ImageCell を使⽤
23
例) ListView

24. 24
<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>

25. 共通化の仕組み

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

27. .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
27

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

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

30. Demo 振り返り
30

31. Cognitive Services
31

32. 「cognitive」で検索
Cognitive Services
のSDK有無
@201707 -
BEACHSIDE BLOG
32
Azure Portal

33. 33
private async Task<OcrResults> DoOcrAsync(Stream imageStream, string language)
{
// Vision APIのService clientを作成
var visionServiceClient = new VisionServiceClient(
Secrets.ComputerVisionApiKey,
"https://southeastasia.api.cognitive.microsoft.com/vision/v1.0");
// イメージストリームをアップロードしてOCRを実⾏
var ocrResult = await visionServiceClient.RecognizeTextAsync(
imageStream, language);
return ocrResult;
}
SDK

34. 34
public static async Task<string> DoOcrAsync(Stream imageStream, string lang)
{
using (var client = new HttpClient())
{
// ヘッダーとパラメーターを付与したリクエストを作成
client.DefaultRequestHeaders.Add(
"Ocp-Apim-Subscription-Key",
Secrets.ComputerVisionApiKey);
var sendUri = $"{uriBase}?language={lang}&detectOrientation=true";
// StreamをコンテントとしてPOSTする
var content = new StreamContent(imageStream);
content.Headers.ContentType = new MediaTypeHeaderValue("application/octet-stream");
var response = await client.PostAsync(sendUri, content);
// JSONを取得してデシリアライズ
string contentString = await response.Content.ReadAsStringAsync();
var ocrResultString = JsonConvert.DeserializeObject<OcrResult>(contentString);
}
}
REST

35. 分析
テキストの読み取り
⼿書き⽂字の読み取
り（プレビュー）
著名⼈およびランド
マークの認識
ほぼリアルタイムでビ
デオを分析
サムネイルの⽣成
35
Computer Vision API

36. 60 以上の⾔語のテキ
スト間での翻訳
⾃動的に⾔語を検
出
独⾃翻訳システムを
構築
36
Translator API

37. POST
https://southeastasia.api.cognitive.m
icrosoft.com/vision/v1.0/ocr
Header
Ocp-Apim-Subscription-Key
Content-Type
Content
application/json
multipart/form-data
application/octet-stream
37
REST API

38. Token
https://api.cognitive.microsoft.com/
sts/v1.0/issueToken
Ocp-Apim-Subscription-Key から
Token
GET
appid
text
from
to
category
38
REST API

39. まとめ

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

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

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

43. 43
Visual Studio 評価版

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

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

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

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

48. 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
48
⼿を動かす

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

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

51. ありがとうございます。
ぜひ触ってみてください！
⽥淵義⼈＠エクセルソフト
Twitter: @ytabuchi
Facebook: ytabuchi.xlsoft
080-7015-3586
51