こんにちは。Visual Studio と C# が好き過ぎて昨年 Microsoft に転職してきた、元モバイル アプリ開発者の千代田まどか (ちょまど) です。Xamarin で iOS/Android アプリ開発をしていました。 このセッションでは、Xamarin 概要を、Mobile DevOps 観点も含めながら、広く、俯瞰的な視点から包括的に解説いたします。難易度としては初心者向けですが、知識の再確認や最新のアップデートを確認したい中級者の方にもオススメです。 キーワード [Xamarin/Test Cloud/Visual Studio Mobile Center/C#/Visual Studio/iOS/Android] 受講対象: モバイル アプリ開発に興味のある方 製品/テクノロジ: AI (人工知能)/iOS/Android/Visual Studio/Xamarin 千代田まどか (ちょまど) 日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 テクニカル エバンジェリスト

1. #MW04 #decode17
MW04

2. #MW04 #decode17
デベロッパー
Microsoft
マンガ家

3. #MW04 #decode17
私が描いている漫画
「はしれ！コード学園」

4. #MW04 #decode17

5. #MW04 #decode17
#decode17 #MW04

6. #MW04 #decode17

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

8. #MW04 #decode17

9. #MW04 #decode17
マルチプラットフォーム対応

10. #MW04 #decode17
マルチプラットフォーム対応

11. #MW04 #decode17
マルチプラットフォーム対応

12. #MW04 #decode17
多くの機種で
自動UIテスト

13. #MW04 #decode17
テスターに
テストビルド
配布

14. #MW04 #decode17
各ストアで展開
(リリース)

15. #MW04 #decode17
ユーザの
使用状況
確認/分析

16. #MW04 #decode17
ユーザの
使用状況
確認/分析

17. #MW04 #decode17

18. #MW04 #decode17

19. #MW04 #decode17

20. #MW04 #decode17
• Xamarin + Visual Studio
• Mobile Center

21. #MW04 #decode17

22. #MW04 #decode17

23. #MW04 #decode17

24. #MW04 #decode17

25. #MW04 #decode17

26. #MW04 #decode17

27. #MW04 #decode17

28. #MW04 #decode17

29. #MW04 #decode17
Kotlin

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

31. #MW04 #decode17

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

33. #MW04 #decode17
iOS アプリ
Android アプリ
UWP アプリ

34. #MW04 #decode17

35. #MW04 #decode17

36. #MW04 #decode17

37. #MW04 #decode17

38. #MW04 #decode17

39. #MW04 #decode17

40. #MW04 #decode17

41. #MW04 #decode17
UIAlertController
AlertDialog
MessageDialog

42. #MW04 #decode17
DisplayAlert ("Alert", "You have been alerted", "OK");

43. #MW04 #decode17
<?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">
<!-- Settings -->
</ContentPage>
「XAML」(ざむる)という
マークアップ言語で書く

44. #MW04 #decode17

45. #MW04 #decode17

46. #MW04 #decode17
iCircuit

47. #MW04 #decode17

48. #MW04 #decode17
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%

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

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

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

52. #MW04 #decode17
Shared C# Backend

53. #MW04 #decode17
UI+APIs UI + APIsUI + APIs
バッテリー
GPS
ライト
通知
設定
バッテリー
GPS
ライト
通知
設定
バッテリー
GPS
ライト
通知
設定

54. #MW04 #decode17

55. #MW04 #decode17

56. #MW04 #decode17

57. #MW04 #decode17

58. #MW04 #decode17
Windows での開発 Mac での開発

59. #MW04 #decode17
開発環境→ Windows Mac
使うIDE Visual Studio Visual Studio for
Mac
iOS アプリ開発 ○ (ただし接続されたMacが必要
or Live Player を使う)
○
Androidアプリ開発 ○ ○
UWPアプリ開発 ○ ×
Macアプリ開発 × ○

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

61. #MW04 #decode17

62. #MW04 #decode17

63. #MW04 #decode17

64. #MW04 #decode17

