からくりがてんこ

IT関連情報、プログラミングに関する作業ログや備忘録を記載していきます。

HTML5ハイブリッドアプリ(Cordova)の環境構築

HTML5ハイブリッドでAndroidiOSアプリを作成したい!

うちは人員(リソース)が少ないのでスピード上げてアプリ開発するためにはこれかな
って思ってでいろいろ調べてみました。

まずは始めるために環境作りの章。

前提

  1. AndroidSDKがインストール済みであること
  2. MacOSXであること
  3. brewも入れといたほうがいいかも

各種インストール作業

Node.jsのインストール

http://nodejs.org

インストールしたらバージョンもついでに確認

$ node -v
$ npm -v

cordovaコマンドラインツールのインストール

$ sudo npm install cordova -g

  • gはグローバルな領域にインストールするオプション

こちらもバージョン確認。

$ cordova -v

AndroidSDKのパスを通す

.bash_profileに下記を追加して

export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/tools/
export PATH=$PATH:/Applications/(AndroidSDK展開フォルダ)/sdk/platform-tools/

反映!&確認

$ source ~/.bash_profile
$ android -h
$ adb version

プロジェクトの作成

$ cordova create test com.sample.text Test -d

  • testディレクトリ配下に
  • com.sample.textという識別子で
  • Testというアプリ名を

作成するという意味で"-d"は途中経過を表示するオプションです。

プラットフォームの追加

$ cordova platform add ios
$ cordova platform add android
$ cordova platform ls

ちなみにプラットフォームから外すには

$ cordova platform remove ios

確認方法

Andoidシミュレータで確認

$ cordova emulate android -d

Androidシミュレータが立ち上がります。
※antがないよ!って言われたので"$ brew install ant"をしました。

iosシミュレータで確認

$ cordova emulate ios -d

iOSシミュレータが立ち上がります。
事前に"$ brew install ios-sim"でios-simを入れておく必要があるかも

ブラウザで確認

$ cordova serve android

デフォルトは8000版ポートでローカルサーバが立ち上がりますので、
http://localhost:8000 で起動が確認できます。

上記はAndroidプラットフォームの動作確認のため"android"と指定してます。
(server でなく serve なのね。。Railsのクセでつい。。)

最後にAndroid実機で確認

AndroidMacをUSBで接続して

$ cordova run android

…で起動完了。

ひとまず環境作りはこれで!