Xamarin Overview

デベロッパー
Microsoft
マンガ家

私が描いている漫画
「はしれ！コード学園」

1. Xamarin 概要
2. Xamarin で開発するメリット
3. 開発環境
4. Xamarin Native と Xamarin.Forms
1. Xamarin Native
2. Xamarin.Forms
1. Azure Mobile Apps 紹介
1. Visual Studio Mobile Center の紹介
今日の内容もくじ
Shared C# App Logic
共有 UI コード (XAML)
iOS
C# UI
共有ロジック部分のコード (C#)
Android
C# UI
Windows
C# UI

スマホアプリを
作ってみたいなあ。
作ったら
ストアに公開して
皆に使ってもらいたい！

マルチプラットフォーム対応

多くの機種で
自動UIテスト

テスターに
テストビルド
配布

各ストアで展開
(リリース)

ユーザの
使用状況
確認/分析

• Xamarin + Visual Studio
• Mobile Center

GitHub の草を
途切れさせないため
のアラートアプリ
「keep.grass」
By @wraith13 さん
UWP版 iOS版

「keep.grass」は、
モバイルセンターも
対応している

1. Xamarin 概要
2. Xamarin で開発するメリット
3. 開発環境
4. Xamarin Native と Xamarin.Forms
1. Xamarin Native
2. Xamarin.Forms
1. Azure Mobile Apps 紹介
1. Visual Studio Mobile Center の紹介

iOSアプリも Androidアプリも
全部同じ１つの言語/IDE で
開発できたらなあ

iOS アプリ
Android アプリ
UWP アプリ

C# で Android / iOS アプリ開発
従来はターゲット OS ごと
のスキル、開発言語、開発環境
統一された
スキル、開発言語、開発環境
Xamarin.Forms

UIAlertController
AlertDialog
MessageDialog

DisplayAlert ("Alert", "You have been alerted", "OK");

<?xml version="1.0" encoding="UTF-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml
x:Class="MyApp.MainPage">
<TabbedPage.Children>
<ContentPage Title="Profile" Icon="Profile.png">
<StackLayout Spacing="20" Padding="20"
VerticalOptions="Center">
<Entry Placeholder="Username"
Text="{Binding Username}"/>
<Entry Placeholder="Password"
Text="{Binding Password}"
IsPassword="true"/>
<Button Text="Login" TextColor="White"
BackgroundColor="#77D065"
Command="{Binding LoginCommand}"/>
</StackLayout>
</ContentPage>
<ContentPage Title="Settings" Icon="Settings.png">

</ContentPage>
</TabbedPage.Children>
</TabbedPage>
Xamarin.Forms では、
「XAML」(ざむる)という
マークアップ言語で UI を書く

<!–- Xamarin.Forms -->
<ContentView>
<StackLayout StackOrientation="Horizontal">
<Label Text="Work Order #"
VerticalOptions="Center"/>
<Entry Placeholder="Enter your work order"
Text="{Binding WONumber}" />
<Button Text="Save"
TextColor="White"
BackgroundColor="#77D065"
Command="{Binding SaveCommand}"/>
</StackLayout>
</ContentView>

<UserControl>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Work Order #"
VerticalAlignment="Center"/>
<TextBox PlaceholderText="Enter your work order"
Text="{Binding WONumber}" />
<Button Content="Save"
Foreground="White"
Background="#77D065"
Command="{Binding SaveCommand}"/>
</StackPanel>
</UserControl>
同じく XAML だけど、
Xamarin.Forms の XAML と
Windows 10 の XAML は
ちょくちょく違う

A N N O U N C I N G
XAML Standard 1.0
https://aka.ms/xamlstandard

Device Native Cloud
.NET Standard

言語仕様をこれから
固めていく。
GitHub で皆さまの
フィードバックを
お待ちしています
先月の Build 2017 で
アナウンスされた！
「Xamarin.Forms と UWP
間で共通化されたXAMLを
作るつもりだ」という。

Mac
iOS
Android
Windows Phone
Calca iCircuit Touch Draw
86%
14%
72%
28%
77%
23%
70%
30%
61%39%
94%
6%
88%
12%
76%
24%
90%
10%

共通化事例１
https://speakerdeck.com/amay077/xamarin-dot-android-teshi-merukurosuhuratutohuomumohairuahurikai-fa-number-jxug

共通化事例 2
https://speakerdeck.com/amay077/xamarin-dot-android-teshi-merukurosuhuratutohuomumohairuahurikai-fa-number-jxug

UI+APIs UI + APIsUI + APIs
バッテリー
GPS
ライト
通知
設定
バッテリー
GPS
ライト
通知
設定
バッテリー
GPS
ライト
通知
設定

Windows での開発 Mac での開発

アプリのパフォーマンスも
ネイティブアプリと同じ
各プラットフォームの
ネイティブ UI・APIを
100%利用可能

だった！（過去形）
約 24万円/人・年

Xamarin が
Microsoft に
ジョインしてから
1年が経ったね！
やったー！

• Xamarin.Forms
Xamarin Native

61
Shared C# App Logic
(PCL)
iOS
C# UI
Android
C# UI
Windows
C# UI
Xamarin.FormsXamarin Native
ロジックのみ共通化
UIはネイティブで個別に作りこむ

null条件演算子 / null合体演算子

タプル
LINQ
async await
ジェネリクス
ラムダ式

.NET Framework
互換環境である『Mono』
Xamarin も Mono の上で動いて

色んな
プラットフォームで
動くアプリが
開発できます！

多値戻り値を可能にする「タプル」

出力変数宣言
var out num

型スイッチ
switch (n)
case Add add:
case Const c:

IEnumerable<string> DuplicateImpl(string s)
{
yield return s;
yield return s;
}
ローカル関数

throw new ArgumentNullException(nameof(name))
throw式

• Xamarin.Forms
Xamarin Native
Shared C# App Logic
(PCL)
iOS
C# UI
Android
C# UI
Window
s
C# UI

クロスプラットフォーム開発ツール
無償
• Windows でも Mac でも開発できる
• ネイティブAPI 100%

クライアントは Xamarin,
サーバサイドは Microsoft
Azure

ユーザーデータ
保存
プッシュ
通知
ログイン機能
認証
オフラインでもアプリが動く
オフライン同期
マルチプラット
フォーム対応
サーバ
ログ監視
クライアントに持たせたくない
ロジックなど (チート対策等)
サーバでの独自処理

Web
Service
DB
Management
DB
Access
AuthenticationDistribution
Device
Authorization
SNS Access
Web
Acce
ss
Push Service

RESTAPI
Offline Sync
https://azure.microsoft.com/ja-jp/services/app-service/mobile/

Shared C# codebase • 100% native API access • High performance
iOS C# UI Windows C# UIAndroid C# UI
クライアント側の共有C#コード

Shared C# codebase • 100% native API access • High performance
iOS C# UI Windows C# UIAndroid C# UI
クライアント側の共有C#コード C# Server
Linux/Mono
CoreCLRAzure
クライアントとサーバ間での共有C#コード

作ったアプリの
テストやモニタリング

A/B Testing
Live Update
Storage
Push Notifications
Crash Reporting
Remote Config.
Identity
Tables
実現するにはたくさんのツールが必要！

iOS, Android アプリの UI テストも
• Xamarin Test Recorder で、UI 自動テストをノンコーディング生成
• Android / iOSXamarin Test Recorder アプリパッケージもサポート
• Visual Studio 用と OS X 用が提供
• Visual Studio 版は Android のみサポート
パッケージを指定して
操作記録
操作のたびにコードが追加。Asset も追加可能
https://www.xamarin.com/test-cloud/recorder

Xamarin Test Cloud
157
• Xamarin Test Recorder で作成した UI テストを、
Xamarin チームの保有する 2000 を超える実機上で実行
• テストステップごとにスクリーンショットが保存

HockeyApp
• Android、Cordova、iOS、OS X、Unity、
Windows、Xamarin などをサポート
• アプリ内でのフィードバックの収集
• クラッシュレポートやユーザーメトリックの収集
• アプリのベータテスターへの配布

HockeyApp Xamarin Test Cloud Xamarin Insights
Distribute • Crashes • Analytics Device Tests Crashes • Analytics
Azure Mobile Engagement Azure App Service CodePush
Analytics • Push Tables • Auth • Push Distribution

Visual Studio Mobile Center
の動いている様子
Demo:

モバイルアプリ開発のミッションコントロール
Visual Studio Mobile Center

http://blog.okazuki.jp/entry/201
7/01/11/083800

https://channel9.msdn.com/Eve
nts/de-code/2017/mw03
こちら

https://github.com/choma
do/SimpleList

Xamarin Overview

More Related Content

What's hot

Similar to Xamarin Overview

More from Madoka Chiyoda

Recently uploaded

Xamarin Overview

Editor's Notes