normalian blog

Let's talk about Microsoft Azure, ASP.NET and Java!

Windows Developer Preview を利用して、JavaScriptでネイティブアプリケーションを作成する

前回の記事 id:waritohutsu:20110919:1316413269 にて、 Windows Developer Preview のインストールが完了したため、次は Windows 8 向けに新たに提供された「JavaScriptでネイティブアプリケーションを作成する」機能を試そうと思う。今回はHello World程度の味見だが、今後新たに内容を確認する人の手助けになれば幸いだ。

Visual Stuido 11 を利用してJavaScriptプロジェクトを作成する

Windows Developer Preview から Visual Studio 11 Express を起動し、File - New Project メニューを選択すると、以下の新規プロジェクト作成のダイアログが起動する。

5種類のプロジェクトテンプレートが用意されているが、今回は「Grid Application」を選択する。

JavaScript プロジェクトの構成

新規作成した「Grid Application」の構造は以下のようになる。

フォルダ構成から大よそ以下になると考えられる。

  • winjs フォルダ以下は、Windows 8 が標準で提供するライブラリ群
  • 開発者は css、html、js フォルダに作成した CSS、HTML、JavaScriptファイルを格納する
  • (必要ならば)1画面毎にCSS、HTML、JavaScript を作成することができる

JavaScript プロジェクトを簡単に修正する

どの画面がアプリケーションのどの画面に対応しているか判断がつかないため、 detailPage.html の内容を確認して「さすがによくわからない」というdivタグを追加した。

  • detailPage.html

念のため、CSSJavaScriptファイルの内容も確認する。

  • detailPage.css

  • detailPage.js


簡単な修正をして JavaScript プロジェクトのアプリケーションを起動する

修正したアプリケーション起動する。以下の様に、修正内容が反映されていることが確認できる。