読者です 読者をやめる 読者になる 読者になる

Aqutras Members' Blog

株式会社アキュトラスのメンバーが、技術情報などを楽しく書いています。

Apache CordovaをVisual Studio Codeで開発するための道のり

こんにちは。id:naosuke2dxです。
現在、弊社ではApache Cordova*1を使うプロジェクトが走っています。
自分もそこにアサインされているのですが、最近話題のVisual Studio Code(VSCode)を使おうと思い、いろいろと設定を行いました。
今回は、いろいろと設定のメモを残しておきます。

今回は、Mac OS Xを対象としています。

Cordovaのインストール

簡単1コマンドでインストールできちゃいます。

$ npm install -g cordova

Cordovaプロジェクトの作成

これも1コマンドですね。 ついでに、デプロイターゲットも追加しておきます。

$ cordova create Hello com.aqutras.Hello HelloApp
$ cordova platform add android
$ cordova platform add ios

gitで管理をする際は、以下のものを追記します。

# Cordova  
/platforms   # プラットフォームごとのビルドファイル
/plugins     #  外部のプラグイン

VSCodeのインストールと設定

VSCodeのダウンロードとインストールは、ここから行います。
ダウンロード後、VSCodeを起動すると、このような画面になると思います。
f:id:naosuke2dx:20160425201731p:plain:w300

ここで、⌘+Pを押し、以下の様な文字を入力します。 >extensions: install extension

f:id:naosuke2dx:20160425201935p:plain:w300

エンターを押し、再び以下の画面のように入力します。
すると、このようにCordova Toolsが表示されるので、エンターを押してインストールします。

f:id:naosuke2dx:20160425201857p:plain:w300

インストール後は、再起動を求められるので、再起動をしてあげましょう。

Cordovaの設定

特に設定を行うことはないのですが、.gitignoreに追記したい人は、

.vscode   # vscodeの設定ファイル

を追記するといいと思います。

VSCode上での実行

CordovaプロジェクトディレクトリをVSCodeで開いて、Debugタブを選択します(写真左アイコン群の一番下)。

f:id:naosuke2dx:20160425205618p:plain:w300

左上の歯車アイコンをクリックして、Cordovaを選択します。

f:id:naosuke2dx:20160425205710p:plain:w300

すると、launch.jsonファイルが作成されると同時に、歯車アイコンの横のセレクタから、ターゲットが選択できるようになります。

f:id:naosuke2dx:20160425205821p:plain:w200

その後、適当なターゲットを選択し、再生ボタンを押すと…?

f:id:naosuke2dx:20160425210034p:plain:w300

はい、起動しませんでした。

トラブルシューティング

Run iOS Simulatorspawn cordova ENOENT

よくわからないけど、npm install -g cordovaすると自分の環境では直りました。なんなんだろう。

Attach to iOS...Unable to start ios_webkit_debug_proxy.

シミュレータ上でWebインスペクタを使用するライブラリが不足しているというエラーメッセージです。
そのため、以下のコマンドを打って、インストールを行います。

brew install ios-webkit-debug-proxy

インストール後に、VSCodeを再起動します。
その後、iOSシミュレータ上で、Settings→Safari→Advancedから、Web Inspectorが有効になっていることを確認してください。

Run Android on Simulatorspawn cordova ENOENT

Androidの仮想マシンが設定されているか確認をします。
ターミナルで、 android avdと叩き、AVD Managerを起動します。
そこで、Createを押し、仮想マシンを作成します。
その後、再度実行ボタンを押すとよいです。

まとめ

今回は、Apache CordovaをVSCodeをつかって開発を始めるまでについて、簡単に説明しました。
トラブルシューティングについては、色々と調べたけどあまり情報がなく、自分でもなぜ直ったのかよくわかっていない部分もあります。
今後、わかったらまた記事にしたいと思います。