Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォームアプリの開発
物江修 (ものえおさむ)
デベロッパーエクスペリエンス & エバンジェリズム統括本部テクノロジーエバンジェリスト
アジェンダ
• Windows 8 と HTML5 アプリ
• Windows ストア アプリ
• ユニバーサル アプリ
• マルチデバイス ハイブリットアプリとは？
Windows 8 と HTML5 アプリ
アプリ開発基盤としての HTML5～ベンダーの垣根を越えた共通の仕様～
HTML5 を取り巻く状況
クロスプラットフォーム開発
Chrome AppsFirefox OS
プラットフォーム
Titanium Mobile
Visual Studio 2013 HTML5 ～ Update 2 による大幅な機能強化～
2013
ユニバーサルアプリ
ネイティブアプリ
Web ストアアプリ Windows Phone XBOX
iOS
Multi-Device Hybrid Apps
＋
Visual Studio 2013 HTML5 ～ Web、デバイス、プラットフォームの全方位 ～
Web
クロスデバイス
Update 2
クロスプラットフォーム
iOS
本日お話する内容
2013
Multi-Device Hybrid Apps
Windows Store Apps Universal Apps
Windows ストア アプリ
Windows ストア アプリ～ Windows 8 の新しい UI 環境で動作するアプリ～
既存のスキルを活かした開発～ さまざまな言語で開発が可能～
JavaScript
C#, VB
C, C++
HTML5
XAML
開発言語 UI 記述スキルセット
+
+
Web
.net
Native
HTML5 + JavaScript Windows ストアアプリの構造
ホストプロセス
オペレーティングシステム
アプリ
API
JavaScript
ネイティブ API
直接呼び出し(Compiled)
開発に使用する技術～ Web 標準とネイティブライブラリ～
WWAHost.exe Internet Explorer のスーパーセット
HTML5
CSS3(Trident)
Web 標準
WinJSWindows Library for
JavaScript
JavaScript
アプリのフレームワーク
JavaScript
Windows 8 の機能にアクセス
JavaScript
WinJS (Windows Library for JavaScript)～HTML5 アプリのフレームワーク～
WinJS 2.1
アプリのフレームワーク
クロスブラウザー/プラットフォーム
オープンソース
GitHub で公開中
WinJS の提供する機能リッチコントロール 内部処理
Promise モデル (非同期)
スケジューラー
XHR (HTTP リクエスト)
データバインド
バインドテンプレート
フラグメント
ナビゲーション
ユニバーサルアプリ～異なるデバイス用アプリのコード共有の仕組み～
Windows ストアアプリ
Windows Phone アプリ
コード
Web アプリ からWindows ストア アプリ、そしてユニバーサルアプリ
Windows ストア アプリからそしてニバーサルアプリ
マルチ デバイスハイブリット アプリ
マルチデバイスハイブリットアプリ～ iOS、Android 向けのアプリを開発～
•Windows 8.1
•Visual Studio 2013
•Professional
•Ultimate
•Premium
マルチデバイスハイブリットアプリ～ iOS、Android 向けのアプリを開発～
CSS | HTMLJavaScript | TypeScript
iOS
Multi-Device Hybrid Apps
Update 2
マルチデバイスハイブリットアプリが提供する機能
～シームレスな開発環境構築とデバッグ機能～
デバッグ
> 4.4 : 〇
< 4.4 : ×
iOS : ×
• Android 4+
• iOS 6 & 7
ターゲット
ビルド
iOS : ×
: 〇
“ ” コード補完
エミュレーター
: 〇
iOS :〇(※) Apache Ripple
(※1) Windows は 8.0 のみ
(※2) iOS アプリのビルドには Mac が必要
• HTML5 + JavaScript でクロスプラットフォーム開発を可能に
• PhoneGap
CORDOVA アプリの構造
Web ビュー
オペレーティングシステム
コンテンツ
API
API
プラグインプラグイン
ネイティブ呼び出し
JavaScript
Visual Studio 2013 のアドインMulti-Device Hybrid Apps を使用した、クロスプラットフォームで動作するHTML5 アプリの開発
2013 ♥
まとめ
iOS
L♥ve is always with you.
資料 1/2
• Microsoft Visual Studio 2013 Update 2• http://www.microsoft.com/en-
us/download/details.aspx?id=42666
• Multi-Device Hybrid Apps (Preview)http://msdn.microsoft.com/en-us/vstudio/dn722381
資料 2/2
• Visual Studio 2013 Update 2 でのHTML5 関連の強化点• http://blogs.msdn.com/b/osamum/archive/2014/06/12/visual-
studio-2013-update-2-html5.aspx
