Cordova開発環境をつくる

  • 2017/01/12更新:Macを再インストールしたので再度検証、応じて各所編集

ハイブリッドアプリ開発環境は昔試したことがあるのですが(確かMonacaだったような)、AdobeのOSSサービスを見ていてそういやCordovaってどうなんだろなと思い構築してみました。

結果としては結構やること多かったです。何とかミニマルに行けないかと色々試したものの、結局XcodeとAndroid Studioを入れないと最後まで動かなかったので、どうやらCUIツールのみで構築は推奨してないのかなと思いました。

前提環境

  • MacBook Pro 13″ Late2016
  • MacOS X Sierra 10.12.2
  • Homebrew導入済み

インストールした順番とバージョン

  1. nodebrew 0.9.6
  2. node.js 7.2.1
  3. Xcode 8.2
  4. Android Studio 2.2.3
  5. Genymotion 2.8.1
  6. cordova 6.4.0
  7. Visual Studio Code 1.8.1

参考サイト

全部掲載しているのでむちゃくちゃ長いです。

nodebrew

nodebrewはhomebrewと仕組みが似ている、Node.js用パッケージマネージャです。Node.jsを個別にインストールするよりも管理が楽になります。

インストール

$ curl -L git.io/nodebrew | perl - setup

Bashの設定ファイルにパスを追加

Macのbashには.bashrcと.bash_profileという二つの設定ファイルがあります。役割として.bash_profileはターミナル初回起動時に、.bashrcはセッションを開く度に適用するそうですので、今回は.bashrcの編集をします。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> .bashrc

Bashのリロード

別にターミナルを閉じて起動してもいいですが、下のコマンドでシェルの再ロードができます。

$ source .bashrc

nodebrewのアップデート

nodebrew自身のアップデートは以下のコマンドでできます。

$ nodebrew selfupdate

Node.js

インストール

nodebrewの動作にはNode.jsが必要となります。Node.jsはバージョンが多く存在するため、手動で入れないといけません。今回は特にバージョン指定する必要がないので安定版を入れておきます。

$ nodebrew install-binary stable

Stable版を使用

$ nodebrew use stable
use v7.2.1

nodeのバージョン確認

$ node -v
v7.2.1

Xcode

XcodeのインストールはAppStoreから入れます。

Developerフォルダの変更

コマンドラインツールが事前に入っていると、以下のエラーが出ることがあります。

xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

Developerフォルダの場所が違うと言ってるようで、確かに以下のコマンドを打つと、コマンドラインツールの場所が違います。

$ xcode-select -print-path
/Library/Developer/CommandLineTools

Xcode.app内のDeveloperフォルダに指定し直します。

$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer/

これをやっておかないと上記のエラーメッセージが出ていろいろめんどくさいです。

Xcodeライセンスの認証

コマンドでもライセンス認証できますが、Xcodeアプリを立ち上げて認証したほうがいいです。

$ sudo xcodebuild --license

Spaceキーかqキーで読み進め、最後に「agree」と入力すれば完了です。

【不要】Command Line Toolのインストール

上記でCommand Line Toolの場所をXcode内に指定しているので、この作業はいらないかもしれません。いりません。

$ sudo xcode-select -install

バージョン確認

$ xcodebuild -version
Xcode 8.2
Build version 8C38

Android Studio

MacにはAndroidの開発環境がないので、まずはその準備から始めます。

Javaのインストール

$ brew cask install java

Homebrewでインストールすると、JDK 8 Update112が入りました。java7やjava8と指定すれば、バージョンに応じたものが入るようです。

Android Studioのインストール

Android StudioもHomebrewでサクッと入ります。

$ brew cask install android-studio

初回設定

Complete Installation

  • 「I do not have a previous version of Studio or I do not want to import my settings」にチェック

Android Studio Setup Wizard

  • Welcome
    • Next
  • Install Type
    • 「Custom」にチェック
  • Select UI Theme
    • 「Darcula」にチェック
  • SDK Components Setup
    • 追加で「Android Virtual Device」にチェックそのままNext
  • Emulator Settings
    • そのままNext
  • Verify Settings
    • そのままFinish
  • Downloading Components
    • ダウンロードが終わったらFinish

Welcome to Android Studio

  • 右下「Configure」→「SDK Manager」

