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をグローバルインストールします。
|
1 |
npm install -g cordova |
これでグローバルインストールが完了です。バージョン確認します。
|
1 2 |
$ cordova -v 8.1.2 (cordova-lib@8.1.1) |
次にcordovaプロジェクトを作成します。
|
1 |
cordova create app01 com.example.myApp01 HelloWorld -d |
app01というフォルダが作成されるので、cd app01とします。
今回はアンドロイドなので
|
1 |
$ cordova platform add android |
と実行します。削除する場合は
|
1 |
$ cordova platform remove android |
とします。package.jsonに以下が追加されています。
|
1 |
"cordova-android": "^7.1.4" |
アンドロイドアプリを実行する
アンドロイドアプリを実行するには
|
1 |
cordova run android |
と実行します。「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のコマンドプロンプトから
|
1 |
cordova run android |
を実行します。
無事エミュレータが起動できました。
ブラウザで実行する
今度はブラウザで実行してみます。
|
1 |
cordova platform add browser |
package.jsonを見ればplatformが追加されています。
次に実行してみます。
|
1 |
cordova run browser |
以下にアクセスすれば画面が表示されます。
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の大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
