Apache Cordovaの開発環境をちょっと良くして自己満足

##概要

下記の記事を書いたときに、実は同時に開発環境に手を加えていた。
MacにApache Cordovaの開発環境を作って、実機にデプロイしてみた

最初は一つの記事で書いていたんだけど、主題が霞んでしまったので、別記事とした。

タイトルにも書いたけど、自己満足バンザイな内容。

##環境

現状の開発環境は下記の通り。

• Mac
• OS 10.11.5
• Xcode8.1、Android Studio2.1導入済み（SDK含む）
• Node.js v6.9.1
• Cordova v6.4.0

##nodebrewでNode.jsを管理することにした

Node.jsをインストールするとして、複数バージョンをインストールできて、切り替えて好きなものを使えるようにしておくと後々楽そう。
その手のツールとして、nvmとnodebrewというのがあったけど、困ったときに聞きやすい（会社のSlackで名前を見た）nodebrewにした。

###nodebrewインストールでハマる

nodebrewはhomebrewでインストールできる。
参考にしたのは下記。
Node.js のバージョンを切り替えて使いたい！

コマンド

brew install nodebrew

インストールに成功したらPATHを通してね！ってログに書いてあるので、その通りにする。

.bash_profile

export PATH=$HOME/.nodebrew/current/bin:$PATH

bash_profileを読み込み直す。
これ忘れて結構ハマることが多い私。

コマンド

source .bash_profile

インストールされているか確認。

コマンド

$ nodebrew -v
nodebrew 0.9.2

よし、Node.jsのインストールだ！

コマンド

$ nodebrew use stable
No such file or directory at /usr/local/bin/nodebrew line 561.

※このコマンド、勘違いしてたことにあとで気づきます。

おー、パス通ってないのか。
インストールログに書いてあったものをbash_profileに追加。

.bash_profile

export NODEBREW_ROOT=/usr/local/var/nodebrew

再挑戦。

コマンド

$ nodebrew use stable
required brew_dir at /usr/local/bin/nodebrew line 39.

泣きたい…。

brew doctorしてみたら、アップデートしてね！って出るので、アップデートしてみる。

コマンド

$ brew update
/usr/local/Library/Homebrew/cmd/update.sh: line 6: /usr/local/Library/ENV/scm/git: No such file or directory

ふむ、つらい。
でも、ググったら対処法が見つかったので、ホッと一息。
Homebrewでbrew updateしたら/usr/local/Library/ENV/scm/git: No such file or directoryと言われてしまう

コマンド

brew prune
Pruned 0 symbolic links and 2 directories from /usr/local

いけるか…！？

コマンド

$ brew update

成功！

NODEBREW_ROOTのパスも間違ってたので、設定し直した。

コマンド

NODEBREW_ROOT=$HOME/.nodebrew/$

###Node.jsインストールでもハマる

さて、本題のNode.jsのインストールに戻ろうか。
若干飽きてきたよ！

そして、インストールコマンド間違ってたね！
アホだね。

自分でバージョン指定しないといけないんだね。
ということで、公式サイトのダウンロードページに書いてあった、v6.9.1をインストールすることにしたよ。

コマンド

$ nodebrew install v6.9.x
fetch: http://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz
Warning: Failed to create the file 
Warning: /usr/local/var/nodebrew/src/v6.9.1/node-v6.9.1.tar.gz: No such file 
Warning: or directory

curl: (23) Failed writing body (0 != 3813)
download faild: http://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz

またですか！
でもググったら解決策あった。
homebrewにnodebrewを導入する時の備忘録

コマンド

$ brew doctor
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry and just ignore them. Thanks!

・・・

Warning: You have Xcode 8 installed without the CLT;
this causes certain builds to fail on OS X El Capitan (10.11).
Please install the CLT via:
  sudo xcode-select --install

コマンドラインツールの問題かな？

コマンド

sudo xcode-select --install

インストールする？ってダイアログが表示されるので、ポチポチしてインストール開始。
10分くらいかかったかな。

念のため。

コマンド

$ brew doctor

よし、さっきのワーニングは消え去った！

今度こそ…！

コマンド

$ nodebrew install v6.9.x
Warning: Failed to create the file 
Warning: /usr/local/var/nodebrew/src/v6.9.1/node-v6.9.1.tar.gz: No such file 
Warning: or directory

curl: (23) Failed writing body (0 != 2130)
download faild: http://nodejs.org/dist/v6.9.1/node-v6.9.1.tar.gz

ダメでした！！！！！

エラーメッセージでググると「ディレクトリがなかった」というのを見つけて調べてみたら、$HOME/.nodebrew/ディレクトリなんて存在してなかった…。
作ってはくれないのね。

参考にしたのは下記。
nodebrew install が Failed to create the file と怒られる。

コマンド

mkdir ~/.nodebrew
mkdir ~/.nodebrew/src

