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)でアイコンを変更する方法について、共有です。 […]

サブコンテンツ

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

ビジネス

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

学習(国語・算数)

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

学習(理科・社会)

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

その他

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

このページの先頭へ