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 ストア アプリ プロジェクトの作成

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

    image

  3. Visual Studio 2012 の IDE 内に、選択したテンプレートから生成されたプロジェクトがロードされます。

    image 

上記の手順でアプリケーションのひな形となるプロジェクトが作成されました。

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

 

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

 

Windows ストア アプリ プロジェクトのデバッグ実行

  1. Visual Studio 2012 のメニュー [デバッグ] – [デバッグ開始] を選択するか、 もしくは [F5] キーを押下します。 

    image 
     

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

    image


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

    image

 

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

 

Windows ストア アプリ テンプレートの機能

Visual Studio 2012 にはあらかじめ最大公約数的な用途を想定した、複数のプロジェクト テンプレートが用意されています。

実装されている機能の数や種類は、プロジェクト テンプレートにより異なりますが、いずれも Windows ストア アプリとして実行可能な機能を備えており、前述したように新規で作成した既定の状態でも独立したアプリとして動作することができます。また、Windows ストア アプリとして共通の機能があらかじめ実装されているため、共通の機能をアプリ毎に個別に作成する必要はありません。

ここでは Visual Studio 2012 が提供する既定のプロジェクトテンプレートで、もっとも豊富な機能をもつ グリッド アプリケーションテンプレートが実装している主だった機能について紹介します。

前述の Windows ストア アプリ プロジェクトの作成 の内容に従い グリッド アプリケーションのプロジェクトを作成し、以下の手順でテンプレートが提供している機能を確認してください。

 

グリッド アプリケーション テンプレートに実装されている機能の検証

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

    グリッド アプリケーションのスタート画面は、タッチデバイスでの使用を前提とした、リストビューをメインとしたグリッドデザインで構成されています。

    この画面はタッチ、およひマウス、キーボードでの操作をサポートしており、タッチ機能をもったタブレット、タッチ機能のない従来の PC 画面でも違和感のない操作ができるようデザインされています。

    image


     
  2. アプリのタイルをタッチ(クリック)して、

    image

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

    image


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

    image


     
  4. アイテム リスト画面でグループ名をタッチ (クリック) して、

    image

    グループごとに分類されたリストが表示されることを確認します。

    image
     

  5. 次に画面の画面のレイアウト対応についての機能を確認します。

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

    image
    タッチデバイスの場合は、画面の左端をスワイプしそのままアプリの画面を右端にドラッグしてスナップさせます。

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

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

    image
     

  7. 画面の向きに対するレイアウトの変更機能を確認します。

    デバッグ実行 用のツールボタンの ▼ 部分をクリックししてドロップダウンリストを表示し、[シミュレーター]を選択します。

    image

    表示が [シミュレーター] に変わったボタンをクリックします。

    image
     

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

    image
     

  9. シミュレーターの右フレームにある [時計回りに回転する (90°)] ボタンをクリックします。

    image

  10. シミュレーターの画面が右回りに 90° 回転した縦表示になるので、アプリ画面の縦方向のタイルの数など、自動的に縦方向の表示 (ポートレイト) に適したレイアウトになることを確認してください。

    image

  11. シミュレーターの右フレームにある [反時計回りに回転する (90°)] ボタンをクリックし、表示を水平方向 (ランドスケープ) に戻します。

  12. シミュレーターの右フレームにある [解像度の変更] ボタンをクリックし、表示されたドロップダウンリストから [27” 2560 X 1440] を選択します。

    image

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

    image

 

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

ちなみに グリッド アプリケーション テンプレートから生成したプロジェクトのダミーデータは、/js/data.js で定義されています。

この内容を書き換えてためしに簡単なアプリを作ってみるのも良いでしょう。

image

 

次回は Visual Studio 2012 が既定で用意している各アプリケーションテンプレートの特徴について紹介します。

 

 

Web Statistics