最初の Windows ストアアプリのデザイン (HTML)

このチュートリアルは Blend for Visual Studio 2012の最も基本的な HTML デザインタスクを開始する際に役立ちます。このチュートリアルを完了すると、一般的に「神経衰弱」と呼ばれるメモリゲームの軽量な動的バージョンが完成します。

メモリのゲームのプロジェクト

チュートリアルを進めるには、Windows ストアアプリのサンプルギャラリーから HTML のメモリゲームサンプルプロジェクトをダウンロードします。このプロジェクトは、このチュートリアルを進めるための開始点で、イメージをすべて含むアプリの作成に必要なすべてのファイルが含まれています。

HTML のメモリゲームのサンプルプロジェクトをダウンロードしたら、\My Documents\Visual Studio 2012\Projects\ のように、コンピューターの特定場所にファイルを展開します。ファイルが展開されたら、プロジェクトを開くことができます。

[ファイル] メニューの [プロジェクトを開く/ソリューション] をクリックします。
[プロジェクトを開く] ダイアログボックスで、プロジェクトファイルを展開した場所を参照し、プロジェクトフォルダー (またはいずれかのプロジェクトサブフォルダー) からソリューションファイル (memory.sln) を探して選択します。[OK] をクリックします。

ヒント

ファイルエクスプローラーでプロジェクトファイル (.jsproj) を右クリックし、[ファイルを開くアプリケーションの選択] をポイントして Blend を選択してプロジェクトを開くこともできます。

[プロジェクト] パネルで調べると、新しいプロジェクトを作成したときに自動生成された既定のファイルとフォルダーが確認できます。

ヒント

[プロジェクト] パネルが表示されていない場合は、[ウィンドウ] メニューの [プロジェクト] をクリックします。

メモリプロジェクトを開く

[プロジェクト] パネルには、既定のファイルとフォルダーに加えて、プロジェクトのソースファイルも表示されます。これらのファイルには次が含まれます。

イメージ－ [写真] フォルダーには、ゲームのソースイメージが含まれています。
HTML で定義されているセマンティック構造体 HTML ファイルは、ドキュメントオブジェクトモデル (DOM) および一部の ID とクラス名を提供します。既定では、default.html は**[分割]** ビューで開きます。default.html のコードを表示するには、[コード] または [分割] ビューのいずれかをクリックします。

注意

default.html がデザインサーフェイスに表示されない場合は、[プロジェクト] フォルダーで default.html をダブルクリックします。
JavaScript のゲームロジック ゲーム機能は、JavaScript によって得られます。このスクリプトでは、一部の ID とクラスも動的に作成されます。ゲームの JavaScript を表示するには、[プロジェクト] フォルダーで [js] フォルダーを展開し、default.js をダブルクリックしてファイルを開きます。