ATRAntic Ocean

日本海発 新潟の釣りシーンから旬の話題をタイムリーに届けます

にほんブログ村 釣りブログ 甲信越釣行記へ

タダで始める 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 よりキモチイイぐらい高速に動く。


必要なもの


Visual Studio 2012 Express のインストールと PhoneGap のセットアップ

※ 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

にほんブログ村 釣りブログ 甲信越釣行記へ