こんにちは。
今日は、まだ Windows ストア アプリを開発していない方向けに、特に JavaScript で Windows ストア アプリを作る流れをご紹介します。
記事タイトルの通り”ざっくり掴みたい”方向けのボリュームです ( 読了 2分 )。
開発環境を整える
Windows ストア アプリの開発には、Visual Studio を使います。システム要件を確認したうえで、無償で利用できる Visual Studio Express 2012 for Windows 8 をダウンロード & インストールします。
プロジェクトを作成しアプリを実行してみる
Visual Studio には、ストア アプリ開発に使えるテンプレートがあらかじめ含まれています。各テンプレートを使って作成したプロジェクトは、すぐにデバッグ実行してみることができます。例えば、今回は”空のアプリケーション”を使ってみます。コンパイルして実行できる最小限のプロジェクトが作成されます。作ろうと思っているアプリに近いテンプレートを選ぶことで、基本的な実装の手間を省くことができます。
HTML でページを編集する
JavaScript で Windows ストア アプリを作る場合は、Web サイトを制作するときのように、HTML で画面を構成する要素を記述していくことができます。スタートページとなっている default.html を開いてみると、見慣れた HTML のコードが書かれていることがわかります。ここに HTML で要素を追加したり、別途ページを追加することで、画面遷移を伴うアプリを作っていきます。画面の設計ツールとして、Blend for Visual Studio も使えます。
CSSでデザインを整える
画面のデザインを CSS で整えます。MSDN には、様々な設計のガイドラインや参考になる例が掲載されていますので、ぜひご参照ください。もちろん CSS3 を使うことができるので、様々な画面サイズに対応してレイアウトを変更したいような場合は、CSS3 の Media Queries を用いて調整します。HTML と CSSを使った画面設計は、Web 制作やサービス開発で使っている既存のスキルをぜひご活用ください。
デバッグする
シミュレータを利用したデバッグでは、一般的なタッチや回転イベントや、画面サイズや位置情報等をエミュレートすることができるので、タッチに対応していない端末やセンサがついていない端末でも、これらの機能を試すことができます。また、DOM Explore や JavaScript コンソールといった Web 開発者には使い慣れたツールも利用可能です。これらの機能を使いながらアプリをデバッグしていきます。
まとめ
このように、JavaScript と HTML / CSS を用いた Windows ストア アプリ開発では、既に皆様がお持ちの Web 開発・制作のスキルを利用することができます。HTML / CSS で画面構成・デザインを整え、JavaScript で動きをつけていくという流れは、Web 開発の流れと同様です。ぜひ一度、JavaScript を用いた Windows ストア アプリ開発を体験してみてください。
このあとは
各種技術情報の確認や開発を進めていただきながら、11/21(木)・11/22(金)開催のマイクロソフト最大規模のカンファレンス、マイクロソフト カンファレンス 2013 の参加登録はぜひお早目に！Windows 8.1 関連を含む最新の開発者向け情報等の多彩なコンテンツをお届けいたします。
最後に、今後ストア アプリ開発を進めていく中で、参考になるリンクをいくつかご紹介します！
「 JavaScript を使った初めての Windows ストア アプリの作成」
Windows ストア アプリのデベロッパーセンターにある公式チュートリアル
「 Windows ストアへの道 」
Windows ストア アプリ開発に関連する情報をまとめてご紹介するページ
「 Windows 8 Clinic 」
マイクロソフトのエバンジェリストがストア アプリ開発に関する相談にお答えします！困ったときはこちらへ
