Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォームアプリの開発

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

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

アプリ開発基盤としての 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 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 標準
WinJS
Windows Library for
JavaScript
JavaScript
アプリの
フレームワーク
JavaScript
Windows 8 の
機能にアクセス
JavaScript

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

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

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

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

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

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

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

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

マルチデバイスハイブリットアプリ
～ iOS、Android 向けのアプリを開発～
CSS | HTML
JavaScript | 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

Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォームアプリの開発

Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発

More Related Content

What's hot

Viewers also liked

Similar to Visual Studio 2013 と HTML5 で実現するマルチデバイス/マルチプラットフォーム アプリの開発

More from Osamu Monoe