BUILD: Metro スタイル アプリ開発に関連したセッションの紹介 (3/4)


みなさん、こんにちは。Windows 開発統括部の古内です。

今日は、BUILD イベントで提供された Metro スタイル アプリ開発に関するセッション紹介シリーズの第三回目で、「APP-740T Metro style apps using HTML5 from start to finish」 を取り上げます。

  1. APP-409T: Fundamentals of Metro style apps: how and when your app will run
  2. APP-396T Using tiles and notifications
  3. APP-740T Metro style apps using HTML5 from start to finish (今回)
  4. APP-737T Metro Style apps using XAML: what you need to know

スライドの日本語翻訳版も提供されていますので、どうぞご利用ください。

前の 2 回で Metro スタイル アプリの起動と実行、そしてアプリの顔であるタイルなど、Metro スタイル アプリのしくみについて見てきました。残りの 2 回では、「実際に Metro スタイル アプリを開発するにはどうすればよいか」を説明しているセッションを紹介します。

Metro スタイル アプリの開発には、大きく分けて次の 2 つの方法があります。

  • Java Script でエンジン部分を書いて、HTML (CSS) でユーザー インターフェイスを作る
  • C++/C#/VB でエンジン部分を書いて、XAML でユーザー インターフェイスを作る

今日ご紹介する APP-740T は、 「Java Script でエンジン部分を書いて、HTML (CSS) でユーザー インターフェイスを作る」 方法を説明したセッションです。

パッケージとランタイム

デモ 1: パッケージとランタイム (ビデオの 05:16)

  • Visual Studio 11 Express は Windows 8 Developer Preview with developer tools に入っています。
  • WWAHost.exe が Metro スタイルの HTML アプリの実行環境 (アプリ コンテナー)
  • Process Explorer はこちらからダウンロードできます。
  • アプリをパッケージ化すると、*.appx ファイルが作成される。このファイルは Open Packaging Convention (OPC) 形式なので、拡張子を .zip に変更すると、中身を確認することができる。

Web プラットフォーム

Windows 8 の Metro スタイル HTML アプリを実行する Web プラットフォームは、Internet Explorer 10 の Web プラットフォーム (レンダリング エンジン) と同じで、さらに Windows ランタイムにもアクセスできます。

Windows Library for JavaScript (WinJS) は、Metro スタイル アプリを開発するための JavaScript のライブラリで、高品質なアプリを簡単に作成する手助けをしてくれます。

デモ 2: プラットフォームの基礎 (ビデオの 17:03)

Canvas (描画) アプリを作成するデモ。
以下のサンプルには canvas.js を使用するコードが含まれています。

プロセス ライフサイクル

ユーザーにとって、アプリを切り替えた時に元の状態に戻ることが重要です。アプリが実行されている間に、次の 3 つのアプリの状態を保存しておく必要があります。

  • sessionState: 前回アプリを使用していた時の状態 (選択していた色、など)
  • Windows.Storage.ApplicationData: アプリの長期的な設定 (キャンバスのサイズ、など)
  • ユーザーのデータ: ユーザーが作成したもの (画像ファイル、など)

アプリのアクティブ化の際に、スプラッシュ スクリーンが表示され、その後に .onLoad が来ます。したがって、スプラッシュ スクリーンが表示されている間にいかにアプリを 「準備 OK」 の状態にするかが、優れたユーザー エクスペリエンスを提供するうえで重要です。DOMContentLoaded ではドキュメントをパースできるので、アプリのデータやイベント ハンドラーを処理し、Activated では保存されている状態を読み込むようにします。

デモ 3: アプリのライフサイクルイベント (ビデオの 33:04)

デモ 2 からの続き。sessionState を使って選択されている色を保存する。そして、アプリが再起動される際に、その保存した状態が読み込まれるようにする。
デバッグ中に [Debuing] – [Trigger Suspend] でアプリを手動でサスペンドする方法も紹介。

Windows の強力な機能を活用

HTML では URL でソースを指定しますが、Windows ランタイムはバイトで処理します。その間を橋渡しするのが Blob です。共有コントラクトは Windows の機能で、データ パッケージ (タグ、HTML、ファイルなど) をソース アプリからターゲットとして登録されているアプリへ渡します。

デモ 4: Windows の機能活用 (ビデオの 42:13)

  • File Picker (ファイルの選択) を利用して、先の Canvas アプリにファイルのインポート (読み込み) とエクスポート (保存) 機能を追加。
    • File Picker サンプルは: こちら
    • ファイルを保存する際、このデモではシステムの機能である File Picker を経由するので (アプリから直接ピクチャー ライブラリに書き込むわけではないので)、マニフェストでケイパビリティを指定する必要はない。
  • Blob サンプルは: こちら
  • 画像ファイルの共有も、共有コントラクトのコードを 5-6 行追加するだけで簡単に実現できる。
  • 画像ファイルをタイルで使用する方法のデモ。

セッションの内容をまとめると、HTML、CSS、JavaScript を利用し、Web プラットフォームの新機能を活用したリッチなアプリを開発してください。その際、プロセスを考慮し、アクティブ化とサスペンドおよび終了を適切処理できるようにすることが重要です。また、Windows ランタイムを利用することで、さまざまな機能を簡単に実装することができるので、ぜひ活用してください。

http://msdn.microsoft.com/library/windows/apps/br229565.aspx (英語ページ) に、Metro スタイルの HTML アプリの開発方法がまとめられているので、併せてご参照ください。

Comments (0)

Skip to main content