Visual Studio 2012 に既定で用意されている Windows ストア アプリ用テンプレート


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

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

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

今回は、前回の記事からの続きとして、 Visual Studio 2012 に既定で用意されている Windows ストア アプリのテンプレートについて紹介しています。

 

Visual Studio 2012 に用意されている Windows ストア アプリ用のテンプレート

Visual Studio 2012 には Windows ストア アプリを作成する際のひな形となる プロジェクト テンプレートが複数用意されています。

プロジェクトテンプレートは、Visual Studio 2012 のメニュー [ファイル] – [新規作成] – [プロジェクト] を選択して表示されるダイアログボックスの、左側のツリーで [テンプレート] – [JavaScript] – [Windows ストア] を選択すると表示されます。


([新しいプロジェクト] ダイアログボックスに表示される既定のプロジェクトテンプレート)

既定のテンプレート

Visual Studio 2012 には既定で [空のアプリケーション]、[グリッド アプリケーション]、[分割アプリケーション]、[固定レイアウト アプリケーション]、[ナビゲーション アプリケーション] の 5 つのプロジェクトテンプレートが用意されています。

この 5 つのプロジェクトには、作成されるアプリケーションの種類別に異なる機能が実装されています。

以下のこの既定で用意されている Windows ストア アプリ用のプロジェクトテンプレートについて特色と、一般的な用途について紹介します。

 

image 空のアプリケーション

image

[空のアプリケーション] プロジェクトテンプレートは、必要最低限の Windows ストア アプリケーションとしての機能を備えた、もっともシンプルな単一ページのプロジェクトテンプレートです。

ページ遷移を伴わないか、単一のファイル内で遷移が完結するアプリケーションに向いています。

Web ベースのミニゲームの移植にも良いでしょう。

[空のアプリケーション] プロジェクトテンプレートを使用したチュートリアルが以下のドキュメントに用意されていますので、HTML + JavaScript での Windows ストア アプリの開発がどのようなものか簡単に体験してみたい人はぜひお試しください。

 

パート 1: "Hello, world" アプリを作成する (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh986964

 

image グリッド アプリケーション

image

[グリッド アプリケーション] プロジェクトテンプレートは、グループ化された項目を移動する 3 ページのアプリケーション テンプレートです。

スナップビュー、ポートレイト表示、画面の解像度に合わせた自動的なレイアウト変更等、プロジェクトを新規に作成した状態でのアプリケーションとしての完成度が高く、プロジェクトに含まれる data.js の中身を適宜書き換えることで、グリッドデザインの 3 階層のアプリを少ない工数で作成することができます。

 

image分割アプリケーション

image

[分割アプリケーション] プロジェクトテンプレートは、グループ化された項目を移動する 2 ページのアプリケーション テンプレートです。

前述の [グリッド アプリケーション] と同じく、様々な画面に合わせた自動的なレイアウト変更等、新規に作成したプロジェクトの状態でアプリケーションとしての完成度が高く、プロジェクトに含まれる data.js の中身を適宜書き換えることで、グリッドデザインの 2 階層のアプリを少ない工数で作成することができます。

[分割アプリケーション] プロジェクトテンプレートを使用した Windows ストア アプリ開発のチュートリアルが以下に用意されておりますので、[分割アプリケーション]、[グリッドアプリケーション] プロジェクトテンプレートでの開発を予定されている方はし実際の作業に入る前にぜひお試しください。

 

パート 4: ブログ リーダーを作成する (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh974582.aspx

 

image 固定レイアウト アプリケーション

image

[固定レイアウト] プロジェクトテンプレートは、[空のアプリケーション] プロジェクトテンプレートとほとんど変わりませんが、唯一にして大きな違いは、WinJS が提供する ViewBox コントロールの機能により、ページ上のエレメントの大きさを画面の改造座に合わせサイズ調整を行ってくれます。

たとえば、[固定レイアウト] テンプレートでプロジェクトを新規に作成し、default.html 内の <p>コンテンツをここに挿入</p> の部分を、以下のタグに置き換えた場合、

 

<div style="height:400px;

     width:400px;background-color:red"></div>

 

画面の解像度が 1366 × 768 の場合は以下のように表示されますが

image
(解像度 1366 × 768 で表示した場合)

 

画面の解像度が 1920 × 1080 の場合でも同じく以下のように表示されます。

image
(解像度 1920 × 1080 で表示した場合)

 

これは ViewBox コントロールが、内部に書かれたエレメントのサイズを変更することなく画面の解像度に合わせてスケーリングしてくれるからです。

 

<参考> WinJS.UI.ViewBox object (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/br229771.aspx

 

[固定レイアウトアプリケーション] は全画面を利用するゲームなどの開発、移植に向いています。

 

image ナビゲーション アプリケーション

image

[ナビゲーション アプリケーション] プロジェクトテンプレートは複数のファイルにページ遷移がまたがるアプリケーションの作成に使用します。

WinJS の提供するナビゲーションの仕組みを利用して、サーバーサイドで動作する Web アプリケーションのように、クエリーストリングライクに物理的に異なるページ (ファイル) 間でデータをやり取りすることができます。

たとえば [グリッド アプリケーション] や [分割 アプリケーション] のようなものを最初から自作するのであれば、[ナビゲーション アプリケーション] をもとに開発するのが良いでしょう。

Windows ストア アプリの開発に慣れた開発者には一番使用されるプロジェクト テンプレートかもしれません。

[ナビゲーション アプリケーション] プロジェクトテンプレートの使い方については、以下のドキュメントで非常に分かり易く解説されていますので、ぜひご覧ください。

 

クイックスタート: 単一ページ ナビゲーションの使用 (JavaScript と HTML を使った Windows ストア アプリ) (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh452768.aspx

 

また少々長めではありますが、チュートリアルも用意されていますので、上記のドキュメントの内容で物足らない方はこちらもお試しください。

 

パート 3: PageControl オブジェクトとナビゲーション (Preliminary)
http://msdn.microsoft.com/ja-jp/library/windows/apps/jj663505.aspx

 

その他のプロジェクトテンプレート

Visual Studio 2012 添付のもの以外でも、日本マイクロソフトでは以下の URL で開発体験用のプロジェクトを公開していますので、これを使用して Windows ストア アプリケーションを作成することもできます。

 

Windows 8 アプリ開発体験テンプレート
http://msdn.microsoft.com/ja-jp/jj556277

 

—– ・ ——・ ——・ ——・ ——・ ——・ ——・ ——・ ——・ ——・ ——・ ——・ ——

今回は Visual Studio 2012 で既定で提供されている Windows ストア アプリを開発するためのプロジェクト テンプレートについて紹介しました。

これら既定のプロジェクト テンプレートについてのより詳細な情報については以下のドキュメントをご参照ください。

 

Windows ストア アプリ用 JavaScript プロジェクト テンプレート (Windows)
http://msdn.microsoft.com/ja-jp/library/windows/apps/hh758331.aspx

 

次回は MSDN で提供されている Windows 8 アプリ開発体験テンプレート を使用して簡単なアプリケーションを作成してみたいと思います。

 

 

Real Time Analytics

Clicky

Comments (0)

Skip to main content