最初の Windows ストア アプリのデザイン (HTML)
このチュートリアルは Blend for Visual Studio 2012の最も基本的な HTML デザイン タスクを開始する際に役立ちます。このチュートリアルを完了すると、一般的に「神経衰弱」と呼ばれるメモリ ゲームの軽量な動的バージョンが完成します。
メモリのゲームのプロジェクト
チュートリアルを進めるには、Windows ストア アプリのサンプル ギャラリーから HTML のメモリ ゲーム サンプル プロジェクトをダウンロードします。このプロジェクトは、このチュートリアルを進めるための開始点で、イメージをすべて含むアプリの作成に必要なすべてのファイルが含まれています。
HTML のメモリ ゲームのサンプル プロジェクトをダウンロードしたら、\My Documents\Visual Studio 2012\Projects\ のように、コンピューターの特定場所にファイルを展開します。ファイルが展開されたら、プロジェクトを開くことができます。
既存のプロジェクトを開くには
[ファイル] メニューの [プロジェクトを開く/ソリューション] をクリックします。
[プロジェクトを開く] ダイアログ ボックスで、プロジェクト ファイルを展開した場所を参照し、プロジェクト フォルダー (またはいずれかのプロジェクト サブフォルダー) からソリューション ファイル (memory.sln) を探して選択します。[OK] をクリックします。
ヒント
ファイル エクスプローラーでプロジェクト ファイル (.jsproj) を右クリックし、[ファイルを開くアプリケーションの選択] をポイントして Blend を選択してプロジェクトを開くこともできます。
プロジェクト フォルダー
[プロジェクト] パネルで調べると、新しいプロジェクトを作成したときに自動生成された既定のファイルとフォルダーが確認できます。
ヒント
[プロジェクト] パネルが表示されていない場合は、[ウィンドウ] メニューの [プロジェクト] をクリックします。
[参照] には、JavaScript の読み取り専用の CSS と Windows ライブラリが含まれています。
[css] には、アプリで使用されるカスタム CSS ファイルが含まれています。
[イメージ] には、アプリのイメージ資産が含まれています。
[js] には、カスタマイズされた JavaScript ファイルが含まれています。
[default.html] は、アプリの既定の開始ページです。
[package.appxmanifest] には、アプリとその資産の一覧が含まれています。このファイルは、アプリの開始ページも定義します。
ソース ファイル
[プロジェクト] パネルには、既定のファイルとフォルダーに加えて、プロジェクトのソース ファイルも表示されます。これらのファイルには次が含まれます。
イメージ- [写真] フォルダーには、ゲームのソース イメージが含まれています。
HTML で定義されているセマンティック構造体 HTML ファイルは、ドキュメント オブジェクト モデル (DOM) および一部の ID とクラス名を提供します。既定では、default.html は**[分割]** ビューで開きます。default.html のコードを表示するには、[コード] または [分割] ビューのいずれかをクリックします。
注意
default.html がデザイン サーフェイスに表示されない場合は、[プロジェクト] フォルダーで default.html をダブルクリックします。
JavaScript のゲーム ロジック ゲーム機能は、JavaScript によって得られます。このスクリプトでは、一部の ID とクラスも動的に作成されます。ゲームの JavaScript を表示するには、[プロジェクト] フォルダーで [js] フォルダーを展開し、default.js をダブルクリックしてファイルを開きます。
ソース ファイルに加えて、開発者はコードの詳細とゲームの要素のスタイルの設定方法に関する提案と一緒に、開発者のためのメモ (HTML)も提供しています。
ヒント
作業を進めながら、時々プロジェクトを保存することをお勧めします。現在のドキュメントを保存するには、[ファイル] メニューの [保存] をクリックするか、Ctrl キーを押しながら S キーを押します。
複数のファイルが変更されている場合、[ファイル] のメニューで [すべて保存] をクリックするか、Shift+Ctrl+S キーを押します。
ドキュメント タブのアスタリスクは、ファイルが変更されたことを示します。複数のファイルを変更した場合は、それぞれのタブにアスタリスクが表示されます。
次の手順: アプリケーションのスタイルの設定。