効果的なマルチデバイス対応アプリケーション開発～多様化する ICT 環境への対応～

鈴木 章太郎テクニカルエバンジェリスト日本マイクロソフト株式会社http://blogs.msdn.com/b/shosuz/

Agenda

マルチデバイス活用の背景と Devices & Services Visual Studio + Xamarin による マルチデバイスアプリ開発 Windows Azure Mobile Services によるマルチデバイスアプリ開発 まとめ Appendix ： Visual Studio 2013 による最新のアプリケーション開

発

マルチデバイス活用の背景と Devices & Services

デバイスの爆発的増加

20 億 50 億 70 億 10 兆500 億

5

プラットフォームの進化とアプリケーションプ

ラッ

トフ

ォー

ム

従来型アプリケーション

• キーボード UI• イントラネット• プロセスの効率化と自動化• 構造化データ• ウォーターフォール開発

次世代型アプリケーション

• タッチ UI

• インターネット• 利用者の操作性と利便性• 非構造化データ• アジャイル開発

クライアント

サーバー

デバイス

サービス

6

ネイティブ アプリと Web アプリ

CloudWindows Azure

On-PremiseWindows Server

Web アプリ ( マルチ デバイス 対応 )

ネイティブアプリ

クロス デバイス (PC, Phone Tablet)クロス プラットフォーム (iOS, Android)

ネイティブ アプリ(Windows Store apps,

iOS apps, Android apps)

7

技術の選択

8

マルチデバイス化によるサービス実現のためのアーキテクチャー提案• アプリ向けデータとサービスをバックエンドとして追加• Visual Studio や Xamarin を使ってネイティブクライ

アントを開発

デバイス アプリ

Windows ストア、 Xamarin 、等

Visual Studio（共通プラットフォーム／共通スキルで開発）

バックエンドサービス

Windows Azure Mobile Service 等

構築アプリ

活用サービス

開発ツール

マルチ デバイス クラウド

• 商品サービス

• 注文サービス

• 配送サービス

• …

オーダー

オーダー

オーダー

基幹システム等

社内システム

バッチ連携

パッケージ等

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

10

Windows アプリ ～ Windows ストア アプリ

Windows ストア アプリデスクトップ アプリ

デスクトップ アプリ

XWindows ストア アプリ

1 台であらゆるシナリオに対応

～ 外出先ではタッチ操作で作業。ストア アプリを スナップで縮小表示させて、作業結果を見ながら、 キーボードで詳細な作業を進める ～

さまざまなシーンでの活用 タッチによるわかりやすい操作

キーボードとマウスで、迅速な作業を実施

詳細／数多くのデータを利用する業務

既存アプリケーションの利用、Office ドキュメント、メール

11

Windows 8.x プラットフォーム

XAMLHTML5CSS3

CC++

C#VB

JavaScriptHTML

JavaScriptC

C++C#VB

IE Win32.NET

Silverlight

WinRT API

WinRT Apps Desktop Apps

通信 & データ デバイス &印刷

グラフィック &メディア

アプリケーション モデル

Windows コア OS サービス

12

ストア アプリ開発ツール ～ Visual Studio & Blend for Visual Studio

Visual Studio Blend for Visual Studio

• さまざまなアプリケーションの開発、デバッグ• タブレットの操作を実現するシミュレーターを搭載• 強化されたデバッガ、パフォーマンス分析、電源消費量分

析自動 UI テスト、コード分析などへの対応

• Windows ストア アプリ、 WPF 、 Silverlight の UI および動作をデザイン

リアルタイムにファイルが同期

Mono: オープンソースの .NET Framework

Standard ECMA-334 C# 言語仕様http://www.ecma-international.org/publications/standards/Ecma-334.htm

Standard ECMA-335 共通言語インフラストラクチャーhttp://www.ecma-international.org/publications/standards/Ecma-335.htm

Xamarin - マルチデバイス向けの開発ツール

Mono ベースのプラットフォームでC# を使ったアプリ開発

Xamarin.iOS (MonoTouch)Ahead-of-Time (AOT) コンパイラでARM アセンブリコードを生成

Xamarin.Android (Mono for Android)Intermediate Language (IL) を生成、アプリ起動時に、 Just-in-Time (JIT)コンパイラでネイティブコードを生成

Xamarin を利用している企業 170,000 人を超える開発者

16

Xamarin と MonoGame を使ったゲーム

Bastion Draw A Stickman

Bye-Bye Brain

Monster Stack 2Infinite Flight

Smashing Planets

17

事例 : Hitcents – Draw a Stickman EPIC

“Xamarin made it possible for us to get Draw A Stickman developed for Windows 8. We saved thousands of

engineering hours and months of development time. “

Chris Mills, President, Hitcents

18

Visual Studio でマルチデバイス開発

http://xamarin.com/visual-studio

Xamarin.Mobile

