タダで始める Windows8 アプリ開発 with PhoneGap 2.2.0
最近メッキリ釣りブログを離れてますが....
最近マイブームの PhoneGap 2.2.0!!!
ついに Windows8 用の Windows ストア(Metro Style)アプリの開発もできるようになった。
PhoneGap | PhoneGap 2.2.0 Released
Windows ストアアプリは元々 HTML + JavaScript での開発をサポートしている。
では、なぜ PhoneGap を使うのだろうか?
PhoneGap を使うことで、iPhone/Android とのクロスプラットフォーム開発を進めやすくなるというのが理由のようだ。モバイルプラットフォームでのソフトウェア開発は日々グングン加速している。この流れに乗るには複数のプラットフォームを同時にサポートしていくスピード感が大切であり、これを見事に助けてくれるのが PhoneGap ということになる。
今日は PhoneGap の "Getting Started with Windows 8" に沿って Hello World 的なアプリを作成してみた。アプリが動き出すところまではとてもカンタンだったので、レポートしたい。
タイトルで「タダで始める」と書いたが、Windows8 はモチロン入手が必要。でも、Windows7 までに比べて、旧バージョンからのアップグレード版がかなり入手しやすくなっているので、この機会にアップグレードしてみてはどうだろうか。僕個人としては、XP や Vista が動いていたような古いPCを再生させるのにコレ以上無い、ピッタリなOSに仕上がっていると思う。
この記事を作成するにあたって、Core2 2.13GHz 3.25GB RAM という旧 Vista マシンを Windows8 にアップグレードした環境を使っている。2007 年ぐらいの旧式のPCだが、Vista よりキモチイイぐらい高速に動く。
必要なもの
- Windows8(XP, Vista, 7 から 5000円でアップグレードできる期間限定優待版も出ている)
- Visual Studio 2012 (無料の Express 版 Download Overview はここから入手)
Visual Studio 2012 Express のインストールと PhoneGap のセットアップ
- 入手した Visual Studio Express 2012 for Windows 8 をインストール
- PhoneGap 2.2.0 をダウンロードしてインストール
※ PhoneGap 2.2.0 は特別なインストールは不要。zip を展開して、lib\Windows8 フォルダを使う。
プロジェクトの作成
1. Visual Studio 2012 を開く(お薦めは、Windowsキー+Q でアプリの「検索」を表示して "VS" とキーをタイプすれば、インストールした Visual Studio が見つかる)
2.「スタートページ」 - 「開始」のところにある「新しいプロジェクト...」を選ぶ
3.「新しいプロジェクト」 ウィンドウが開く
4.「インストール済み」 - 「テンプレート」 - 「JavaScript」 - 「Windows ストア」 - 「空のアプリケーション」を選択し、アプリの名前を入力する(今回は "CordovaWin8Foo" とした)
5. 初期状態では「default.js」ファイルが開く。ソリューションエクスプローラー(初期状態では右上)から cordova-2.2.0.js を追加する。
6. js フォルダを右クリック - [追加] - [既存の項目(G)...] を選択。
7. lib\Windows8\Cordova-2.2.0.js を選択して追加。
8. default.html を開き、ソリューションエクスプローラーの cordova-2.2.0.js を default.html へドラッグ&ドロップ(ここがラク!タグが自動挿入される)
9. おなじみの deviceready イベントをハンドリング。
最終ソースは以下のようになった。
Visual Studio 2012 では、シミュレーターで実行できる。デスクトップ PC でもタッチ操作をシミュレートできる優れものだ。
実行結果は alert ボックスが表示できる単純なものだが、PhoneGap でおなじみの deviceready イベントに反応しているのがわかるだろう。
Windows8 アプリ開発をはじめてみませんか?
こちらの記事もどうぞ、
PhoneGap のデバッグに救世主! iOS6 Webインスペクタで実機上 JavaScript をステップ実行 - ATRAntic Ocean
簡単! PhoneGap 2.2.0 プロジェクト作成 - ATRAntic Ocean
PhoneGap(Cordova) 2.2.0 インストール - ATRAntic Ocean
[iPhone] PhoneGap(Cordova) でマルチプラットホーム開発 始めました - ATRAntic Ocean
Windows8 最速 ログオフ法 - ATRAntic Ocean
Windows8解禁! Windowsストアアプリ(メトロスタイルアプリ) の終了方法・停止方法 - ATRAntic Ocean