Windowsストアアプリの画面を作ってみよう

作って学ぶ！ 新人研修／Windowsストアアプリで電子カタログを作ろう（3）

さっそくアプリを作ろう

　作りたいアプリケーションが決まったら、Visual Studioを使ってアプリケーションを作成します。タイルに表示された次のアイコンをダブルクリックして、Visual Studio Express for Windows 8を起動します。

Visual Studio Express for Windows 8の起動

　起動すると次のような画面が表示されますので、メニューバーから［ファイル］‐［新しいプロジェクト］をクリックします。

新しいプロジェクトの作成画面

　新しいプロジェクトダイアログが表示されますので、テンプレートで［JavaScript］－［Windowsストア］を選択し、［空のアプリケーション］を選択します。プロジェクトの名前がアプリケーションの名前になるので、［名前］を「TravelSample」として［OK］ボタンをクリックします。ここで決めた名前が、作成するサンプルアプリケーションの名前になります。

新しいプロジェクトの作成ダイアログ

　これで、旅行カタログのアプリケーションが作成されました。作成したプロジェクトを見ると、次のようなファイルが自動的に作成されています。Visual Studioの画面にあるソリューションエクスプローラを見てください。▼マークをクリックすると、ファイルを展開することができます。

ソリューションエクスプローラ

　アプリケーションを作成すると、Windowsストアアプリを作るために必要なファイルが自動で生成されます。これらのファイル／フォルダの概要は次のとおりです。

/参照/Windows Library for JavaScript 1.0

　WindowsストアアプリをJavaScriptで開発するために必要な部品群です。

/css/default.css

　Windowsストアアプリで使うカスケードスタイルシート（CSS）です。このファイルは、アプリケーションの色や外観のサイズなどのデザインを設定できます。

/images

　アプリケーション起動時に表示される画面（スプラッシュ画面）の画像やロゴなどのファイルが生成されます。

/js/default.js

　WindowsストアアプリつくるためのJavaScriptのコードです。このファイルに、アプリで必要な処理をプログラミングします。

default.html

　Windowsストアアプリが起動したときに最初に表示されるページです。このファイルには、default.jsとdefault.cssへの参照が含まれています。

package.appmanifest

　Windowsストアアプリの各種設定を行うファイルです。アプリケーションの説明や画面の方向などを指定するための定義ファイルです。