Default Preferences

  • SDK Platforms ※以下のもののみチェックを入れる
    • Android 7.0 (Nougat)
    • Android SDK Platform 24
    • Sources for Android 24
    • Google APIs Intel x 86 Atom_64 System Image

Confirm Change

  • そのままOK

License Agreement

  • 「Accept」にチェック

Component Installer

  • ダウンロードが終わったらFinish

SDKのパスを通す

$ echo 'export PATH=$HOME/Library/Android/sdk/tools:$PATH' >> .bashrc
$ echo 'export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH' >> .bashrc
$ source .bashrc

【不要】Androidエミュレータを一応設定

※Genymotionを使うのでエミュレータはナシの方向で。

実際にはGenymotionで仮想実機確認するので必要ないですが一応。

$ android

CUI版のAndroid SDK Managerを設定しないとCPU設定できません。Android StudioのSDK Managerとリンクしてるようなそうでないような。

Android SDK Manager ※以下のもののみチェックを入れる

  • Tools
    • Android SDK Tools 25.2.4
    • Android SDK Platform-tools 25.0.3
    • Android SDK Build-tools 25.0.2
  • Android 7.0 (API 24)
    • SDK Platform
    • Google APIs Intel x86 Atom_64 System Image
    • Sources for Android SDK
  • Extras
    • Android Support Repository
    • Google Repository
    • Intel x86 Emulator Accelerator (HAXM installer)
$ android avd

Android Virtual Device (AVD) Manager

  • 既にある「Nexus_5X API〜」を「Delete」をクリックして削除
  • 「Create」をクリック

Create new Android Virtual Device (AVD)

  • AVD Name: Nexus5Modoki
  • Device: Nexus 5 (4.95″, 1080 x 1920: xxhdpi)
  • Target: Android 7.0 – API Level 24
  • CPU/ABI: Google APIs Intel Atom (x86_64)
  • Skin: Skin with dynamic hardware controls
  • Front Camera: Emulated
  • Back Camera: Emulated

Android StudioからAVDマネージャへのアクセスする方法がないことから、もしかすると今後はAVDは使わない方向なのかもしれません。SDKへのパスもAndroid Studioを起動しないと出てこないものだし。

システムイメージにIntel系以外にARMもあるのですが、そっちでエミュレータを動かすと真っ黒画面で動作確認できません。原因は不明です。

Genymotion

VirtualBoxで動作するAndroid仮想環境です。謹製のエミュレータより動作が速く、実機に近い環境で使うことができます。ただ、言っても仮想環境なのでCPUやストレージなどのリソースを占有します。ハードウェアに多少の余裕があることが条件です。

Genymotionはユーザ登録が必要です。

インストール

Homebrewでインストールできます。GenymotionとVirtualBoxが入ります。

$ brew cask install genymotion

初期設定

Genymotion.appを起動します。

Usage notice

  • Acceptをクリック

Genymotion for personal use

  • Do you want to add anew one?
    • デバイスの新規作成。Yesをクリック

Virtual device creation wizard

  • Select a new virtual device
    • Sign inをクリックし、登録したユーザ名とパスワードを入力
    • Android version: 7.0.0
    • Device model: Google Nexus 5
    • 一覧に「Google Nexus 5X – 7.0.0 – API 24 – 1080×1920」を選択しNext
    • Virtual device nameはそのままでNext
  • Retrieve and deploy the new virtual device
    • ダウンロードが完了したらFinish

Settings

  • Settingsをクリック
  • 「ADB」タブをクリック
  • Use custom Android SDK toolsにチェック
  • Browseをクリックし、SDKのあるフォルダを指定(~/Library/Android/sdk)
    • 「Android SDK tools found successfully」が出ればOK

起動テスト

メイン画面に戻り、Startをクリックして起動してみます。エミュレータより格段に早くてちょっと感動します。

Android StudioにGenymotionプラグインを追加

  • Android Studioを起動

Welcome to Android Studio

  • Configure→Plugins

Plugins

  • Browse repositories…
  • 検索窓に「genymotion」を入力
  • 右ペインの「Install」をクリック
  • 「Restart」をクリックしてAndroid Studioを再起動

これでGenymotionの下準備は完了です。

