VSCodeでCordovaの開発をしてみる

VSCodeでCordovaの開発をしてみる

Cordova Tools ExtentionプラグインをインストールすればVSCodeで効率よくCordova開発をすることが可能になります。

Java Extension Packプラグインをインストールします。

VSCodeのjava.homeを設定します。VSCode左下の歯車をクリックし、settingsを選択します。

java.homeを設定します。

Andoroid SDKをインストールします。ダウンロードサイト

現状はAndroid StudioからSDKをインストールします。

SDK Managerを選択します。

Android 7.1.1 (Nougat)を選択して、OKを押します。

次にnodistなどでnodeとnpmをインストールします。

Cordovaをグローバルインストールします。

これでグローバルインストールが完了です。バージョン確認します。

次にcordovaプロジェクトを作成します。

app01というフォルダが作成されるので、cd app01とします。

今回はアンドロイドなので

と実行します。削除する場合は

とします。package.jsonに以下が追加されています。

アンドロイドアプリを実行する

アンドロイドアプリを実行するには

と実行します。「No target specified and no devices found, deploying to emulator」と表示されてエミュレータが表示されない場合はAVDを作成する必要があります。

Android StudioにADK Managerがあるので、それを選択します。

クリックします。

今回は上記のエミュレータを選択しました。

Android 7.1.1 (Nougat)なので、そのバージョンのシステムイメージをダウンロードします。

「Finish」をクリックします。

ダウンロードしたシステムイメージを選択して、「Next」をクリックします。

デフォルトのまま「Finish」をクリックします。これでAVDが作成できました。

これで再度VSCodeのコマンドプロンプトから

を実行します。

無事エミュレータが起動できました。

ブラウザで実行する

今度はブラウザで実行してみます。

package.jsonを見ればplatformが追加されています。

次に実行してみます。

以下にアクセスすれば画面が表示されます。

http://localhost:8000/index.html

実機で確認する

実機で確認したい場合はUSBで接続してcordova run androidで実機で起動します。

VSCodeでF5を押してデバッグモードで「Run Android on device」でも実機で動作します。この時のconsole.logはVSCodeのデバッグコンソールに出力されます。

高橋

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^