Visual Studio 2013 + Xamarin Integration in order to build Android/※iOS apps ※Mac OS X and Xcode required to complete

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

2. 





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

4. デバイスの爆発的増加

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

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

7. 7

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

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

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

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

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

13. 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

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

15. 

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

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

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

19. 

http://xamarin.com/mobileapi

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

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

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

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

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

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

28.  まとめ
 マルチデバイス対応アプリを展開する
ためのアプリ向けのデータとサービス
を企画・設計
 Windows Azure Mobile Services
でのマルチデバイスアプリ開発は容易
 Visual Studio + Xamarin による
マルチデバイスアプリ開発も可能

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

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

31. 2003
2006
2008
2010
2012
2013

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

33. 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

34. 



35. 新世代 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

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

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

38. 認証
 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/

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

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

41. サーバースクリプトリファレンス
http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx