Windows8.1にPhoneGap3.4.0を導入してみました

AndroidとiOSの両方に対応したハイブリッドアプリの開発を始めようか検討中です。
iOS向けの開発にはMacの環境が必要となりますが、弊社にはまだありません。そこでAndoridアプリの開発に利用しているWindows環境にPhoneGapを導入してみました。

サンプルプロジェクトをAndroidのエミュレータ上で稼働させることができました。そこまでの手順を記載します。

前提条件

  1. Androidアプリを構築するための環境(JDK/Eclipse/android SDKなど)は構築済み。
  2. ADBでAndroidのエミュレータを登録済み。

Node.jsのインストール

  1. http://nodejs.org/へアクセスし、INSTALLボタンを押下する。
  2. 使用している環境に合わせたインストーラがダウンロードされる。
  3. インストーラを実行して、デフォルトの設定でインストールを行う。

Antのインストール

  1. http://ant.apache.org/bindownload.cgiへアクセスし、Antをダウンロードする。
  2. 解凍して好みの場所に配置。

環境変数のパス通し

  1. 「コントロールパネル > システムとセキュリティ > システム」を選択。
  2. 右サイドに表示される「システムの詳細設定」を押下。
  3. 右下の環境変数ボタンを押下。
  4. システム環境変数として「ANT_HOME」を新規に追加。値にはAntのフォルダのパスを設定する。
    (私の環境では「C:\apache-ant-1.9.4」と設定)
  5. システム環境変数「Path」の値にandroidの「sdk/tools、sdk/platform-tools」とAntの「bin」までのパスを設定する。
    (私の環境では「C:\android\sdk\tools;C:\android\sdk\platform-tools;C:\apache-ant-1.9.4\bin」を既存の値の後ろに設定)

PhoneGapのインストール

  1. 「Node.js command prompt」を起動。
  2. コマンドプロンプト上で下記のコマンドを実行。
    npm install -g phonegap

テストプロジェクトの作成

  1. テストプロジェクトを配置するためのフォルダを作成。
    cd C:\
    mkdir PhoneGap
    cd PhoneGap
  2. テストプロジェクトを作成。
    phonegap create HelloPhoneGap
  3. ちょっとだけ修正。
    C:\PhoneGap\HelloPhoneGap\www\index.htmlをエディタで開く。
    36行目辺りの「Device is Ready」を「こんにちは PhoneGap!!」に変更して保存。

Android向けにビルド&実行

  1. テストプロジェクトのフォルダに移動して、Android向けにビルド。
    cd HelloPhoneGap
    phonegap run android
  2. 起動できました!

device-2014-06-04-162845

「こんにちは PhoneGap!!」と書いた部分が、
「こんにちは PHONEGAP!!」となってますが・・・

しばらく色々と、実験してみたいと思います。

————–
2014/07/10追記
PhoneGapから、Cordovaに乗り換えることにしました。(詳細は別の記事で)
PhoneGapをそのまま残しておくのも気持ちが悪いので、アンインストールをすることに。
自分用の備忘録として、手順を記載しておきます。

PhoneGapのアンインストール

  1. 「Node.js command prompt」を起動。
  2. コマンドプロンプト上で下記のコマンドを実行。
    npm uninstall -g phonegap

One Response to “Windows8.1にPhoneGap3.4.0を導入してみました”

  1. […] AntとAndroid SDKの環境変数のパス通し済み。 ※3,4,5の手順は前回の記事を参照 […]

サブコンテンツ

このページの先頭へ