Cordova

ここまでやってようやくCordovaのインストールができます。

インストール

$ npm install -g cordova

プロジェクトの作成

$ cordova create CordovaMyProject

プラットフォームの追加

ブラウザ・iOS・Androidの開発プラットフォームを作成したプロジェクトに追加します。

これまでの設定がうまく行っていれば、android-toolsがないよ位しか言ってこないと思います。

$ cd CordovaMyProject/
$ cordova platform add browser ios android

ブラウザによる起動テスト

Cordovaのブラウザ起動はChromeに依存しているようですので、Chromeを入れておきます。

$ brew cask install google-chrome

ブラウザによるCordova起動は以下のコマンドで。

$ cordova run browser

Chromeが起動してCordovaの画面が表示されます。起動途中に「Error loading cordova-browser」というメッセージが出ますが、cordovaブラウザなんて物がないので対策が分かりません。

iOSによる起動テスト

そのまま起動すると「Error: ios-deploy was not found. Please download」というエラーが出たので、ios-deployというパッケージを入れます。

$ npm install -g ios-deploy

「BUILD SUCCEEDED」が出たら、以下のコマンドでコンパイルしてみます。

$ cordova run ios

iOSのエミュレータが起動し、Cordovaの画面が出れば成功です。ios-simパッケージは必要ありませんでした。対して変化はありませんがメニューからRotateしたりいろいろ試してみましょう。
ちなみに実機をつないでいるとエミュレータではなく実機から起動しようとするので、開発者登録していない場合「Error code 65 for command」を吐いて止まります。実機は外して実行しましょう。

Androidによる起動テスト

$ cordova run android

実機かGenymotionが動いてなければエミュレータが起動します。エミュレータがない場合は「Error: No emulator images (avds) found.」というエラーが出ます。

エミュレータは笑うほど重いです。これで動くならandroid-sdkでいい気もするのですが、それだと何故かうまくいきません。

起動テストするなら実機かGenymotionをおすすめします。なお、Ganymotionから確認する場合は、あらかじめGenymotionのAndroidを起動させておいてください。

Visual Studio Code

フレームワークはCordova、UI設計はSketch、コーディングはVisual Studio Codeって感じでしょうか。

Visual Studio Code(通称VSCode)はMicrosoft謹製のコードエディタです。Atom的というかSublimeText的というか、よく似たインターフェイスを持っています。起動も速く基本的なセットが揃っているので結構使いやすい感じ。

CordovaならBracketsの方が相性いいのでは?と思うのですが、Cordovaプラグインのバージョンが2014年で止まってたりとあまり活発でないようですね。

インストール

Homebrewでサクッと入ります。

$ brew cask install visual-studio-code

Cordova拡張機能のインストール

  • 左側ボタン群の一番下、「拡張機能」ボタンをクリック
  • 左ペインの検索ボックスに「Cordova」と入力、出てきた拡張機能を選択
  • 「インストール」をクリック

プロジェクトを開く

  • メニューの「ファイル」→「開く」から、作成したCordovaプロジェクトを指定(~/CordovaMyProject)
  • 左側ボタン群の「デバッグ」ボタンをクリック
  • 左ペインの一番上にある歯車アイコンをクリックし、「Cordova」を選択
  • 歯車アイコン左にあるコンボボックスをクリックし、
    • ブラウザで確認するなら「Simulate iOS in browser」か「Simulate Android in browser」
    • iOS Simulatorなら「Run iOS on simulator」
    • Androidエミュレータで確認するなら「Run Android on emulator」
    • Genymotion・Android実機で確認するなら「Run Android on Device」
    • iOS実機は「Run iOS on Device」

これで動作確認ができます。

エラーメッセージ対策

Androidエミュレータのバグはめんどいので無視します。AndroidはGenymotionメインで。

「Unable to start ios_webkit_debug_proxy.」

ライブラリの不足が原因らしいので、以下のコマンドで入れた後、VSCodeを再起動すれば直ります。

$ brew install ios-webkit-debug-proxy

オマケ:Cordovaのプラグイン管理

Cordovaのプラグインはプロジェクト毎に管理されます。Homebrewのようにコマンドでインストールすることになるので、GUIによる一覧表示みたいなものはありません。Cordovaで提供しているプラグインは「Plugin Search – Apache Cordova」で見ることができます。

