マルチデバイス対応アプリ開発- Xamarin, Visual Studio, 　　　　　　　 Windows Azure Mobile Services -

鈴木 章太郎テクニカルエバンジェリスト日本マイクロソフト株式会社デベロッパー & プラットフォーム統括本部http://blogs.msdn.com/b/shosuz/

iOS / Android / Windows

すべてに対応したアプリを

と

で開発する方法と、

をご理解いただくこと

本セッションの目的

テクニカルエバンジェリストhttp://blogs.msdn.com/b/shosuz

MTC アーキテクトhttp://www.microsoft.com/ja-jp/business/mtc/ads.aspx

呟きネタは主に、 Windows 、 Windows Azure 、Windows Phone, RIA, HTML5, MVVM, 　　iOS/Android x Windows Azure 連携 , Guitar … 等ASPIC 執行役員 (‘04 ~)

Wipse モバイル x クラウド部会長（’ 11 ~)2005-2012 早稲田大学大学院非常勤講師、

2008-2010 中央大学非常勤講師、 2013- 東京工業大学非常勤講師

Microsoft 軽音楽部広報担当（ Guitar/Keyboard ）

Agenda

Visual Studio + Xamarin による マルチデバイスアプリ開発 Windows Azure Mobile Services によるマルチデバイスアプリ開発 まとめ

Visual Studio + Xamarin によるマルチデバイスアプリ開発C#

6

スマートデバイス向けのアプリ開発で求められていること

最近の開発事情

すばやい市場投入

コストを抑える

質の高いUX

\

進化、多様化するプラットフォームプ

ラッ

トフ

ォー

ム

クライアント

サーバー

デバイス

サービス

デバイス & サービス 両方にクロスプラットフォーム対応の必要性

9

クロスプラットフォーム開発

ブラウザー

OS ( iOS, Android, Windows )

WebNativ

e

Hybrid

Xamarin の特徴

“ フル” ネイティブすべての API が使える

パフォーマンス高コンパイルされたパッケージ

C#, .NET , Visual Studio既存の資産やスキルを活用

11

仕組み

ネイティブXAML

ネイティブStoryboard/ XIB

ネイティブAXML

ビジネス ロジック C# & .NET

12

ネイティブStoryboard/ Xib

ネイティブAXML

開発環境

Blend

ビジネス ロジック 画面デザイン デバッグ

Android Designer

Blend

Storyboard / XIB

Windows Simulator

iOS Simulator

C#for

Android Emulator

13

Windows ストア アプリ

ネイティブXAML

ビジネス ロジック C#

Visual Studio with Xamarin

思っているよりも簡単世界中の Windows ユーザにリーチ

14

ネイティブAXML

Android アプリ

ビジネス ロジック C#

Visual Studio with Xamarin

Visual Studio で完結画面デザイナーも使える

15

ネイティブStoryboard / Xib

iOS アプリ

ビジネス ロジック C#

Visual Studio with Xamarin

C# でコーディングユーザインタフェースはネイティブ

16

PCL ( Portable Class Library )

ビジネス ロジック C#

Visual Studio with Xamarin

複数の .NET 処理系に対して、バイナリレベルで再利用できるライブラリネイティブ

17

仕組み

ユーザインターフェース機能の具体化依存コード

ユーザインターフェース機能の具体化依存コード

ユーザインターフェース機能の具体化依存コード

ロジック・データ・抽象化された機能

参照 参照 参照

データベース

BaaS : Windows Azure モバイルサービス

バックエンドの共通化

認証 プッシュ通知 スケール マルチデバイス

数分でクラウド バックエンドを追加

19

Xamarin Component Store

追加コンポーネントで簡単機能追加

20

Storyboard / XIBAndroid Designer

ネイティブAXMLBlendBlend

MvvmCross

ViewView View

ViewModel

PCL( Portable Class Library )Model

サービス

デバイス＆サービス、これからの短期間 開発

デバイス 社内システム

デバイス アプリ

既存の基幹システムパッケージ活用

