MVP Community Camp -2nd Round- day 4 （2014/11/20） のセッションスライドです。

1. Windows ストアアプリを
HTMLで作成する
あなたの既存の知識でアプリケーションの開発を実現
MVP Community Camp -2nd Round-
2014/11/20
保住匡範
1

2. 本セッションのゴール
Windowsストアアプリを知っていただく
一般的なWebフロントエンド開発のスキルで
開発が行えることを知っていただく
ストアアプリ開発のスキル習得から広がる
メリットを知っていただく
2

3. アジェンダ
Windowsストアアプリの概要と開発にあたっての基礎知識
Windowsストアアプリとは
既存のWebフロントエンド開発スキルでストアアプリを開発する
HTML によるストアアプリ開発
知らないと損する、非.NET開発にも活かせる開発ツール
Visual StudioによるHTML＆JavaScript開発
wrap up
まとめ
3

4. 自己紹介
Name
保住匡範(ほずみまさのり)
Twitter
@kiyokura
Blog
http://kiyokura.hateblo.jp/
Work
株式会社リゾーム
Background
Webアプリケーション開発(.NET / 非.NET )
4

5. Windowsストアアプリとは
Windowsストアアプリの概要と開発にあたっての基礎知識
5

6. Windowsストアアプリ概要
タッチネイティブ・デバイスネイティブ
ストアによる配布とマネタイズ
One product family, One platform, One store
6

7. タッチネイティブ・デバイスネイティブ
Windows 8 / Windows RT から登場
タッチデバイスに完全なエクスペリエンスを
没入型
タッチ対応
デバイス活用（カメラ・GPS・各種センサー）
7

8. ストアによる配布とマネタイズ
Windowsストアによる配布
審査を経ての公開
全世界に向けての配信
ストア非公開の企業内限定配布も可能
マネタイズを一元化
全世界に向けて販売
アプリ内課金
試用機能
8

9. One product family, One platform, One store
ユニバーサルアプリケーション
WindowsストアアプリとWindows Phone
来るWindows 10世代の構想
“One product family, One platform, One store”
モバイルからXboxまで
9

10. 選択可能なテクノロジスタック
DirectX XAML HTML / CSS
C / C++ C# / VB.NET JavaScript
通信デバイスグラフィックス印刷
Windowsランタイム
カーネル
10

11. 開発者登録と審査
開発者登録
個人：約19ドル・企業：約99ドル
更新料不要（2014年9月より）
「Dev Center ベネフィット」で初期費用無料！
審査と公開
提出→ 審査→ ストア公開
企業内向けの配布（サイドローディング）
11

12. 開発環境
Visual Studio 2012 以降の各エディション
2014年11月現在の最新環境：
Visual Studio Professional 2013以上の有償版
Visual Studio Express 2013 for Windows
Visual Studio Community 2013
特にHTMLでのWindowsストアアプリ開発には
CommunityもしくはProfessional以上がお勧め
12

13. Visual Studio Community 2013
2014年11月に登場した新しいエディション
http://www.microsoft.com/ja-jp/dev/products/community.aspx
有償版のProfessional相当の機能
Expressは機能制限・プラットホームごとに別製品
Professionalとの違いはライセンス
13

14. HTMLによるストアアプリ開発
既存のWebフロントエンド開発スキルでストアアプリを開発する
14

15. HTMLによるストアアプリ開発
HTML5+CSS+JavaScriptで開発可能
既存のWebフロントエンド開発のスキルセット
jQuery等のライブラリの活用
ストアアプリ”ならでは” の機能とLook & Feel
OSのAPIやカメラ・センサーデバイスの活用
Modern UI（旧称・メトロスタイル）のコントロール
アプリケーションのライフサイクル
→ WinRT とWinJS の提供
15

16. Windows Runtime (WinRT)
ストアアプリで利用できるネイティブAPI
C/C++, C#, VB.NETなどからも共通で利用
言語プロジェクションや
Windowsメタデータ（WinMD）等の仕組み
実行エンジン（Chakra）を通じて利用
特別な準備は必要ない
一般的な組み込みライブラリと同様のアクセス方法
例） Windows.Media.Capture
16

17. WinRTの利用例
// メッセージボックスの生成と表示
var msgbox
= new Windows.UI.Popups.MessageDialog("Hello World!");
msgbox.showAsync();
// GPSを利用
var geolocator
= new Windows.Devices.Geolocation.Geolocator();
geolocator.getGeopositionAsync().then(
function (pos) { /* 座標取得時*/ },
function (e) { /* エラー時処理*/ });
詳細はリファレンスを参照
http://msdn.microsoft.com/ja-jp/library/windows/apps/br211377.aspx
17