インストールしているプラグインの一覧を見る

whitelistなんたらというプラグインしか出ないと思います。

※プロジェクトのフォルダに移動してから
$ cordova plugin ls

プラグインの追加

試しにデバイス情報を取得できるプラグインを導入してみます。

$ cordova plugin add cordova-plugin-device

cordova-plugin-deviceプラグインは、端末のmodel,platform,uuid,version,manufacturer等が取得できるものです。参考サイトでは情報が古かったのか「org.apache.cordova.device」となっていましたが、現在はこちらの方がメジャーなようです。

index.jsから呼び出してみる

情報の読み出しだけなので記述は簡単です。

VSCodeでindex.jsを開き、receivedEvent:がある関数の箇所に以下のコードを追記します。

【43行目あたり以降追記】
var deviceInfo = "";
deviceInfo += "cordova:"      + device.cordova      + "\n";
deviceInfo += "model:"        + device.model        + "\n";
deviceInfo += "platform:"     + device.platform     + "\n";
deviceInfo += "uuid:"         + device.uuid         + "\n";
deviceInfo += "version:"      + device.version      + "\n";
deviceInfo += "manufacturer:" + device.manufacturer + "\n";
deviceInfo += "isVirtual:"    + device.isVirtual    + "\n";
deviceInfo += "serial:"       + device.serial       + "¥n";
alert(deviceInfo); 

保存した後、VSCodeのデバッグボタンをクリックしてRun iOS on Simulator等に変えて実行すると、画面表示後デバイス情報がアラートで表示されるようになります。

index.js内にプラグインを呼ぶコードがないことから、導入したプラグインは基本的に有効になっている気がします。


オマケ:GenymotionのAndroidを日本語化

  • ランチャーから、「Custom Locale」を起動
  • 「ja – Japanese」にチェック
  • 「SELECT ‘JA’」

これだけ。


オマケ:全てをやり直したくなったら

Android Studioのアンインストール

以下の項目を削除すればいいです。AppCleanerでもそれなりに消えますが全てではありません。AppCleanerは一部間違ったものが検出されることがあるので、ちゃんと消す項目をチェックしておきましょう(MAMPを削除するとき酷い目にあった)。

$ rm -rf /Application/Android\ Studio.app
$ rm -rf ~/Librarty/Application\ Support/AndroidStudio2.2
$ rm -rf ~/Library/Android
$ rm -rf ~/Library/Caches/AndroidStudio2.2
$ rm -rf ~/Library/Logs/AndroidStudio2.2
$ rm -rf ~/Library/Preferences/AndroidStudio2.2
$ rm ~/Library/Saved\ Application\ State/com.google.android.studio.saveState
$ rm -rf ~/.gradle
$ rm -rf ~/.android
$ sudo rm /private/var/db/BootCaches/E527278B-A268-41CF-932C-28EF2834EE97/app.com.google.android.studio.playlist
$ sudo rm -rf  /private/var/folders/wm/lkg2x2d10wz4sc53qkhd7fkw0000gn/C/com.google.android.studio

※作業していたファイルも消えるので注意
$ rm -rf ~/AndroidStudioProjects

Cordova、Node.jsのアンインストール

CordovaやNode.jsは固有アプリではないのでAppCleanerは使えません。

Node系は.nodebrewに全て入っているので、.nodebrewを削除すればいいです。

$ sudo npm uninstall cordova -g
$ rm -rf ~/.cordova/
$ rm -rf ~/CordovaTest/ ※作業フォルダ名。作業していたファイルも消えるので注意
$ sudo npm uninstall npm -g
$ rm -rf ~/.npm/
$ rm -rf ~/.nodebrew/
$ rm -rf ~/node_modules/

.bash_profileの編集

【以下を削除】
export PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH=$HOME/Library/Android/sdk/tools:$PATH
export PATH=$HOME/Library/Android/sdk/platform-tools:$PATH

処理が終わったら、cordova,node,nodebrew,npmそれぞれのコマンドを叩いて「command not found」が出ればOKです。

Xcodeのアンインストール

これは意外にもAppCleanerで全消しできます。Genymoton、VSCodeも多分AppCleanerでいける。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中