Visual Studio 2013 Update2 では HTML5 を使用して、Web サイトはもちろんのこと、Windows ストアアプリ、Windows Phone 8.1 アプリを同時開発できます。 また、Muiti-Device Hybrid Apps アドインを追加すると iOS、Android アプリの開発が可能になります。

1. Visual Studio 2013 と HTML5 で実現する
マルチデバイス/マルチプラットフォーム
アプリの開発
物江修 (ものえおさむ)
デベロッパー エクスペリエンス & エバンジェリズム統括本部
テクノロジー エバンジェリスト

2. アジェンダ
• Windows 8 と HTML5 アプリ
• Windows ストア アプリ
• ユニバーサル アプリ
• マルチデバイス ハイブリットアプリとは？

3. Windows 8 と HTML5 アプリ

4. アプリ開発基盤としての HTML5
～ベンダーの垣根を越えた共通の仕様～

5. HTML5 を取り巻く状況
クロスプラットフォーム開発
Chrome AppsFirefox OS
プラットフォーム
Titanium Mobile

6. Visual Studio 2013 HTML5
～ Update 2 による大幅な機能強化 ～
2013
ユニバーサルアプリ
ネイティブ アプリ
Web ストア アプリ Windows Phone XBOX
iOS
Multi-Device
Hybrid Apps
＋

7. Visual Studio 2013 HTML5
～ Web、デバイス、プラットフォームの全方位 ～
Web
クロス
デバイス
Update 2
クロス
プラット
フォーム
iOS

8. 本日お話する内容
2013
Multi-Device
Hybrid Apps
Windows Store Apps Universal Apps

9. Windows ストア アプリ

10. Windows ストア アプリ
～ Windows 8 の新しい UI 環境で動作するアプリ ～

11. 既存のスキルを活かした開発
～ さまざまな言語で開発が可能～
JavaScript
C#, VB
C, C++
HTML5
XAML
開発言語 UI 記述スキルセット
+
+
Web
.net
Native

12. HTML5 + JavaScript
Windows ストア アプリの構造
ホストプロセス
オペレーティングシステム
アプリ
API
JavaScript
ネイティブ API
直接呼び出し
(Compiled)

13. 開発に使用する技術
～ Web 標準とネイティブ ライブラリ～
WWAHost.exe
Internet Explorer のスーパーセット
HTML5
CSS3(Trident)
Web 標準
WinJS
Windows Library for
JavaScript
JavaScript
アプリの
フレームワーク
JavaScript
Windows 8 の
機能にアクセス
JavaScript

14. WinJS(Windows Library for JavaScript)
～HTML5 アプリのフレームワーク ～
WinJS 2.1
アプリの
フレームワーク
クロスブラウザー
/プラットフォーム
オープンソース
GitHub で公開中

15. WinJS の提供する機能
リッチコントロール 内部処理
Promise モデル (非同期)
スケジューラー
XHR (HTTP リクエスト)
データバインド
バインドテンプレート
フラグメント
ナビゲーション

16. Try WinJS
WinJS の機能を
体験するサイト
http://try.buildwinjs.com/

17. ユニバーサル アプリ
～ 異なるデバイス用アプリのコード共有の仕組み～
Windows ストアアプリ
Windows Phone アプリ
コード

18. Web アプリ から
Windows ストア アプリ、
そしてユニバーサルアプリ

19. Windows ストア アプリから
そしてニバーサルアプリ

20. マルチ デバイス
ハイブリット アプリ

21. マルチデバイス ハイブリット アプリ
～ iOS、Android 向けのアプリを開発 ～
•Windows 8.1
•Visual Studio 2013
•Professional
•Ultimate
•Premium

22. マルチデバイス ハイブリット アプリ
～ iOS、Android 向けのアプリを開発 ～
CSS | HTML
JavaScript | TypeScript
iOS
Multi-Device
Hybrid Apps
Update 2

23. マルチデバイス ハイブリット アプリが
提供する機能
～ シームレスな開発環境構築とデバッグ機能 ～
デバッグ
> 4.4 : 〇
< 4.4 : ×
iOS : ×
• Android 4+
• iOS 6 & 7
ターゲット
ビルド
iOS : ×
: 〇
“ ”
コード補完
エミュレーター
: 〇
iOS : 〇
(※) Apache Ripple
(※1) Windows は 8.0 のみ
(※2) iOS アプリのビルド
には Mac が必要

24. • HTML5 + JavaScript で
クロスプラットフォーム
開発を可能に
• PhoneGap

25. CORDOVA アプリの構造
Web ビュー
オペレーティングシステム
コンテンツ
API
API
プラグインプラグイン
ネイティブ
呼び出し
JavaScript

26. Visual Studio 2013 のアドイン
Multi-Device Hybrid Apps を使用した、
クロスプラットフォームで動作する
HTML5 アプリの開発

27. 2013
♥
まとめ
iOS
L♥ve is always with you.

28. 資料 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

29. 資料 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