概要
下記の記事を書いたときに、実は同時に開発環境に手を加えていた。
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を通してね！ってログに書いてあるので、その通りにする。
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に追加。
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は、ハマったけど、コマンドライン使わずにデプロイできるのはいいね。
あとテキストエディタとして使いやすいし、拡張機能もいろいろあるので、カスタマイズもできる。
デバッグ実行できたらいいんだけどなー。
とはいえ、環境構築は小さく完結できるようにしないとつらみが増すということを久しぶりに思い知った。
ググった情報をあれもこれもと取り込むのもよくないね。
でも、楽しいね！