日本マイクロソフト株式会社バンジェリスト@osamum_MS
アジェンダ•プラットフォーム•Windows ストア アプリの特徴
アプリの開発を始める前に• Windows 8 スタイルアプリケーションのデザインガイド• Windows 8 アプリの認定の要件• ワイヤーフレームワークの作成
Windows 8 プラットフォーム
HTML5 + JavaScriptWindows ストア アプリの構造WWAHost.exe
開発に使用するライブラリTridentRendering EngineWinJSWindows Library forJavaScript
WinJS ( Windows Library for JavaScript )
Windows ストア アプリ向けの標準コントロールアプリ バー評価ボタンリスト ボックスハイパーリンクスライダーチェック ボックスラジオ ボタントグル スイッチヒントコンテキストメニューリスト ビューコンボ ボックス 進行状況バーテキストボッ...
HTML:<div data-win-control="WinJS.UI.Toggle"data-win-options="{title:Wi-fi networking}"id="myToggle"</div>myToggle "change"
<div data-win-control="WinJS.Binding.Template"id="myTemplate"><div style="width:110px; margin:10px"><img data-win-bind="sr...
HTML5+JavaScript によるWindows ストア アプリ開発+ αWinJS,WinRT
Windows ストア アプリの特徴
Windows 8 の新しい UI での描画Full ScreenNoResizeNoNewWindowNoActiveXNoSilverlightHTML5 CSS3LargeSize ConfirmSnap Portrait
ライフタイムの管理Windows 8システムがライフタイムを管理Windows 7ユーザーがライフタイムを管理
プロセスの状態遷移
コントラクト ユーザーとOS/アプリ間のデータ共有の取決め アプリが実装できるコントラクト①検索コントラクト②設定コントラクト③ソース共有コントラクト④ターゲット共有コントラクト⑤スプラッシュ スクリーン⑥ファイルピッカーhttp://ms...
検索の詳細 1/2①検索BOXは、スクリーン上のメインアプリを対象とする①メイン アプリによって検索の候補がリストアップされるオート コンプリートが可能②検索コントラクトを実装するアプリが列挙される
検索の詳細 2/2④スクリーン上のメイン アプリによって検索候補が表示される サムネイルとタイトルを含むこと 完全一致か、部分一致かを示す 検索結果へ直接移動できる
• 設定コントラクトはアプリの設定に• コンテキストに応じた一貫性のある方法でアクセスさせる
タイル 1/4
タイル 2/4 アプリの顔。アプリの拡張部分として重要視すべきより多くのユーザーを惹き付けるために、Liveタイルを活用 ユーザが興味を持ったコンテンツへのアクセスを容易にするために、セカンダリ タイルを活用 アプリバーにピン留めの設定...
正方形(1x1) ワイド (2x1)
① 事前に決められたテンプレートでタイルを更新② さまざまなテンプレートが利用可能③ テキストのみ、イメージのみ、またはそれらの組合せ④ イメージフォーマットは JPEG か PNG。最大サイズは150KB⑤ オプションで “Peek” アニメ...
バッジ① タイル上に表示されるステータス② どちらのサイズのタイルでも利用可能③ 99までの数値と事前に定義されたグリフが表示可能④ 必ず画像の上に配置される
トースト通知 アプリのコンテキスト外で一時的なメッセージを表示する仕組み ユーザーの注意を即時に喚起したいときに使用 ユーザーはアプリごとにトースト通知を禁止することが可能 アプリの適切な場所へナビゲーションすることが可能 アプリから...
ローミング 異なるデバイスの状態や初期設定を同期します ユーザーが各デバイスで設定しそうな内容をローミング 大好きなスポーツチーム(スポーツアプリ) 大好きな映画のジャンル(メディアアプリ) ユーザーがデバイスをまたいで作業を継続でき...
Windows Push Notification Service(WPNS) タイルやトースト通知をインターネット経由で可能に タイルの更新やトースト通知は、アプリが稼動していなくても実行可能 WPNSはアプリとの通信も行う 何百万人...
①チャネル URI を要求②クラウド サービスに登録③認証とプッシュ通知
まとめ• Windows ストア アプリは Web 標準の技術で開発可能• WinRT API、WinJS• Windows ストア アプリの開発ツールは無償ツールでも開発できる
Windows ストア アプリ開発者向けの支援をFacebookで公開http://msdn.microsoft.com/ja-jp/jj572946http://msdn.microsoft.com/ja-JP/windows/appshtt...
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
JavaScript + HTML5 で作る Windows 8 アプリ
Upcoming SlideShare
Loading in...5
×

JavaScript + HTML5 で作る Windows 8 アプリ

4,149

Published on

「さぶみっと!オフ会 ~JavaScript で作れるWindows 8 対応アプリの夕べ~ 」のセッションで使用したスライドです。
セッションで紹介したドキュメントのリンク集は以下です。

http://blogs.msdn.com/b/osamum/archive/2013/06/14/javascript-windows-8.aspx

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,149
On Slideshare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

