日々ろぐ

人に優しく٩( 'ω' )و

Cordovaの開発環境を整える話

タイトル通り。

ちょっと自分の時間が取れたので、久しぶりにやったことのメモ。 以前から興味のあった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 オプションを指定してやるといけます。

今日はこんな感じで。