Solution semniar vs2013_multi_device-1209-new

効果的なマルチデバイス対応アプリケーション開発 ～多様化する ICT 環境への対応～ 鈴木 章太郎 テクニカルエバンジェリスト 日本マイクロソフト株式会社 http://blogs.msdn.com/b/shosuz/

• http://blogs.msdn.com/b/shosuz/

    

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

デバイスの爆発的増加

プラットフォーム プラットフォームの進化とアプリケーション クライアント デバイス サーバー サービス 5

ネイティブ アプリと Web アプリ ネイティブ アプリ ネイティブ アプリ (Windows Store apps, iOS apps, Android apps) Web アプリ (マルチ デバイス 対応) クロス デバイス (PC, Phone Tablet) クロス プラットフォーム (iOS, Android) 6

7

マルチデバイス化によるサービス実現のためのアーキテ クチャー提案 • アプリ向けデータとサービスをバックエンドとして追加 • Visual Studio や Xamarin を使ってネイティブクライアン トを開発 マルチ デバイス 社内システム クラウド オーダー オーダー バッチ連携 オーダー 構築アプリ 活用サービス 開発ツール デバイス アプリ バックエンドサービス 基幹システム等 Windows ストア、Xamarin、等 WindowsAzure Mobile Service等 パッケージ等 Visual Studio （共通プラットフォーム／共通スキルで開発） 8

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

Windows アプリ ～ Windows ストア アプリ       10

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

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

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

• http://www.ecma-international.org/publications/standards/Ecma-334.htm
• http://www.ecma-international.org/publications/standards/Ecma-335.htm

Xamarin.iOS (MonoTouch) Xamarin.Android (Mono for Android)



Bastion Draw A Stickman Infinite Flight Monster Stack 2 Bye-Bye Brain Smashing Planets 16

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

http://xamarin.com/visual-studio 18

• http://xamarin.com/visual-studio

  http://xamarin.com/mobileapi

• http://xamarin.com/mobileapi

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

Windows Azure Mobile Services とは Windows 8、Windows Phone 8、iOS、 Android, HTML5、Xamarin ネイティブ SDK Mobile Services API 認証 データ ロジック Push スケジューラ

Mobile Services が提供するサービス  データアクセス、 プッシュ通知、 認証サポート Windows 8、Windows Phone 8 SDK、 iOS SDK、Android SDK, HTML5 SDK  強力なサーバーサイド スクリプトのサポート プッシュ通知、バリデーション、 プリプロセッシング、 ポストプロセッシング、 他の Web サービスとの連携

1. チャネル URI を要求 2. クラウド サービスに 登録 3. 認証とプッシュ通知

 トークン登録 iOS 登録・トークン取得 通知 フィードバック 通知依頼 APNSと連携したプッシュ通知 http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-push-ios/

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

 トークン登録 Android 登録・トークン取得 通知 フィードバック 通知依頼 Google Cloud Messaging と連携したプッシュ通知 http://www.windowsazure.com/ja-jp/develop/mobile/tutorials/get-started-with-push-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 による 最新のアプリケーション開発

2003 2006 2008 2010 2012 2013

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

Web アプリケーション開発  HTML ベースの Web アプリ開発  最新 HTML5 / CSS3 / JavaScript に対応  NuGet で最新 JavaScript フレームワークなどを取得     ドラッグ & ドロップで画面設計 イベント駆動型プログラミング 豊富なコントロールの活用 従来の開発のスキル／スタイルの活用     HTML5 MVC パターンによる実装 分離により、個別に拡張やテストが可能 HTML ベースの UI 開発 モバイル開発 (jQuery Mobile, 機種ごとの表示切替など) ASP.NET Web Forms .NET Framework 4.5.1 ASP.NET MVC 33

  

新世代 Web サービスの実現
RESTful な Web API (Web サービス)

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

サーバー プッシュ型

•
•

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

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

• 持続的コネクションによるリアルタイム通信
• WebSocket, Long Polling, などを利用
public class ChatHub : Hub
{
public void Send (string name, string message)
{
Clients.All.broadcastMessage(name, message);
}
...

35

Web アプリ開発向けのツールの機能 36

       http://xamarin.com/visual-studio

• http://xamarin.com/visual-studio

認証  Microsoft Account、Twitter、 Facebook、Google ID 等  各 CRUD 操作のテーブルレベルの アクセス許可 iOS http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-ios/ Android http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-android/ ・すべてのユーザー ・アプリケーション キーを持つユーザー ・認証されたユーザーのみ ・スクリプトと管理者のみ  サーバー側スクリプトを使用した よりきめ細かい制御 HTML5 http://www.windowsazure.com/jajp/develop/mobile/tutorials/get-started-withusers-html/

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

Live Connect ポータル https://account.live.com/developers/applications/index Windows ストアアプリポータル http://msdn.microsoft.com/ja-JP/windows/apps

• http://msdn.microsoft.com/ja-JP/windows/apps
• https://account.live.com/developers/applications/index

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

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