本シリーズは、実際に動く Windows 8アプリケーションをゼロから開発する実用的な方法を解説していく。

例として使用するのは、オンライン トレーディング カード ゲーム「Magic The Gathering」のプレーヤ向けアプリケーション「UrzaGatherer」だ。このアプリケーションは、カードの管理に役立つ。

なお、記事中のサンプルコードはオリジナル記事(英文)を参照のこと。

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

UrzaGatherer は、元々 Windows Presentation Foundation(WPF)4.0(http://urzagatherer.codeplex.com/)を使って開発されたが、Windows 8バージョンの開発にあたって HTML5、CSS3、JavaScript を使うことにした。

このアプリケーションを開発するには、以下のツールが必要になる。

・Windows 8 のコンシューマ プレビュー版(http://preview.windows.com/ からダウンロード可能)をインストールしたコンピュータ

・Visual Studio 11(http://msdn.microsoft.com/en-us/windows/apps/br229516 から Express Beta for Windows 8がダウンロード可能)

以上。たったこれだけである。

また、完全なソリューションが http://www.catuhe.com/msdn/urza/day0.zip で入手できる。

プロジェクトの作成


まず [File]-[New Project] メニューで新規プロジェクトを作成する(言うまでもなく、「Grid Application」のような準備万端のプロジェクトを作ることもできるが、ここではすべての関係を理解するため、プロジェクトを新たに作成する)。

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

新規作成したプロジェクトには、最小限のファイルしか含まれていない。

必要なリソースの作成


package.appxmanifest は、Windows 8に対してこのアプリケーションを宣言するファイルだ。特に、アプリケーションの各種記述と使用するロゴが含まれている。

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

アプリケーションの完成度を簡単に高められることから、筆者はロゴを作ったり色を付けたりするのが大好きだ。

たとえば、アプリケーションのなかでユーザーが最初に目にするスプラッシュ画面は、非常に重要である(第一印象がとても大切なことはお分かりだろう)。

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

デザインを得意とする開発者は少ないため、開発過程でこの作業が難しいこともよくある。

プロジェクトの構成


プロジェクト構成は、人それぞれになる。筆者は以下の構成にする。

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

・自分のリソース用フォルダ(/images)
・ページと無関係な自作 JavaScript コード用フォルダ(/js)
・ページ用フォルダ(/pages)
・css/js/html ファイル(home.js/home.html/home.css)を作成する各ページ用フォルダ(/pages/xxx)
・default.html という名の root ページ(そして関連する .css/.js ファイル)

データへの接続

リソースとプロジェクト構成の作業が終わったら、js フォルダに data.js ファイルを追加してデータに関連するものすべてを処理できるようにする。

UrzaGatherer では、データの構成要素は以下の通りだ。

・サポート対象の全カードを定義する all.json ファイル
・カードの絵柄一覧
・各“拡張”のロゴ一覧(カードは“拡張”に含まれ、拡張は“ブロック”に含まれる)
・各ブロックのロゴ一覧

空の data.js ファイルをベースにして、基礎となる関数を作る。

(function () { })();

この関数内で自分のデータに接続する。UrzaGatherer の場合、データはある json ファイルに格納されている。このファイルのサイズは最大で 8MB あり毎回ダウンロードするには大き過ぎるため、一度だけダウンロードしてローカルに保存しておく必要がある。

【サンプルコードはオリジナル記事(英文)を参照のこと】

WinJS.Namespace.define を使えば、コード内どこでも使えるグローバル オブジェクト(UrzaGatherer)を宣言できる。

Init 関数は、まずデータをローカル環境に読み込み、読み込みに失敗したら WinJS.xhr (http://msdn.microsoft.com/en-us/library/windows/apps/br229787.aspx)を使ってダウンロードする。さらに Init は、パラメータ渡しされた関数でデータが利用可能になったことを通知する。筆者はウエイトリング(プログレスバーの「リング」モード)を隠すためにこの関数を使っている。

ランディングページの準備


ナビゲーションシステム


default.html ページがランディング ページ(アプリケーションの起動完了時にユーザーに表示されるページ)になっている。このページがナビゲーション システムの作成を担当している。

【サンプルコードはオリジナル記事(英文)を参照のこと】

このページはかなりシンプルで、 WinJS ファイルを参照してデフォルトのスタイル シートと JavaScript コードを読み込むだけだ。

div が1つだけ含まれるが、これはサブページが読み込まれるホストになる。ここは、Windows 8で HTML5/JavaScript を使うときのナビゲーションの仕組みを理解するのに重要なポイントだ。ただし、ページは root ページとしてでなく、default.html ページの子ページとして読み込まれる。

この処理を行うには、navigator.js ページを作る必要がある(これは「Grid Application」など、Visual Studio 11のどのプロジェクト テンプレートからでもコピーしてくることができる)。

【サンプルコードはオリジナル記事(英文)を参照のこと】

ご覧の通り、PageControlNavigator クラスはページを読み込み、前のページを削除してからそれを子エレメントとして追加するコントロールだ。読み込まれたすべての css とスクリプトは、アクティブなまま1つの専用グローバル ページ内に存在したままであるため、この点をよく理解しておく必要がある(http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx)。

ページへのスタイル適用


default.css スタイルシートは root スタイルシートであり、ここまででお分かりのように読み込まれたすべてのページに適用される。この css ファイルは、以下のようなグローバル構造を設定する。

・バックグラウンド候補
・バナー(タイトルと戻るボタン)やコンテンツを配置ためスペース用のレイアウト

筆者は、自分のアプリケーションの各所で使う隠しクラス(エレメントを隠すために使用する)などのグローバル スタイルの格納にもこれを利用する。

【サンプルコードはオリジナル記事(英文)を参照のこと】

筆者が display:-ms-grid をありとあらゆる場所で使っていることにお気付きだろう。これは、CSS3 グリッドシステムを使うとレイアウトと整列が非常に行いやすいと思うからだ(http://msdn.microsoft.com/en-us/library/windows/apps/hh465327.aspx)。

バックグラウンドに関してはデザイナーに手伝ってもらえるだろうが、以下のような淡いグラデーションなら簡単なグラフィックス ツールを使って作成できる。
 
【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

ホーム画面の作成


最初に目に入るホーム画面で、筆者は利用可能なブロックをその拡張と一緒に表示させたい。

このページの基本バージョンは以下のようになる。

【サンプルコードはオリジナル記事(英文)を参照のこと】

このバナー(ヘッダ)とセクションにコンテンツを配置できる。

配置には WinJS.UI.ListView コントロールを使う。これにより、値のグループリストを表示させられる(ブロックでグループ分けした拡張一覧を表示する)。

【サンプルコードはオリジナル記事(英文)を参照のこと】

WinJS.UI.ListView は、各アイテムとヘッダーのレンダリング方法を定義している2つのテンプレート(itemTemplate と headerTemplate)を参照する。

【サンプルコードはオリジナル記事(英文)を参照のこと】

前述したように、筆者はレイアウト作成時、できるだけ CSS3 グリッドを使おうとする。例として、一覧中の項目に適用するスタイルを以下に示す。

【サンプルコードはオリジナル記事(英文)を参照のこと】

CSS3 トランジションのおかげで、「ホバリング」ステータスの処理も非常に簡単だ。これらのスタイルを home.htmlpage だけに適用するため(単一ページ ナビゲーション システムであるため)、プレフィックスとして「.home」を使っていることに注意したい。

これで、WinJS.Binding.List クラスの createGrouped 関数を使って blocksList コントロールにデータが入る。

【サンプルコードはオリジナル記事(英文)を参照のこと】

ここで1つ重要なことは、groupKeySelector 関数だ。この関数は、あらゆるグループのキー作成に使用される。このキーは項目のグループ化に使われるほか、SemanticZoom コントロールを追加する際にも使用される。

【サンプルコードはオリジナル記事(英文)を参照のこと】

戻り値が数値でなく文字列であることに注意したい。

groupCompare 関数は、キーを受け取ってソートする必要がある。

【サンプルコードはオリジナル記事(英文)を参照のこと】

画像用カスタム コントロールの追加


画像で問題になるのは、ダウンロードに時間がかかる場合があることと、ダウンロードが完了してもアニメーション表示されるわけでなく、いきなり現れてしまうことだ。そこで筆者は、画像が格好よくなめらかにアニメーション表示される機能を追加するため、カスタムコントロールを作成することにした。

(WinJS.Class.define 関数を使えば)カスタム コントロールの宣言は割と簡単だ。

【サンプルコードはオリジナル記事(英文)を参照のこと】

ご覧の通り、このコントロールは子画像を探して「load」イベント用のイベント リスナーを登録する。このコントロールは imageLoader クラスを最初に、そして loaded クラスを最後に追加するだけなので、すべての仕組みは CSS 内にある。

これら2つのクラスは default.css ファイルで定義されている。

【サンプルコードはオリジナル記事(英文)を参照のこと】

CSS3 トランジションを使うことで、この画像はダウンロード完了時にゆっくり表示されるようになる。

セマンティック ズームの追加


最後に、筆者はホームページにセマンティックズームを追加(http://msdn.microsoft.com/en-us/library/windows/apps/hh465492.aspx)して、ユーザーがブロックに素早くジャンプできるようにした。
 

【HTML5 Dev】HTML5/CSS3/JavaScript による Windows 8アプリ開発

この場合、initial ListView を別のもの(ズームした ListView)と一緒に WinJS.UI.SemanticZoom コントロール内に組込む必要がある。

【サンプルコードはオリジナル記事(英文)を参照のこと】

この2つの ListView を同期させるには、最初のリストのグループと2番目のアイテムで同じデータソースを使うだけでよい。

【サンプルコードはオリジナル記事(英文)を参照のこと】

今後の内容


次回は以下について解説する。

・拡張ページ
・カードページ
・設定機能
・オフライン モード