「さぶみっと！オフ会 ～JavaScript で作れるWindows 8 対応アプリの夕べ～ 」のセッションで使用したスライドです。 セッションで紹介したドキュメントのリンク集は以下です。 http://blogs.msdn.com/b/osamum/archive/2013/06/14/javascript-windows-8.aspx

1. 日本マイクロソフト株式会社
バンジェリスト
@osamum_MS

2. アジェンダ
•プラットフォーム
•Windows ストア アプリの特徴

3. アプリの開発を始める前に
• Windows 8 スタイルアプリケーション
のデザインガイド
• Windows 8 アプリの認定の要件
• ワイヤーフレームワークの作成

5. Windows 8 プラットフォーム

6. HTML5 + JavaScript
Windows ストア アプリの構造
WWAHost.exe

7. 開発に使用するライブラリ
Trident
Rendering Engine
WinJS
Windows Library for
JavaScript

8. WinJS ( Windows Library for JavaScript )

9. Windows ストア アプリ向けの標準コントロール
アプリ バー
評価
ボタン
リスト ボックス
ハイパーリンク
スライダー
チェック ボックス
ラジオ ボタン
トグル スイッチ
ヒント
コンテキスト
メニュー
リスト ビュー
コンボ ボックス 進行状況バー
テキスト
ボックス
クリア ボタンスペル チェック
パスワード
表示ボタン
進行状況リング
ポップアップ
グリッド ビュー
フリップ ビュー
スクロール バー
パン インジケーター

10. HTML:
<div data-win-control="WinJS.UI.Toggle"
data-win-options="{title:'Wi-fi networking'}"
id="myToggle"
</div>
myToggle "change"

11. <div data-win-control="WinJS.Binding.Template"
id="myTemplate">
<div style="width:110px; margin:10px">
<img data-win-bind="src:picture" style="height:60px;
width:60px" />
<input type="button" data-win-bind="value:buttonText" />
</div>
</div>
<div height="400"
data-win-control="WinJS.UI.ListView" id="listview1"
data-win-options="{dataSource:myData,
itemRenderer:myTemplate}">
</div>

12. HTML5+JavaScript による
Windows ストア アプリ開発
＋ α
WinJS,
WinRT

13. Windows ストア アプリの特徴

14. Windows 8 の新しい UI での描画
Full Screen
No
Resize
No
New
Window
No
ActiveX
No
Silverlight
HTML5 CSS3
Large
Size Confirm
Snap Portrait

15. ライフタイムの管理
Windows 8
システムがライフタイムを
管理
Windows 7
ユーザーがライフタイム
を管理

16. プロセスの状態遷移

17. コントラクト
 ユーザーとOS／アプリ間のデータ共有の取決め
 アプリが実装できるコントラクト
①検索コントラクト
②設定コントラクト
③ソース共有コントラクト
④ターゲット共有コントラクト
⑤スプラッシュ スクリーン
⑥ファイルピッカー
http://msdn.microsoft.com/en-us/library/windows/apps/hh465251(v=VS.85).aspx

20. 検索の詳細 1/2
①検索BOXは、スクリーン上の
メインアプリを対象とする
①メイン アプリによって検索の
候補がリストアップされる
オート コンプリートが可能
②検索コントラクトを実装するア
プリが列挙される

21. 検索の詳細 2/2
④スクリーン上のメイン アプリ
によって検索候補が表示される
 サムネイルとタイトルを含むこと
 完全一致か、部分一致かを示す
 検索結果へ直接移動できる

24. • 設定コントラクトはアプリの設定に
• コンテキストに応じた一貫性のある
方法でアクセスさせる

25. タイル 1/4

26. タイル 2/4
 アプリの顔。アプリの拡張部分として
重要視すべき
より多くのユーザーを惹き付けるために、
Liveタイルを活用
 ユーザが興味を持ったコンテンツへの
アクセスを容易にするために、セカン
ダリ タイルを活用
 アプリバーにピン留めの設定を用意す
ることを推奨

27. 正方形(1x1) ワイド (2x1)

28. ① 事前に決められたテンプレートでタイルを更新
② さまざまなテンプレートが利用可能
③ テキストのみ、イメージのみ、またはそれらの組合せ
④ イメージフォーマットは JPEG か PNG。最大サイズは
150KB
⑤ オプションで “Peek” アニメーションもあり
⑥ ローカルで更新、もしくはクラウドから更新が可能

29. バッジ
① タイル上に表示されるステータス
② どちらのサイズのタイルでも利用可能
③ 99までの数値と事前に定義されたグリフが表示可能
④ 必ず画像の上に配置される

34. トースト通知
 アプリのコンテキスト外で一時的なメッセージを表示する仕
組み
 ユーザーの注意を即時に喚起したいときに使用
 ユーザーはアプリごとにトースト通知を禁止することが可能
 アプリの適切な場所へナビゲーションすることが可能
 アプリからも、クラウドからも簡単に表示することが可能
 Liveタイルと同様のテンプレートアーキテクチャ

35. ローミング
 異なるデバイスの状態や初期設定を同期します
 ユーザーが各デバイスで設定しそうな内容をローミング
 大好きなスポーツチーム（スポーツアプリ）
 大好きな映画のジャンル（メディアアプリ）
 ユーザーがデバイスをまたいで作業を継続できるように、
アプリのデータを同期
 To-Doリストの一元化
 メールの一元化
 ローミングはユーザーの初期設定やリンク、容量が小さな
データファイルに適している
http://msdn.microsoft.com/en-us/library/windows/apps/hh465094(v=VS.85).aspx

37. Windows Push Notification Service(WPNS)
 タイルやトースト通知をインターネット経由で可能に
 タイルの更新やトースト通知は、アプリが稼動していなく
ても実行可能
 WPNSはアプリとの通信も行う
 何百万人ものユーザーをサポート可能なスケーラビリティ
 なにより、WNSの使用は無料

38. ①チャネル URI を要求
②クラウド サービスに登録
③認証とプッシュ通知

40. まとめ
• Windows ストア アプリは Web 標準の技術で
開発可能
• WinRT API、WinJS
• Windows ストア アプリの開発ツールは
無償ツールでも開発できる

41. Windows ストア アプリ開発者向けの支援をFacebookで公開
http://msdn.microsoft.com/ja-
jp/jj572946http://msdn.microsoft.com/ja-
JP/windows/apps
http://msdn.microsoft.com/ja-
jp/jj572946
facebook.com/GoApps
Windows ストアアプリ開発のリソース