モバイル開発におけるコードの共有をさらに進める仕掛け 現時点では連絡先、位置情報、カメラの API を共通化

http://xamarin.com/mobileapi

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

認証

データ

ロジック

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 サービスとの連携データ

通知

認証

サーバー ロジック

拡張

ログ

診断

Visual Studio 2013

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

モバイルサービスへ接続

コードエディタによる

サービス側 JavaScript デバッグ

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

プッシュ通知

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/　

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

Windows Azure Mobile Services でのマルチデバイスアプリ開発は容易

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

まとめ

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

Appendix ：Visual Studio 2013 による　最新のアプリケーション開発

.NET Framework 1.0/1.1

.NET Framework2.0

.NET Framework3.0/3.5

.NET Framework4

スマート クライアントアプリケーション

ライフサイクル管理

ユーザーエクスペリエンス

RIA

.NET Framework

Web サービス (SOA)

クラウド

.NET Framework4.5

2003 2006 2008 2010 2012

Visual Studio.NET

Visual Studio2005

Visual Studio2008

Visual Studio2010

Visual Studio2012

DevOps

.NET Framework4.5.1

2013

Visual Studio2013

Devices &Services

C/S アプリWeb アプリ

1998

Visual Studio6.0

32

Visual Studio 2013 による最新アプリケーション開発

最新のアプリケーション開発

最新のアプリケーション ライフサイクル

～ デバイス & サービスに対応した新世代のアプリケーション ～

～ 迅速性、および高い品質と拡張性によるビジネス価値の継続的な提供 ～

マルチ デバイスへの対応 ／デバイスの活用と最適化

クラウドを活用したサービスの実装

従来のサーバー + クライアントとの ハイブリッドなシステム

開発と運用のシームレスな連携

継続的なビジネス価値の提供

高い品質と生産性の確保

33

HTML5

Web アプリケーション開発

ASP.NET Web Forms ASP.NET MVC

.NET Framework 4.5.1

ドラッグ & ドロップで画面設計 イベント駆動型プログラミング 豊富なコントロールの活用 従来の開発のスキル／スタイルの活用

MVC パターンによる実装 分離により、個別に拡張やテストが可能 HTML ベースの UI 開発 モバイル開発 (jQuery Mobile, 機種ごとの表示切替など )

① ドラッグ & ドロップで コントロール配置

② ダブルクリックでイベント作成

HTML ベースの Web アプリ開発 最新 HTML5 / CSS3 / JavaScript に対応 NuGet で最新 JavaScript フレームワークなどを取得

HTTP Request

HTTP Response

C

VM

マルチデバイスへの対応

さまざまな JavaScript ライブラリを組み込み可能 jQuery / jQuery UI / jQuery Mobile Bootstrap Modernizr ... など

デバイス判別とビュー切り替え

Index.aspx Index.mobile.aspx

レスポンシブ Web デザイン

@media screen and (max-width 640px) @media screen and (max-width 320px)

<audio controls="controls"> <source src=“music.mp3" type="audio/mp3" /></audio>

HTML5 / CSS3 などの活用

http://nuget.org/

Visual Studio の NuGet 機能で取得

35

新世代 Web サービスの実現

SignalRASP.NET Web API

RESTful な Web API (Web サービス )

• ステートレスでスケーラビリティの向上が容易• クライアント (JavaScript) におけるデータ操作が

容易

双方向のリアルタイム通信

• 持続的コネクションによるリアルタイム通信• WebSocket, Long Polling, などを利用

http://example.com/employee/777

HTTP GET/POST/PUT/DELETE

JSON / ATOM{“Name” : “Shotaro Suzuki”, “Email” : “shosuz” }

3

21

public class ValuesController : ApiController{ public IEnumerable<string> Get() { return new string[] { "value1", "value2" }; }   public void Post ([FromBody] string value) {...

public class ChatHub : Hub{ public void Send (string name, string message) { Clients.All.broadcastMessage(name, message); }...

サーバー プッシュ型

36

Web アプリ開発向けのツールの機能JavaScript のデバッグ機能JavaScript のパフォーマンス分析コーディングの容易性

リアルタイムなスキーマ検証

コードスニペット

<TAB>

インテリセンス

カラーピッカー

ブラウザの選択

Mono ベースのプラットフォームで C# を使ったアプリ開発 Xamarin.iOS (MonoTouch)

Ahead-of-Time (AOT) コンパイラで ARM アセンブリコードを生成 Xamarin.Android (Mono for Android)

中間言語 (IL) を生成、アプリ起動時に、 Just-in-Time (JIT) コンパイラでネイティブコードを生成

170,000 人を超える開発者 日本でも販売開始 ( エクセルソフト社 )

Xamarin ～ マルチ デバイス ネイティブ アプリ開発

http://xamarin.com/visual-studio

認証 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 ストアアプリポータル

様々な高度なクエリーが実行可能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