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の手順は前回の記事を参照 […]

サブコンテンツ

公開中のAndroidアプリ(全て無料です)

ビジネス

おじさんのメモ帳 おじさんのメモ帳
シンプルなメモ帳
日報 日報
日報作成補助ツール
議事録 議事録
議事録作成補助ツール

学習(国語・算数)

漢字かな 漢字かな
漢字の読みの学習に
ひらがなプラス ひらがなプラス
かな・カナの学習に
暗算百問 暗算百問
毎日暗算で頭の体操
あんざん25 あんざん25
両手で計算してみよう

学習(理科・社会)

記号かな 地図記号
地図記号の学習に
魚かな 魚かな
海の生物の学習に
動物かな 動物かな
陸上の生物の学習に
野菜かな 野菜かな
植物な食物の学習に
元素記号 元素記号
元素記号の学習に

その他

こづかい帳 こづかい帳
計算力と金銭感覚を育もう
お絵かきプラス お絵かきプラス
メモや絵日記等に

このページの先頭へ