Cordovaの開発環境を整える話

2017年6月19日

タイトル通り。

ちょっと自分の時間が取れたので、久しぶりにやったことのメモ。
以前から興味のあったCordovaでアプリ作ろうかなと思って、その開発環境を整えました。

Cordovaとは

今更ハイブリットアプリとはなんぞや、とか、そういう話をしたところで・・と思うので割愛。
簡単に言えば、HTML&Javascript&CSSでネイティブアプリが作れるよってことです。
もとはPhoneGapというツールだったのがApacheがホニャララしてできたツールです。
こういう話は公式読んだ方がわかりやすいのでそちらを参照。
Cordova概要

もともとJAVA書いてた人とか、Objective-C(Swift)書いてる人はその言語で書いた方がわかりやすいと思いますが・・
残念ながら、JAVAもSwiftも端っこを少しかじった程度なので、WEBの技術でネイティブアプリが書けるのは正直ありがたい。
ちなみに、Androidは今だったらKotlinが来てるのかな?
今年のGoogleI/OでKotlinが正式サポートって話もあったしね。
参考:Google I/O 2017 : Introduction to Kotlin (和訳/要約)

と、話がそれたけど本題に行こう。

サンプルプロジェクトの作成

環境はいつものようにMacOS。
ちなみにNode.jsはインストール済みとします。
iOSでエミュレートする場合はXcodeが必要になります。
(Androidは知らん)

まずはCordebva本体のインストール

npm install -g cordova

プロジェクトを作成

cordova create /dev/MyApp

これで、Cordovaのサンプルプロジェクトが作成されました。
作った場所に移動すると、サンプルプロジェクトのファイルができています。

んで、そこに移動

cd /dev/MyApp/

プラットフォームを追加する
実際に動作させる環境をここで設定します。
今回はブラウザとiOSで確認したので、以下のようなコマンドになります。

cordova platform add browser ios

Androidで確認する場合は、androidを追加します。

実行してみる

今回はブラウザとiosのエミュレーションで確認していきます。

まずはブラウザで確認するので、

cordova run browser

すると、chromeが立ち上がってこんな画面が表示されます。

次にiOSで確認するので、Xcodeを起動してエミュレーターを実行して、

cordeva run ios

とすると

Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy'

なんかエラーでた・・・
ios-deployがねーよってことなので、

npm install -g ios-deploy

あと、Xcodeのコマンドラインツールも必要っぽいので

xcode-select --install

で、ライセンスに同意する

sudo xcodebuild -license

長いけど下まで読んで[agree]するとOK

さて、もっかい実行!
とすると

Error: Error code 65 for command: xcodebuild with args: -xcconfig....(以下略)

[Cordova error 65]で検索すると、どうもiOSのエミュレート(実機デバッグ)する場合はProvisioning Profileなるものが必要らしい。。
なんぞそれ?と思ってると、どうも
platforms/ios/にある[.xcodeproj]を編集すればいいとのこと。

というわけで、Xcodeから.xcodeprojを開く

この中央にある[singing]-[term]に自分のAppleIDを紐づけてやるとOK
僕は個人開発ですし、まだ公開する予定もないのでディベロッパーライセンスも持ってないのでこれでいいっぽい。
実際にアプリ作って公開する場合はライセンスがいるから、それはまた別の話かな。

2017/06/19追記
やっぱライセンスは必要みたいですね。

さて、諸々解決したはずなので・・・
改めて実行すると

無事に確認できました。

ちなみに、実機で確認する場合はUSB接続をして

cordova run ios --device

という感じで –device オプションを指定してやるといけます。

今日はこんな感じで。

DEV, WEB

Posted by massyuu