狠狠撸

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

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

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

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

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

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

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

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

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

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
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はネイティブで個別に作りこむ

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

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はネイティブで個別に作りこむ

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

Controls
ActivityIndicator BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar 狠狠撸r
Stepper TableView TimePicker WebView
EntryCell ImageCell SwitchCell TextCell ViewCell
20
Switch

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

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

24
<ListView ItemsSource="{Binding Items}" CachingStrategy="RecycleElement" HasUnevenRows="true"
IsPullToRefreshEnabled="true" IsRefreshing="{Binding IsBusy, Mode=OneWay}"
RefreshCommand="{Binding RefreshDataCommand}">

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

<ListView.ItemTemplate>
<DataTemplate>
<ImageCell Detail="{Binding Detail}"
ImageSource="{Binding ImageUrl}"
Text="{Binding Text}" />
</DataTemplate>
</ListView.ItemTemplate>

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

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

.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

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

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

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

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
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
Computer Vision API

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

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

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

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

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

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

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

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

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

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

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
?を動かす

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

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

ありがとうございます。
ぜひ触ってみてください！
Twitter: @ytabuchi
Facebook: ytabuchi.xlsoft
080-7015-3586
51

狠狠撸

齿补尘补谤颈苍概要と活用方法

More Related Content

齿补尘补谤颈苍概要と活用方法