ミズイロラボ

読み返して恥ずかしくないものを書きたい

Cordovaでハイブリッドアプリを作るver1.0（開発環境構築）

web

f:id:ne200152g:20150121015153j:plain

昨日からの続き。

Cordovaでハイブリッドアプリを作るver0.5（開発環境構築） - ミズイロラボ

cordovaを使ってアプリ制作の開発環境構築の続きを書く。

アプリ制作2日目

Android SDKのディレクトリにパスを通す

初日はAndroid SDKのディレクトリのパスがわからずに詰んで寝てしまった。 次の日AndroidStudioは普段仕事で使ってるwebstormというIDEの親戚だったことを思い出した。 webstormにはcmd + aを押すことで適当にやりたいことを打つと候補がでる神機能がある。 だめもとでAndroidStudioでcmd + aを打った。webstormと同じ機能があった！そこに適当に「sdk」と入力すると最初にAndroidSDKManagerとでたので実行。SDK Pathのところにパスが書いてあった、やった！

ターミナルを開く、ホームディレクトリで以下のコマンドを入力

vim .bash_profile

.bash_profileを入力できるようになるから以下を追記

export PATH=$HOME/Library/Android/sdk/tools:$PATH export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH

僕の場合はここにあったけどみんながそうとは限らないかもしれないからそれぞれのパスにしてみてください。

パスが通っていたらandroidコマンドが使えるようになる試しに入力してみる。

$ android -h

動いたらパス通ってる！環境構築でここに一番時間かかった…

プロジェクトを作成

$ cordova create hello com.example.hello HelloWorld -d

このコマンドでcordovaで必要なファイルが一気に生成される。helloというディレクトリができるはず。 -dオプションはコマンドの過程を見れるようにするものらしい、エラーとかでたときわかりやすい。

OS用のファイルを追加

次にOS（iOSとかAndroidとか）用の必要なファイルを追加する。 僕の場合はAndroid用のアプリを作りたかったからAndroidのファイルだけ追加した。 まず新しく作ったhelloディレクトリに移動。

$ cd hello

ファイル追加のコマンドを打つ

cordova platform add android

だがしかしここでエラーがでた。

Error:Please install ndroid target 19

とかそんな感じ。 でもこのエラーの解消方法は本に書いてあった。なんて親切。 まずはAndroid SDK Managerを立ち上げる。さっきAndroidStudoから起動したやつだ。 ターミナルに

$ android

と入力Android SDK Managerが立ち上がるのでAndroid SDKを追加する。 僕はとりあえずAndroid 4.2.2とAndroid5.0.1を追加した。

f:id:ne200152g:20150122014421p:plain

チェックをいれて[Install Packages]のボタンを押す。 ライセンスを確認して[Accept]にチェックを入れて[Install]ボタンを押す。 結構時間がかかったが無事に終わった。

Androidエミュレーターの起動

これでエミュレーターを起動する準備ができたから起動してみる。

$ cordova emulate android -d

ビクビクしながらコマンドを打ったけどやっぱりエラーがでた＼(^o^)／ まぁ一発ではいかないかー。

Failed to run "ant -version" cordova

エラーの一部はこんな感じだった早速ググるStackoverflowがヒットした、見てみるとすぐに解決できそうだったからコマンドを入力

$ brew install ant

ちなみにこれはHomebrewが入ってないと実行できないので入ってない人はHomebrew入れてみてください。

インストールが終わったとこで再度ためしたら無事に起動した。

実機でアプリを動かす

さていよいよ実機でアプリを動かす、スマホをUSBでつないでこのコマンドを打つと実機で動くらしい、どうせ一発じゃだめだろうとおもいながら入力

$ cordova run android

途中までいい感じだったけど最後のほうでエラーがでた。

WARNING : No target specified, deploying to emulator 'emulator-5554'.

ググってみるとまたStackoverflowがヒットほんとにありがたい。 でもエラーじゃないんじゃない？的なことが英語で書いてあった。

androidをUSBで開発できるモードになっていなかったのが問題らしい…

実機をUSBデバッグモードにする方法はNexus6であればこのブログが参考になった。本当にありがとうございます。

ここまで結構かかったけどなんとか実機でアプリが動いた！ 開発が進んだらまた書いてみようと思う。