Visual Studioの基本画面は次のようになっています。
メイン
プログラム言語を記述する場所です。画面はhtmlファイル、画面スタイルはcssファイル、アプリの処理部分はJavaScriptファイルを記述できます。Visual Studio Expressには、プログラムを素早く正確に書くためのさまざまな機能が用意されています。例えば、プログラムの命令を分かりやすい色やフォントで表示する機能（シンタックスハイライト）や、命令の一部を入力すると、正確なスペルで自動的に補完してくれる機能（インテリセンス）などです。また、プログラムを作成するときに、何度も繰り返して使う記述を、あらかじめ登録しておく機能（スニペット）もあります。
出力
エラーやメッセージなどが出力されます。プログラムにミスがあるときは、どのような間違いであるかが出力されます。
ソリューションエクスプローラ
アプリで使用するプログラムや各種ファイルなどの配置を設定できます。アプリで画像ファイルを使用するときは、ここに必要なファイルをドラッグ＆ドロップします。ストアアプリの実行に必要なファイルの構成については、次回の記事で詳しく説明します。
プロパティ
htmlファイルを記述しているときに、設定可能なプロパティが表示されます。
Visual Studioの配色は、黒がベースの画面になっています。本連載では、コードなどの説明を見やすくするため、白ベースの画面で説明します。画面の配色を変更するには、メニューバーの［ツール］‐［オプション］を選択し、［環境］‐［視覚的効果］‐［配色］を［濃色］から［淡色］に変更します。
アプリデザインを作るためのツール
Windowsストアアプリでは、タブレットといったデバイスで実行されることもありますので、さまざまな情報を探しやすく／見やすく配置したり、操作性の高い画面を作ったりすることが大事です。Blend for Microsoft Visual Studio 2012はhtmlの部品をドラッグ＆ドロップで配置できるので、見た目を確認しながらアプリの外観を作ることが可能です。
タイルに表示された次のアイコンをダブルクリックして、Blend for Microsoft Visual Studio 2012を起動します。
Blendの基本画面は次のようになっています。
プロジェクト／アセット／スタイルルール
［プロジェクト］タブでは、アプリで使用するプログラムや各種ファイルなどの配置を設定できます。［アセット］タブにはアプリ画面にラッグ＆ドロップできる部品が表示されます。［スタイルルール］タブには、スタイルファイルの情報が表示されます。
ライブDOM／デバイス
［ライブDOM］タブには、DOM（ドキュメントオブジェクトモデル）の各要素が表示されます。［デバイス］タブには、アプリが実行されるディスプレイの設定が表示されます。
メイン
htmlやcssのソースファイルや、アプリを実行したときのレイアウトが表示されます。
CSSプロパティ／HTML属性
［CSSプロパティ］タブには、CSSで設定している値が表示されます。色の指定なども可能です。［HTML属性］タブは、htmlを記述しているときに、設定可能なプロパティが表示されます。
おわりに
今回は、Microsoft社が提供しているVisual Studioのインストール／ライセンスの取得手順や、開発ツールの簡単な使い方や画面の構成についてご紹介しました。これで、Windowsストアアプリを開発するための準備がひととおり整ったことになります。
次回の記事では、このVisual Studioを使って、簡単なWindowsストアアプリを作成し、プログラムを説明します。