65. #MW04 #decode17

66. #MW04 #decode17

67. #MW04 #decode17

68. #MW04 #decode17

69. #MW04 #decode17

70. #MW04 #decode17

71. #MW04 #decode17

72. #MW04 #decode17

73. #MW04 #decode17

74. #MW04 #decode17

75. #MW04 #decode17

76. #MW04 #decode17

77. #MW04 #decode17

78. #MW04 #decode17

79. #MW04 #decode17
github.com/dotnet/csharplang/

80. #MW04 #decode17

81. #MW04 #decode17

82. #MW04 #decode17

83. #MW04 #decode17

84. #MW04 #decode17

85. #MW04 #decode17

86. #MW04 #decode17

87. #MW04 #decode17

88. #MW04 #decode17
Microsoft Azure
Cognitive Services Face API
SQLite
人の基本情報や
過去のスコア
Person/PersonGroup
顔識別用の画像を
登録している
ところ
Face
年齢判定
顔識別

89. #MW04 #decode17
Microsoft Azure
Cognitive Services Face API
Person/PersonGroup
• Add a Person Face
• Train Person Group
撮影した顔写真を Cognitive Services に
アップロードして Face API の中の
「Person Group」に登録してトレーニング

90. #MW04 #decode17
Microsoft Azure
Cognitive Services Face API
Face
• Detect
• Identify
複数人で撮影した写真から Face
API の Detectを使って顔の場所
の判断と年齢を判定。
Identify で PersonGroup の画像
から顔が誰か識別。

91. #MW04 #decode17

92. #MW04 #decode17

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

94. #MW04 #decode17
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

95. #MW04 #decode17

96. #MW04 #decode17

97. #MW04 #decode17

98. #MW04 #decode17

99. #MW04 #decode17

100. #MW04 #decode17

101. #MW04 #decode17

102. #MW04 #decode17

103. #MW04 #decode17
Visual Studio Mobile
Center
Xamarin Test Cloud

104. #MW04 #decode17
2,000台以上の実機でUIテスト
が出来る、
クラウド上のテスト環境
コード化された UI Test と
パッケージを投入すると
指定したデバイスに展開して
テストを実行して
結果を返してくれる！！

105. #MW04 #decode17

106. #MW04 #decode17
あらゆる機種や
バージョンの OS が
用意されている、
2000を超える実機から
選んで実行できる

107. #MW04 #decode17
例) 12個の
テストケースで
1つ失敗してる
失敗したのは
Android 5.0.2

108. #MW04 #decode17
このテスト中の瞬間の
CPU使用率や
メモリ使用量など、
このデバイスの
詳細データが見られる

109. #MW04 #decode17

110. #MW04 #decode17

111. #MW04 #decode17

112. #MW04 #decode17

113. #MW04 #decode17

114. #MW04 #decode17

115. #MW04 #decode17

116. #MW04 #decode17

117. #MW04 #decode17

118. #MW04 #decode17

119. #MW04 #decode17

120. #MW04 #decode17

121. #MW04 #decode17

122. #MW04 #decode17

123. #MW04 #decode17

124. #MW04 #decode17

125. #MW04 #decode17

126. #MW04 #decode17

127. #MW04 #decode17

128. #MW04 #decode17

129. #MW04 #decode17

130. #MW04 #decode17

131. #MW04 #decode17

132. #MW04 #decode17

133. #MW04 #decode17

134. #MW04 #decode17

135. #MW04 #decode17

136. #MW04 #decode17
セッションアンケートにご協力ください
 専用アプリからご回答いただけます。
decode 2017
 スケジュールビルダーで受講セッションを
登録後、アンケート画面からご回答ください。
 アンケートの回答時間はたったの 15 秒です!

137. #MW04 #decode17
Ask the Speaker のご案内
本セッションの詳細は、後半編である次セッションが終わったら、『Ask the Speaker Room』各コーナーカウ
ンタにてご説明させていただきます。是非、お立ち寄りください。

138. #MW04 #decode17
© 2017 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。