18. Windows Library for JavaScript (WinJS)
ストアプリ向けのJavaScriptライブラリ
ストアプリならではのスタイルやコントロール
Modern UI を手軽に実現
単方向のバインディング
非同期プログラミングのための機能
Promiseを実装
Common JS Promises/A 提案を実装
18

19. スタイルやコントロールの提供
19

20. Promiseによる非同期プログラミング
WinRTのAPIは原則として非同期
UIスレッドをロックしない
そのまま利用すると煩雑になりがち
Callbackが多くなる
then関数とdone関数
非同期コードのチェーンを構築
20

21. Windows Library for JavaScript (WinJS)
現在ではブラウザ向けライブラリとして進化
WinJS 3.0
クロスブラウザ・OSS
http://try.buildwinjs.com/
21

22. Webフロントエンド開発スキルの活用
WinRTやWinJSはストアプリ独自の色が強い
WinJSはクロスブラウザ対応、とはいえ…
より一般的なWebフロントエンド開発スキルを
活用でできるか？
22

23. ライブラリを利用した開発
汎用的なライブラリの活用
jQuery等の一般的なライブラリを利用可能
※そのままでは利用できないライブラリもある
セキュリティのための制限など
回避策もある
23

24. 例：jQuery
jQuery
説明不要のJavaScriptライブラリ
jQuery 2.0よりストアアプリをサポート
2.x系を利用すること
1.x系ではエラーになる機能がある
参考：
『jQuery Version 2.0 でのWindows ストアアプリのサポート』
http://blogs.msdn.com/b/windowsappdev_ja/archive/2013/04/04/jquery-version-2-0-windows.aspx
24

25. 例：knockout.js
knockout.js
JavaScriptのUIフレームワーク
宣言的バインディング、MVVM等の特徴
双方向バインディングを利用可能
WinJSでは単方向のバインディングのみ
25

