Windowsストアアプリに挑戦(その1・何もしないアプリケーション)

Windows 8では、従来のデスクトップアプリに加えて、タブレット風のユーザーインターフェースのアプリ(Windowsストアアプリ)を実行する機能が追加されました。
自分でもWindowsストアアプリを作ってみたいので、覚書的に、Windowsストアアプリの開発手順をまとめていこうと思います。
今日はその1回目として、何もしないアプリを作ってみます。

1.開発環境と言語

Windowsストアアプリは、マイクロソフトの「Visual Studio Express 2012 for Windows 8」という開発環境で開発することができます。
マイクロソフトから無料でダウンロードすることができます。

また、開発に使う言語は、以下から選ぶことができます。

  • Visual C++
  • Visual C#
  • Visual Basic
  • HTML5+CSS3+JavaScript

なお、Visual Studio Express 2012 for Windows 8は、Windows 8(32ビット/64ビット)上でのみ動作します。

2.何もしないアプリをとりあえず作ってみる

初めてのWindowsストアアプリの例として、HTML5+CSS3+JavaScript版の何もしないアプリを、とりあえず作ってみます。

2-1.プロジェクトの作成

まず、アプリに対応する「プロジェクト」を作ります。
Visual Studio 2012を起動し、「ファイル」→「新しいプロジェクト」のメニューを選んで、「新しいプロジェクト」のダイアログボックスを開きます。
ここで、以下のように各項目を設定します。

項目設定
テンプレート「JavaScript」のグループにある「Windowsストア」を選び、その右の欄で「空のアプリケーション」を選びます。
名前アプリケーションの名前を決めて入力します。
場所アプリケーションのファイルの保存先を指定します。

プロジェクトの作成

「OK」ボタンをクリックすると、プロジェクトが作成され、「default.js」というJavaScriptのコードが表示されます。

プロジェクトを新規作成したところ

なお、Visual Studio 2012をインストールした直後では、開発環境の配色が濃色(黒系統)になります。
個人的にはあまり見やすくなかったので、淡色の配色に変えました。
配色を変更するには、「ツール」→「オプション」メニューで「オプション」のダイアログボックスを開き、「環境」→「全般」のパネルの「配色テーマ」で指定します。

配色の設定

3.アプリの実行

プロジェクトを作成したら、「デバッグ」→「デバッグ開始」のメニューを選びます。
すると、プログラムがビルドされ、プログラムが起動します。
スプラッシュスクリーン(アプリのアイコンだけの画面)が表示された後、画面の左上に「コンテンツをここに挿入」と表示されます。

アプリを終了するには、キーボードならAlt+F4キーを押します。
また、タブレットでは画面の上端から下端にスワイプすると終了します。

また、一度実行したアプリは、Windows 8のスタート画面に登録されます。
次回以降はスタート画面から起動することもできます。

4.「Windowsストアアプリに挑戦」の記事の一覧

「Windowsストアアプリに挑戦」のその他の記事は、以下のリンクから参照できます。

MT Cloud Starter Kit
Movable Typeのプラグイン集「MT Cloud Starter Kit」をぜひご利用ください