Windows8.1にCordova3.5.0を導入してみました

一月ほど前に、同じWindows8.1の環境にPhoneGap3.4.0を導入し色々と動作確認を行いました。
基本的な使い方はなんとなく理解して、現在Android用アプリとして公開中の「日報」の移植を始めました。
そこでハマったのが、アイコンの差し替えです。

PhoneGap用のconfig.xmlファイルには、アイコン設定用のパスを記述することができ、wwwフォルダ配下にサイズ別のアイコンファイルを配置しておけば、ビルド時に自動的に差し替えられるものと思ったのですが違いました。
結論から言うと、android向けの場合だと、platforms/android/res/配下のサイズ別のアイコンファイルを手動で切り替える必要があるようです。(自動化するShellはネット上で見つけました)

上記の結論に至るまでに、PhoneGapだけでなくCordovaを試してみたり、WebサービスのMonacaを利用してみたりと、紆余曲折することになりました。
PhoneGapにせよ、Cordovaにせよ「これは!」と言う情報源が少ないのが厳しいですね・・・まぁ 色々と勉強になりました。

と、前置きが長くなりましたが、今回は、Windows8.1にCordova3.5.0を導入した際の手順をまとめました。
PhoneGapの時とほとんど変わりませんが、良かったらご参考まで。

前提条件

  1. Androidアプリを構築するための環境(JDK/Eclipse/android SDKなど)は構築済み。
  2. ADBでAndroidのエミュレータを登録済み。
  3. Node.jsインストール済み。
  4. Antインストール済み。
  5. AntとAndroid SDKの環境変数のパス通し済み。
    ※3,4,5の手順は前回の記事を参照

Cordovaのインストール

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

プロジェクトの作成

  1. プロジェクトを配置するためのフォルダを作成。
    cd C:\
    mkdir cordova
    cd cordova
  2. プロジェクトを作成。(Androidアプリ「日報」のHtml5版を作成)
    cordova create Html5Daily
  3. 「C:\cordova\Html5Daily\config.xml」を適宜修正。
  4. 「C:\cordova\Html5Daily\www」配下のコンテンツを適宜修正。
    ※今回は、index.htmlとjsファイルを修正。

Android向けにビルド&実行

  1. プロジェクトのフォルダに移動して、Androidのプラットフォームを追加。(PhoneGapには無かった独自の操作)
    cd Html5Daily
    cordova platform add android
  2. ビルド&実行。
    cordova run android
  3. 試作中のHtml5版の「日報」を起動できました!

日報(試作中)

ついでにCordovaのアンインストール手順も記載しておきます。

Cordovaのアンインストール

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

カンタンデスネ!!

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

  1. […] 先ほどの投稿にも記載した、私が深みにハマったCordova(PhoneGap)でアイコンを変更する方法について、共有です。 […]

サブコンテンツ

このページの先頭へ