JavaScript + HTML5 で作る Windows 8 アプリ

  1. 1. 日本マイクロソフト株式会社バンジェリスト@osamum_MS
  2. 2. アジェンダ•プラットフォーム•Windows ストア アプリの特徴
  3. 3. アプリの開発を始める前に• Windows 8 スタイルアプリケーションのデザインガイド• Windows 8 アプリの認定の要件• ワイヤーフレームワークの作成
  4. 4. Windows 8 プラットフォーム
  5. 5. HTML5 + JavaScriptWindows ストア アプリの構造WWAHost.exe
  6. 6. 開発に使用するライブラリTridentRendering EngineWinJSWindows Library forJavaScript
  7. 7. WinJS ( Windows Library for JavaScript )
  8. 8. Windows ストア アプリ向けの標準コントロールアプリ バー評価ボタンリスト ボックスハイパーリンクスライダーチェック ボックスラジオ ボタントグル スイッチヒントコンテキストメニューリスト ビューコンボ ボックス 進行状況バーテキストボックスクリア ボタンスペル チェックパスワード表示ボタン進行状況リングポップアップグリッド ビューフリップ ビュースクロール バーパン インジケーター
  9. 9. HTML:<div data-win-control="WinJS.UI.Toggle"data-win-options="{title:Wi-fi networking}"id="myToggle"</div>myToggle "change"
  10. 10. <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>
  11. 11. HTML5+JavaScript によるWindows ストア アプリ開発+ αWinJS,WinRT
  12. 12. Windows ストア アプリの特徴
  13. 13. Windows 8 の新しい UI での描画Full ScreenNoResizeNoNewWindowNoActiveXNoSilverlightHTML5 CSS3LargeSize ConfirmSnap Portrait
  14. 14. ライフタイムの管理Windows 8システムがライフタイムを管理Windows 7ユーザーがライフタイムを管理
  15. 15. プロセスの状態遷移
  16. 16. コントラクト ユーザーとOS/アプリ間のデータ共有の取決め アプリが実装できるコントラクト①検索コントラクト②設定コントラクト③ソース共有コントラクト④ターゲット共有コントラクト⑤スプラッシュ スクリーン⑥ファイルピッカーhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465251(v=VS.85).aspx
  17. 17. 検索の詳細 1/2①検索BOXは、スクリーン上のメインアプリを対象とする①メイン アプリによって検索の候補がリストアップされるオート コンプリートが可能②検索コントラクトを実装するアプリが列挙される
  18. 18. 検索の詳細 2/2④スクリーン上のメイン アプリによって検索候補が表示される サムネイルとタイトルを含むこと 完全一致か、部分一致かを示す 検索結果へ直接移動できる
  19. 19. • 設定コントラクトはアプリの設定に• コンテキストに応じた一貫性のある方法でアクセスさせる
  20. 20. タイル 1/4
  21. 21. タイル 2/4 アプリの顔。アプリの拡張部分として重要視すべきより多くのユーザーを惹き付けるために、Liveタイルを活用 ユーザが興味を持ったコンテンツへのアクセスを容易にするために、セカンダリ タイルを活用 アプリバーにピン留めの設定を用意することを推奨
  22. 22. 正方形(1x1) ワイド (2x1)
  23. 23. ① 事前に決められたテンプレートでタイルを更新② さまざまなテンプレートが利用可能③ テキストのみ、イメージのみ、またはそれらの組合せ④ イメージフォーマットは JPEG か PNG。最大サイズは150KB⑤ オプションで “Peek” アニメーションもあり⑥ ローカルで更新、もしくはクラウドから更新が可能
  24. 24. バッジ① タイル上に表示されるステータス② どちらのサイズのタイルでも利用可能③ 99までの数値と事前に定義されたグリフが表示可能④ 必ず画像の上に配置される
  25. 25. トースト通知 アプリのコンテキスト外で一時的なメッセージを表示する仕組み ユーザーの注意を即時に喚起したいときに使用 ユーザーはアプリごとにトースト通知を禁止することが可能 アプリの適切な場所へナビゲーションすることが可能 アプリからも、クラウドからも簡単に表示することが可能 Liveタイルと同様のテンプレートアーキテクチャ
  26. 26. ローミング 異なるデバイスの状態や初期設定を同期します ユーザーが各デバイスで設定しそうな内容をローミング 大好きなスポーツチーム(スポーツアプリ) 大好きな映画のジャンル(メディアアプリ) ユーザーがデバイスをまたいで作業を継続できるように、アプリのデータを同期 To-Doリストの一元化 メールの一元化 ローミングはユーザーの初期設定やリンク、容量が小さなデータファイルに適しているhttp://msdn.microsoft.com/en-us/library/windows/apps/hh465094(v=VS.85).aspx
  27. 27. Windows Push Notification Service(WPNS) タイルやトースト通知をインターネット経由で可能に タイルの更新やトースト通知は、アプリが稼動していなくても実行可能 WPNSはアプリとの通信も行う 何百万人ものユーザーをサポート可能なスケーラビリティ なにより、WNSの使用は無料
  28. 28. ①チャネル URI を要求②クラウド サービスに登録③認証とプッシュ通知
  29. 29. まとめ• Windows ストア アプリは Web 標準の技術で開発可能• WinRT API、WinJS• Windows ストア アプリの開発ツールは無償ツールでも開発できる
  30. 30. Windows ストア アプリ開発者向けの支援をFacebookで公開http://msdn.microsoft.com/ja-jp/jj572946http://msdn.microsoft.com/ja-JP/windows/appshttp://msdn.microsoft.com/ja-jp/jj572946facebook.com/GoAppsWindows ストアアプリ開発のリソース

×