iPhone / iOSと Android 両方で動くアプリを開発してみたいと思っていたら、Apacheの Cordova というオープンソースで作れるとのことで Windows7 に開発環境をセットアップしてみました。
Cordova で提供される Cordovaフレームワーク は、モバイル上で稼動するアプリを作る際に、iOSやAndroidの実装の違いを吸収するために作られた PhoneGap が元になっています。HTML5やJavaScriptを使って一つアプリを作れば、いろんなモバイルで動かすことが可能になるとは便利ですよね。
ダウンロードと環境準備
iOSとAndroidの両方の環境設定が必要なだけに、環境準備はちょっとややこしいです。が、それもあってか Cordovaセットアップ用コマンドが用意されていますので、それを活用しましょう。JavaScriptで稼動するため、JavaScriptエンジンの Node.js を以下からダウンロード (INSTALL) してください。
=>Node.js の ダウンロード (INSTALL)
node-xxxx.msi がダウンロードされたら実行し、基本そのままのデフォルト設定で導入します。すると、Node.js のパッケージ管理コマンド 「npm」 が実行できるようになり、後述のCordovaセットアップで使います。
次に、Java開発環境である「Java SE 7」のJDKが導入されていない人は、以下からJDKをダウンロードして導入してください。(JREだけではNGでSDKが必要。Oracle版が必須)
=>JDK (Java SE Development Kitの、jdk-7u79-windows-x64.exe 等)
また、ビルドに必要なApacheのAntを導入してください。
http://ant.apache.org/bindownload.cgi の中ほどにある、apache-ant-X.X.X-bin.zip をダウンロードして解凍してください。EclipseのPleiades等を導入している人は、以下の例のようにPATHを設定すればそのまま使えます。
Android SDK 実行のために、WindowsにJava実行のPATHを設定します。Windowsの[コンピューター][システムのプロパティ][詳細設定][環境変数]で、以下の2つをセットしてください。
ユーザー環境変数(新規追加): JAVA_HOME
変数値(例): C:\Program Files\Java\jdk1.7.0_79
ユーザー環境変数(新規追加): ANT_HOME
変数値 (Pleiadesが入っている場合の例): C:\pleiades\eclipse\plugins\org.apache.ant_1.9.2.v201404171502
ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;%JAVA_HOME%\bin;%ANT_HOME%\bin
Android 用開発キット(SDK)の、「Android Studio」を以下からダウンロードし、android-studio-xxxx.exeを実行してください。(android-studio-bundle-141.1890965-windows.exe で900MB近くあり、導入はさらに4GB程度必要となります)
基本そのままのデフォルト設定で大丈夫です。(前のバージョンを聞かれたら、Do not have previous version を選択)
=> Android Studio
Intel HAXMがインストールされていないと、エミュレーターを実行することができません。導入最後にこれらのエラーが表示されたら、BIOSのCPU Configurationで、[(Intel) Visualization Technology]をオンにして Android Studio を再導入してください。
Macの人は、iOS用開発キット(SDK)の、「Xcode」を以下からダウンロードしてください。AppStoreからダウンロードする形になります。
=> Xcode
残念ながら、私のようなWindows環境の人にはこの Xcode を導入することが基本的にできません。実際に iOS環境でテストしてみるのは Mac購入後にするとして、iOSでも動くアプリになると信じて、まずはWindows上の Android環境でテストしてみたいと思います。
Cordovaのセットアップ
Windowsのアクセサリのコマンド・プロンプトを立ち上げ、以下を実行してください。(以下のように、Node.jsを導入したディレクトリから実行)
C:\Program Files\nodejs> npm install cordova -g
すると、以下のようなメッセージを出力し、導入が完了します。
cordova@5.0.0 C:\Users\XXXX\AppData\Roaming\npm\node_modules\cordova
├── q@1.0.1
├── underscore@1.7.0
├── nopt@3.0.1 (abbrev@1.0.5)
└── cordova-lib@5.0.0 (valid-identifier@0.0.1, osenv@0.1.0, ….
次に、Cordovaプラグイン を実行するための plugman を以下で導入します。
C:\Program Files\nodejs> npm install plugman -g
以下のように、cordova コマンドで引数 -v を与えると、バージョンが表示されるはずです。
C:\Program Files\nodejs> cordova -v
5.0.0
また、cordova コマンドが、Android SDKの各種ツールを呼び出せるようにするために、以下の2つのPATHを、Java同様に追加します。(以下の「ユーザー名」のところは、各環境に合わせて変更)
ユーザー環境変数 [Path] を編集し、後ろに以下を追加
……;C:\Users\ユーザー名\AppData\Local\Android\sdk\tools;C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools;
うまくPATHが設定できていれば、以下の android コマンドをコマンドプロンプトで実行すれば、ヘルプが参照できるはずです。
> android -h
続きを読む Cordova – iPhone, iOSと Android 両方で動くアプリ開発環境 →