26. 例：knockout.js + jQuery + linq.js
var ViewModel = function () {
self = this;
self.zipcode = ko.observable("");
self.addresses = ko.observableArray([]);
self.executeSearch = function () {
var postcode = self.zipcode();
$.ajax({
type: 'GET',
url: 'http://zipcloud.ibsnet.co.jp/api/search?zipcode=' + postcode,
dataType: 'json',
success: function (json) {
var res = Enumerable.from(json.results)
.select(function (x) { return { "address“ : x.address1 + x.address2 + x.address3 }; })
.toArray();
self.addresses(res);
},
});
};
}
$(function () {
var vm = new ViewModel();
ko.applyBindings(vm);
});
26

27. 例：knockout.js + jQuery + linq.js
<body>
<div>
郵便番号：
<input id="postCode" type="text" data-bind="value:zipcode" />
<input type="button" id="execute" value="検索" data-bind="click:executeSearch" /><br />
住所候補：
<select id="address" data-bind="options: addresses , optionsText: 'address'">
</select>
</div>
</body>
27

28. 例：knockout.js + jQuery + linq.js
28

29. 例：enchant.js
enchant.jsとは
カンタンにゲームやアプリを開発できるHTML5 +
JavaScript フレームワーク（公式サイトより）
オープンソース
http://enchantjs.com/ja/
公式にストアアプリのサンプルあり
パッケージ内に同梱
29

30. 注意点
window オブジェクト
alert, prompt, open等の、windowオブジェクトの一部
のメソッドは利用できない
相当するWinRTのAPIなどに置き換える必要がある
参考：HTML, CSS, JavaScript の機能と違い
http://msdn.microsoft.com/ja-jp/
library/windows/apps/hh465380.aspx
30

31. 特に注意点する点
ファイルエンコードとBOM
BOM付UTF-8である必要がある
HTML / JavaScript / CSS ファイル
ストアでの審査で不合格になる
外部ファイルの読み込み不可
外部のスクリプトの読み込み不可
すべてのスクリプトはパッケージに収める必要がある
参考：「セキュリティで保護されたアプリの開発」
http://msdn.microsoft.com/ja-jp/
library/windows/apps/hh849625.aspx
31

32. HTMLによるストアアプリ開発
Webフロントエンド開発スキルがあれば
既存スキルを生かした開発が可能
WinRTとWinJSの活用とWebアプリケーションとの差分
プラットホーム特有の事情の学習が必要
32

33. WindowsストアアプリとHTML
Windows Store Apps とWebフロントエンドテクノロジの関係
WEBフロントエンドのテクノロジ
JavaScript HTML CSS
API
WinRT & WinJS
デバイス/
サービスLook & Feel
OS・デバイス特有の事情
33

34. Packaged Web App
Apache Cordova / firefox OS / Chrome Apps / (Titanium Mobile) 等々
WEBフロントエンドのテクノロジ
JavaScript HTML CSS
ライブラリ/ カスタム属性/ テーマ
API
SDK等の提供する
デバイス/
サービスLook & Feel
OS・デバイス特有の事情
34

35. Packaged Web App の魅力
Webフロントエンド開発の既存スキルがあれば
新しいプラットホーム特有の事情に
学習のリソースを集中することが可能
35

36. おすすめしたい教材
de:code で行われたセッション
『HTML/JavaScript/CSS とC++ で作るWindows、
Windows Phone、Xbox One アプリ』
http://channel9.msdn.com/Events/de-code/
2014/DE-020
de:code 2014 セッションビデオ群
「device track」の内容が主にストアアプリ関連
http://channel9.msdn.com/Events/de-code/
2014?sort=sequential&direction=desc&r[0]=
Devices#theSessions
36

37. Visual Studioによる
HTML＆JavaScript開発
知らないと損する、非.NET開発にも活かせる開発ツール
37

38. Visual Studioの活用
Visual Studioを使ったストアアプリ開発の基本
コーディング支援とデバッグ機能
ストアアプリや.NET開発だけではない
Webフロントエンド開発での活用
38

39. コーディング支援とデバッグ機能
インテリセンスをはじめとした入力支援
デバッグ実行
シミュレータの活用
プラグイン「Web Essentials」
39

40. HTMLの入力支援機能
タグの候補リスト
入力に合わせて絞り込み
属性の候補リスト
特定の属性で利用可能な値をリストアップ
CSSファイルで定義されたクラス候補に
その他さまざまな機能
閉じタグの自動補完・自動修正
ドラッグアンドドロップによる参照挿入、等々
40

41. CSSの入力支援
プロパティや値の候補リスト
入力に合わせて絞り込み
利用方法等ドキュメント表示も
カラーパレット
カラーパレットから色をピックアップ
41

42. JavaScriptの入力支援
高度なコード補完
C#などとそん色のないコード補完
まさに“インテリ”センスな動的解析
42

43. スニペット
よく使う構文テンプレートを選択・挿入
HTML / CSS / JavaScriptで利用可能
43

44. デバッグ実行
ブレークポイントでの中断
設定したポイントでコードの実行を中断
変数の内容をウォッチ・書き換え
44

45. シミュレーターの活用
シミュレータが付属
タッチ非対応のPCでもタッチのデバッグが可能
GPS等各種デバイスのエミュレートも
45

46. プラグイン「Web Essentials」
Webフロントエンド開発用の多機能プラグイン
VSを最高のWebフロントエンド開発ツールに
無償・オープンソース
多様なテクノロジへの対応
インテリセンス・スニペットの強化
CoffeeScript / TypeScript
SaSS / LESS
ZenCoding
Minify
Markdown
JSHint
等々、膨大な機能
46

47. プラグイン「Web Essentials」
機能例：強化されたスニペット
47

48. プラグイン「Web Essentials」
機能例：ブラウザの対応状況ナビ
48

49. プラグイン「Web Essentials」
機能例：CSSスプライトの自動作成
49

50. Webフロントエンド開発での活用
これらの機能は
ストアアプリ開発以外でも利用可能
非.NET開発でも活用しないと”損”
これを超える機能を有した
Webフロントエンド用IDEはおそらく無い
……といってよいと思います
有償無償問わず
50

51. まとめ
51

52. Windowsストアアプリとは
スマートデバイス向けの形態・エコシステム
様々なテクノロジスタックで開発可能
52

53. Web開発スキルを生かした開発
既存のWebフロントエンド開発スキルを用いて
開発が可能
プラットフォームに特化した知識は必要だが…
プラットフォーム特有の部分に集中して学習
が可能
53

54. Visual Studioという開発環境
ほぼ最上級の開発環境
無償でもフルスペックの開発が可能
ストアアプリだけでなくWeb開発にも利用可能
Webフロントエンド開発環境としても最上級
54

55. その先に……
HTMLによる
スマートデバイス
向けアプリ開発
Visual Studio
の
習熟
VSを使った
Webフロントエンド開発
（非・.NET）
即時応用
ASP.NET による
Webアプリケーション開発
55

56. その先に……
HTMLによる
スマートデバイス
向けアプリ開発
Visual Studio
の
習熟
・Apache Cordova
・iOSとAndroidプラットホームの知識
クロスプラットホーム
デバイスアプリ開発
56

57. その先に……
ストアアプリ開発
（WinRT とストア）
Visual Studio
の
習熟
・C# or VB.NET
・XAML
C# / VB.NET + XAMLによる
ストアアプリ開発
C# / VB.NET による
.NET開発
Xamarinによる
クロスプラットホーム開発
57

58. その先に……
ストアアプリ開発
（WinRT とストア）
Visual Studio
の
習熟
・C#
・Unity
Unityによる
ストアアプリ開発
Unity開発全般へ
58

59. その先に……
スキルとノウハウを生かしたステップアップ
HTMLによるストアアプリ開発で得た知識に
少しずつ加えることで新たな領域に踏み込める
組み合わせにより更なる可能性
トレンド
HTMLによるスマートデバイスアプリ
Packaged Web Appsの流れ
広がるC#による開発
Unity / MonoGame
.NET フレームワークのオープンソース化・クロスプラットホーム化
Visual Studio Community エディション
59

60. その先に……
HTMLによるストアアプリ開発で
得ることができるスキルとノウハウ
ストアアプリ開発
HTMLによる
スマートデバイス
向けアプリ開発
Visual Studio
の
習熟
C#
VB.NET
Unity
WPF iOS
ASP.NET
Xamarin
Cordova
無限の広がりへ
Android
Kinect
Oculus Rift
60

61. 参考
61

62. Windows デベロッパーセンター
 Windowsストアアプリ開発のためのポータル
 https://dev.windows.com/ja-jp/
 ストア提出のためのダッシュボードや
技術資料などのリソースを集約
 Windows Phoneアプリ開発の情報も統合
62

63. Dev Center ベネフィット
 ストアアプリ/ Windows Phone アプリ開発者
に対する支援プログラム
 http://msdn.microsoft.com/ja-jp/dn818519.aspx
 ベネフィットの提供
 開発者登録の初期費用が無料
 アプリ開発に関する技術支援
 アプリのデザインに関する技術支援
63

64. de:code セッション動画
 『HTML/JavaScript/CSS とC++ で作る
Windows、Windows Phone、Xbox One アプ
リ』
 http://channel9.msdn.com/Events/de-code/2014/DE-
020
 その他のセッションビデオ群
 「device track」の内容が主にストアアプリ関連
 http://channel9.msdn.com/Events/de-code/
2014?sort=sequential&direction=desc&r[0]=D
evices#theSessions
64

65. Microsoft Virtual Academy (MVA)
 MVA
 動画と資料で学習できるコンテンツ
 無償
 全体を通してカバーする内容
 いまさら聞けないWindows アプリ開発入門HTML/JavaScript 編
 http://www.microsoftvirtualacademy.com/training-courses/windows-app-htmljavascript
 [MSC2013] HTML5 + JavaScript を使ったWindows 8 アプリ開発
 http://www.microsoftvirtualacademy.com/training-courses/windows_app_html5_js
 個々のトピックスに注目したシリーズ
 HTML5 で作るWindows ストアアプリ/アプリの起動
 http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-launching
 HTML5 で作るWindows ストアアプリ/印刷
 http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-printing
 HTML5 で作るWindows ストアアプリ/ナビゲーション
 http://www.microsoftvirtualacademy.com/training-courses/html-storeapp-navigation
 HTML5 で作るWindows ストアアプリ/試用版とアプリ内購入
 http://www.microsoftvirtualacademy.com/training-courses/html-windows-app-trial-purchase
 HTML5 で作るWindows ストアアプリ/データバインディング
 http://www.microsoftvirtualacademy.com/training-courses/store-apps-js-databind
65

66. Visual Studio Community 2013
 有償版「Professional」と同等の機能を無償で
 今までの「Express」のような機能制限なし
 ライセンス
 個人開発者・オープンソース開発・教育目的等は可
 エンタープライズ利用の場合は制限あり
 ライセンスの確認を
 詳細・ダウンロードはこちら：
http://www.microsoft.com/ja-jp/
dev/products/community.aspx
66