サーバ & クライアント

モバイル サービスVisual Studio & Team Foundation

Server

ここまでのまとめ C# と .NET の技術でマルチデバイス開発

Xamarin.iOS Xamarin.Android Windows ストアアプリ ポータブルクラスライブラリ

アプリのデータはクラウドに保存 このあとご紹介する Windows Azure モバイルサービス

Windows Azure Mobile Services によるマルチデバイスアプリ開発C#

認証

データ

ロジック

Push

スケジューラ

Mob

ile S

erv

ices

　A

PI

Windows Azure Mobile Services とは

Windows 8 、 Windows Phone 8 、 iOS 、Android, HTML5 、 Xamarin

ネイティブ SDK

Mobile Services が提供するサービス

データアクセス、　　　プッシュ通知、　　　　　認証サポート

　 Windows 8 、 Windows Phone 8 SDK 、　　　

　 iOS SDK 、 Android SDK, HTML5 SDK

強力なサーバーサイド　　スクリプトのサポート

　プッシュ通知、バリデーション、

　プリプロセッシング、

　ポストプロセッシング、

　他の Web サービスとの連携データ

通知

認証

サーバー ロジック

拡張

ログ

診断

様々な高度なクエリーが実行可能posts : 読み取り (JavaScript)function read(query, user, request) {

query.orderByDescending('id');

request.execute({ success: function(results) {

if (results.length === 0) {

request.respond();

return;

}

var postIds = [];

results.forEach(function(p){

postIds.push(p.id);

});

var sql=

"SELECT posttags.postId, tags. id,

tags.name

FROM posttags,tags

WHERE posttags.postId IN

(";

sql += postIds.join(",");

sql += ")

AND posttags.tagId = tags.id";

console.log(sql);

……

サーバースクリプトリファレンス

http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

認証 Microsoft Account 、 Twitter 、

Facebook 、 Google ID 等 各 CRUD 操作のテーブルレベルの

　アクセス許可・すべてのユーザー・アプリケーション キーを持つユーザー・認証されたユーザーのみ・スクリプトと管理者のみ

サーバー側スクリプトを使用した　よりきめ細かい制御

http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-ios/　　

iOS

http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-android/ 　　

Androidhttp://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-users-html/ 　　

HTML5

Windows 8.1 ストアアプリの場合

http://msdn.microsoft.com/ja-JP/windows/apps

https://account.live.com/developers/applications/index　

Live Connect ポータル

Windows ストアアプリポータル

プッシュ通知

Windows ストアアプリ プッシュ通知の仕組み

1. チャネル URI を要求

2. クラウド サービスに登録

3. 認証とプッシュ通知

Windows 8 Cloud Service

Windows Push Notification

Service

Windows ストアアプリ

NotificationClient

Platform

2

3

1 3

iOS 版プッシュ通知の仕組み

サーバーサイドスクリプトから通知APNS （ Apple Push Notification Services ）に依頼

APNS と連携したプッシュ通知

iOS

通知 通知依頼

フィードバック

トークン登録

登録・トークン取得

http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-push-ios/　

Android 版プッシュ通知の仕組み

サーバーサイドスクリプトから通知Google Cloud Messaging に依頼

Google Cloud Messaging と連携したプッシュ通知

Android

通知 通知依頼

フィードバック

トークン登録

登録・トークン取得

http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-push-android/　

Visual Studio 2013

サーバーエクスプローラから

モバイルサービスへ接続

コードエディタによる

サービス側 JavaScript デバッグ

ストアアプリとモバイルサービスを連携して、容易なプッシュ通知を実現

マルチデバイス対応アプリを展開するためのアプリ向けのデータとサービスを企画・設計

Visual Studio + Xamarin による　　マルチデバイスアプリ開発が可能

Windows Azure Mobile Services でのバックエンド開発は容易

まとめ

© 2014 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.このプレゼンテーションは、情報提供のみを目的としています。 Microsoft は、この概要について、明示または暗示を問わず、いかなる保証も行いません。