Visual Studio 2012 を使用した Windows 8 アプリの開発

Windows 8 の新しい UI 環境 (かつて Metro と呼ばれた) で動作するアプリケーション、通称「Windows ストアアプリ」の開発方法について書いています。

Windows ストアアプリは C,C++,VB,C#,JavaScript のいずれかの言語で開発することができますが、このブログでは HTML + JavaScript での開発について紹介していきます。

なお、以下は前回までの投稿記事となりますので、まだお読みになっていない方はこれからの記事を読む前にぜひご覧ください。

今回は Visual Studio 2012 を使用した Windows ストアアプリの作成方法について紹介します。

Visual Studio 2012 を使用した Windowsストアアプリ (HTML + JavaScript) の開発

Visual Studio 2012 には「プロジェクトテンプレート」と呼ばれる Windows ストアアプリのひな形が用意されており、開発者はこれにコードを追加してアプリを開発していきます。
Visual Studio 2012 で Windows ストアアプリの開発を開始するには以下の手順を実行します。

Windows ストアアプリプロジェクトの作成
Visual Studio 2012 のメニュー [ファイル] – [新規作成] – [プロジェクト...] を選択します。

[新しいプロジェクト] ダイアログボックスが表示されるので、同ダイアログボックスの左側ツリーで [テンプレート] – [JavaScript] – [Windows ストア] を選択し、画面中央のリストボックスから任意のプロジェクトテンプレートを選択します。
ここでは例としてグリッドアプリケーションを選択し、[OK] ボタンをクリックします。
Visual Studio 2012 の IDE 内に、選択したテンプレートから生成されたプロジェクトがロードされます。

上記の手順でアプリケーションのひな形となるプロジェクトが作成されました。
作成されたプロジェクトは、既にアプリケーションとして必要な機能を備えているので、アプリケーションとして起動し実際に動作させてみることができます。

以下に作成したプロジェクトを Visual Studio 2012 でデバッグ実行する手順を紹介します。

Windows ストアアプリプロジェクトのデバッグ実行
Visual Studio 2012 のメニュー [デバッグ] – [デバッグ開始] を選択するか、もしくは [F5] キーを押下します。

プロジェクトがコンパイルされ、Windows ストアアプリとして実行されます。
アプリに表示されているタイルをクリックして画面が遷移することを確認してください。

デバッグ実行を終了するには Windows キーを押下してスタート画面からデスクトップに戻るか [alt] + [tab] キーを押下し、画面を Visual Studio 2012 に切り替え、メニュー[デバッグ] – [デバッグの停止] を選択します。もしくは [shift] + [F5] キーでもデバッグ実行を終了することができます。

上記の手順を使用して Visual Studio 2012 で開発中のアプリを実行し、その動作を確認することができます。

Windows ストアアプリテンプレートの機能
Visual Studio 2012 にはあらかじめ最大公約数的な用途を想定した、複数のプロジェクトテンプレートが用意されています。
実装されている機能の数や種類は、プロジェクトテンプレートにより異なりますが、いずれも Windows ストアアプリとして実行可能な機能を備えており、前述したように新規で作成した既定の状態でも独立したアプリとして動作することができます。また、Windows ストアアプリとして共通の機能があらかじめ実装されているため、共通の機能をアプリ毎に個別に作成する必要はありません。
ここでは Visual Studio 2012 が提供する既定のプロジェクトテンプレートで、もっとも豊富な機能をもつグリッドアプリケーションテンプレートが実装している主だった機能について紹介します。
前述の Windows ストアアプリプロジェクトの作成の内容に従いグリッドアプリケーションのプロジェクトを作成し、以下の手順でテンプレートが提供している機能を確認してください。

グリッドアプリケーションテンプレートに実装されている機能の検証
Visual Studio 2012 のメニュー [デバッグ] – [デバッグ開始] を選択するか、もしくは [F5] キーを押下してプロジェクトを実行します。
グリッドアプリケーションのスタート画面は、タッチデバイスでの使用を前提とした、リストビューをメインとしたグリッドデザインで構成されています。
この画面はタッチ、およひマウス、キーボードでの操作をサポートしており、タッチ機能をもったタブレット、タッチ機能のない従来の PC 画面でも違和感のない操作ができるようデザインされています。

アプリのタイルをタッチ(クリック)して、
選択したタイルのコンテンツ(ページ) に画面が遷移することを確認します。

戻るボタンをタッチ (クリック) してアイテムリスト画面に戻ります。

アイテムリスト画面でグループ名をタッチ (クリック) して、
グループごとに分類されたリストが表示されることを確認します。

次に画面の画面のレイアウト対応についての機能を確認します。
再度戻るボタンをタッチ(クリック)してアイテムリスト画面に遷移します。

タッチデバイスの場合は、画面の左端をスワイプしそのままアプリの画面を右端にドラッグしてスナップさせます。
マウスの場合は、マウスポインタをアプリ画面の上端に持っていき、マウスポインタが手のひらのアイコンに変わったらそのままアプリの画面を右端にドラッグしてスナップさせます。

スナップ時に、アプリ画面のタイルの大きさ、スクロールの方向などがスナップ表示に自動的に最適化されることを確認してください。

画面の向きに対するレイアウトの変更機能を確認します。
デバッグ実行用のツールボタンの ▼ 部分をクリックししてドロップダウンリストを表示し、[シミュレーター]を選択します。
表示が [シミュレーター] に変わったボタンをクリックします。

シミュレーターが起動し、アプリがシミュレーターの中で動作します。

シミュレーターの右フレームにある [時計回りに回転する (90°)] ボタンをクリックします。
シミュレーターの画面が右回りに 90° 回転した縦表示になるので、アプリ画面の縦方向のタイルの数など、自動的に縦方向の表示 (ポートレイト) に適したレイアウトになることを確認してください。

シミュレーターの右フレームにある [反時計回りに回転する (90°)] ボタンをクリックし、表示を水平方向 (ランドスケープ) に戻します。
シミュレーターの右フレームにある [解像度の変更] ボタンをクリックし、表示されたドロップダウンリストから [27” 2560 X 1440] を選択します。

変更された解像度に対して、縦方向のタイルの数等、自動的に最適化されることを確認してください。

ここまで紹介したように、グリッドアプリケーションテンプレートのような、高度な機能が実装してあるアプリケーションテンプレートを使用すると、アプリケーションの挙動に関してはほとんど新規の開発を行うことなく、既定で用意されているダミーのデータを書き換えるか、サーバーから取得したデータをセットするだけで、簡単に Windows ストアアプリを作成することができます。
ちなみにグリッドアプリケーションテンプレートから生成したプロジェクトのダミーデータは、/js/data.js で定義されています。
この内容を書き換えてためしに簡単なアプリを作ってみるのも良いでしょう。