1 / 35

Metro style apps using HTML5 from start to finish HTML5 を使った Metro スタイル アプリ開発のはじめから 完成 まで

APP-740T. Metro style apps using HTML5 from start to finish HTML5 を使った Metro スタイル アプリ開発のはじめから 完成 まで. Scott Dickens Principal Program Manager Lead Microsoft Corporation. 免責事項.

hue
Download Presentation

Metro style apps using HTML5 from start to finish HTML5 を使った Metro スタイル アプリ開発のはじめから 完成 まで

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. APP-740T Metro style apps using HTML5 from start to finishHTML5 を使った Metro スタイル アプリ開発のはじめから完成まで Scott Dickens Principal Program Manager Lead Microsoft Corporation

  2. 免責事項 本プレゼンテーション (以下、本書) で提供されている情報は、本書が発表された時点における Microsoft の見解を述べたものです。市場ニーズの変化に対応する必要があるため、本書は記載された内容の実現に関する Microsoft の確約とはみなされないものとします。また本書に記載された情報の正確さについて、保証するものではありません。 本書は情報の提供のみを目的としており、明示または黙示に関わらず、本書について Microsoft はいかなる保証をするものでもありません。 本書に記載されている機能名や用語の日本語訳は、あくまでも暫定的なものであり、将来変更される可能性があります。

  3. アジェンダ • HTML5 プラットフォームの概要と基礎 • プロセス ライフサイクルの詳細 • JavaScript と Windows Runtime による豊富な機能の活用 理解していただきたいこと • HTML5 を使って Metro スタイル アプリを開発する手法

  4. HTML、CSS、JavaScript を使って、簡単で手軽に優れた Metro スタイル アプリを開発できます。

  5. HTML5 での Metro スタイル アプリ パッケージと ランタイム Web プラットフォーム プロセス ライフサイクル WinRTプラットフォーム

  6. パッケージとランタイム

  7. アプリが実行されるまで C:\Program Files\ Applications\... アプリ コンテナー HTML ホスト プロセス HTML CSS 実行中のアプリ アプリ パッケージ JavaScript アプリ コード リソース マニフェスト

  8. デモ パッケージとランタイム 単純なアプリをすばやく作成 HTML5 アプリの構造 アプリ コンテナーと実行環境

  9. HTML5 での Metro スタイル アプリ  パッケージと ランタイム Web プラットフォーム プロセス ライフサイクル WinRTプラットフォーム

  10. Web プラットフォーム

  11. HTML アプリ プラットフォーム Internet Explorer アプリ コンテナー HTML ホスト プロセス タブ アプリ コード Web プラットフォーム アプリ コード Web プラットフォーム WindowsRuntime

  12. HTML、CSS、JavaScript • HTML5 • IndexedDB • AppCache • Web Workers • Canvas • SVG • FormData • CSS3 アニメーション/Transforms • XHR • FileAPI • WebSocket • Geolocation • PostMessage

  13. HTML5 向けに簡素化された Windows アプリ プラットフォーム • 単一の HTML5 DOCTYPE • プラグイン不要の、標準の Web • 単一のウィンドウ • Windows Runtime へのアクセス

  14. Windows Library for JavaScript (WinJS)JavaScript を使って Metro スタイル アプリを開発するためのライブラリ • 優れた外観のアプリを実現 • Windows Metro デザイン スタイルに適合 • 一般的なユーザー エクスペリエンス用の各種コントロール • 従来の入力方法とタッチの両方に対応する設計 • さまざまなフォーム ファクターへの展開が可能 • 高品質なアプリを短期間で構築 • 使い慣れた Web テクノロジ • 最新パターンによりアプリの応答性と信頼性を強化 • 対話型の設計ツールを活用

  15. デモ プラットフォームの基礎 単純な描画アプリをすばやく作成 既存コードの再利用 WinJSを使ったアプリ バーの作成

  16. HTML5 での Metro スタイル アプリ   パッケージと ランタイム Web プラットフォーム プロセス ライフサイクル WinRTプラットフォーム

  17. プロセス ライフサイクル

  18. プロセスの状態の遷移 アプリは一時停止メッセージの後 5 秒間で処理を行う 終了時、アプリへの通知は行われない 一時停止する 実行中 一時停止 終了 メモリ不足 アプリの起動 再開する 再開時、アプリへの通知が行われる スプラッシュ スクリーン コード実行 プロセスなし コア実行 コードは実行されない

  19. Windows Library for JavaScript (WinJS) の sessionState が便利アプリの状態の保存には Windows.Storage.ApplicationData を使用

  20. アクティブ化 スプラッシュ スクリーンの表示 DOMContentLoaded アプリ データの読み込み、イベント ハンドラーのセットアップ、UI の初期化 .onLoad 長時間のセットアップ処理を完了 Activated 保存された状態の読み込み、アクティブ化パラメーターの処理

  21. デモ アプリのライフサイクル イベント アプリのライフサイクル イベントを適切に処理 アプリのアクティブ化 アプリの一時停止、再開、終了

  22. HTML5 でのMetro スタイル アプリ    パッケージと ランタイム Web プラットフォーム プロセス ライフサイクル WinRTプラットフォーム

  23. Windows の強力な機能を活用

  24. Blob、ストリーム、および Windows Runtime XHR イメージ タグ Blob ? ビデオ タグ ファイル選択機能 オーディオ タグ functionimportFile() { varpicker = newWindows.Storage.Pickers.FileOpenPicker(); picker.fileTypeFilter.replaceAll([".jpg", ".bmp", ".gif", ".png"]); picker.pickSingleFileAsync().then(function(file) { //WinRTからファイル、バイト ストリームを格納 varblobUrl = URL.createObjectURL(file); img.src = blobUrl; }

  25. 共有コントラクト ソース アプリ ターゲット アプリ データ パッケージ

  26. デモ Windows の強力な機能を活用 Windows との深い統合で価値を高める Windows Runtime 経由でファイルにアクセスする 共有コントラクトの基礎

  27. HTML5 での Metro スタイル アプリ     パッケージと ランタイム Web プラットフォーム プロセス ライフサイクル WinRTプラットフォーム

  28. はじめから完成まで その他のアプリのアイデア • 設定 • ピッカー (選択機能)のターゲット • スナップ/回転 • Web サービス統合 • ファイルのアップロード/ダウンロード

  29. まとめと次のステップ • HTML、CSS、および JavaScript の活用: Web プラットフォームが提供する新機能を活用して、よりリッチなアプリを実現してください • プロセス ライフサイクルを意識したアプリ: アクティブ化と、一時停止、再開、終了の各段階を適切に処理できるようにしてください • WinRT の力と Web プラットフォームの活用: ユーザーの喜ぶエクスペリエンスを実現し、システム全体を強化するようなアプリを作ってください

  30. 関連セッション • APP-476T Code with confidence: dynamic web content in Metro style apps using HTML5 • APP-512T The web-to-Windows journey: turning your web assets into a Windows app • APP-929T Best practices for writing safe and secure Metro style apps using HTML5 • PLAT-475T Create experiences that span devices • APP-162T Building high performance Metro style apps using HTML5

  31. その他の参照リソースとドキュメント • 基本的な Metro スタイル アプリを開発する (JavaScript) • アプリ ライフサイクルを管理する • アプリを差別化する (JavaScript)

  32. thank you Feedback and questions http://forums.dev.windows.com Session feedbackhttp://bldw.in/SessionFeedback

  33. © 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related