何度か目のチャレンジ。

コマンド

$ nodebrew install v6.9.x

おお、インストール開始している！！！！！
そして下記のコマンドのほうが早く完了することを知る…。
後手後手だなぁ。

コマンド

nodebrew install-binary <version>

インストールできているか、確認。

コマンド

$ nodebrew list
v6.9.1

current: none

使用するバージョンを指定して、再度確認。

コマンド

nodebrew use v6.9.1
use v6.9.1
$ nodebrew list
v6.9.1

current: v6.9.1

はー、終わった。

###自己満足ポイント

私、複数バージョンインストールすること、あるんだろうか、と。
そんな予定がないならHomebrewでNode.jsインストールしたほうがいいです。
あー、でもHomebrewでハマるのは同じだったかな。

##Visual Studio Codeを開発環境として使用したい

Visual Studio Codeで開発したい。
わりと使いやすいし。
Apache CordovaをVisual Studio Codeで開発するための道のり

###iOS編

さて、実機ビルドしてみよう。
Visual Studio Codeのデバッグ画面を開いて、左上辺りのビルドターゲットを「Run iOS on device」にして、三角ボタンを押す。
ビルドしてるんだかどうかわかんねーと思ったら、ビルドターゲットの右横の長方形のアイコン押したらデバッグコンソールが表示された。
なるほど。

そしてエラー。

コマンド

Check dependencies
Signing for "CordovaSample" requires a development team. Select a development team in the project editor.
Code signing is required for product type 'Application' in SDK 'iOS 10.1'

Xcodeでプロジェクトファイルを開いて、development teamを選択しないといけないのか。
CordovaSample.xcworkspaceをXcodeで開いて、teamを選択、っと。

再度チャレンジ。
うん、別のエラーが出たね！

エラー

Unable to find ideviceinstaller. Please ensure it is in your PATH and re-open Visual Studio Code

ぐぐったところ、下記サイトを見つけたけど、すでに設定ファイルには違う値が記載されている。
[Issue] [Cordova Tool] Unable to "Attach to running iOS on device" , "Run iOS on simulator", & "Run iOS on device" after updated the VS Code from version 0.10.9 to version 0.10.10 #49

試しに直してみたけど、結果変わらず。

ビルド方法を変えてみるかと「Attach to running iOS on device」にして実行。

今度も違うエラー。

エラー

Unable to start ios_webkit_debug_proxy.

こちらは参照したサイトに書いてあって、「ios_webkit_debug_proxyをインストールしろ」ってことらしい。
ん？
ってことは、ideviceinstallerもインストールしろってことなのかな？

試してみよう。

コマンド

brew install ideviceinstaller
brew install ios-webkit-debug-proxy

インストールできたので、VS Codeを再起動して、再度「Run iOS on device」してみる。

エラー

Unable to mount developer disk image.

ふむ。。。
あと、なぜかiOS8.0でビルドしようとするなぁ。

XcodeでCordovaSample.xcworkspaceを開いて、Deployment Targetを10.0に変更。

これでも同じエラーになるので、本腰入れて検索したら、Issueにあがってたというオチ。
"Unable to mount developer disk image." with ios10 and xcode 8.0

VSCodeのCordovaプラグインの問題ってことでいいのかな。
散々エラーに泣かされたけど、

コマンド

brew update && brew upgrade libimobiledevice --HEAD && brew upgrade ideviceinstaller ios-webkit-debug-proxy

これで無事実機ビルド成功。
だが、タイムアウトのエラーも同じように発生。

エラー

Timeout launching application. Is the device locked?

これに関しては解決策が見つからず。
解決策をご存じの方、教えてください！

ひとまず実機にデプロイしたアプリはSafariで確認できるので、先に進めることにする。

あ、このSafariで確認する方法は
端末のWebViewの詳細を調べる方法(Safariインスペクタ)
こちらを参照しました。

###Android編

Visual Studio Codeのデバッグ画面を開いて、左上辺りのビルドターゲットを「Run Android on device」にして、三角ボタンを押す。
拍子抜けするくらいあっさりデプロイ成功。

デバッグ状態も維持できている模様。

###自己満足ポイント

Visual Studio Codeを選択したこと。
極論、開発するためのIDEっぽいものはテキストエディタでいいし、デプロイもコマンドラインでできる。
でも使いたいものを使うとモチベーションに繋がるじゃないですか、たぶん。

##まとめ

Visual Studio Codeは、ハマったけど、コマンドライン使わずにデプロイできるのはいいね。
あとテキストエディタとして使いやすいし、拡張機能もいろいろあるので、カスタマイズもできる。
デバッグ実行できたらいいんだけどなー。

とはいえ、環境構築は小さく完結できるようにしないとつらみが増すということを久しぶりに思い知った。
ググった情報をあれもこれもと取り込むのもよくないね。
でも、楽しいね！