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をグローバルインストールします。
npm install -g cordova
これでグローバルインストールが完了です。バージョン確認します。
$ cordova -v 8.1.2 (cordova-lib@8.1.1)
次にcordovaプロジェクトを作成します。
cordova create app01 com.example.myApp01 HelloWorld -d
app01というフォルダが作成されるので、cd app01とします。
今回はアンドロイドなので
$ cordova platform add android
と実行します。削除する場合は
$ cordova platform remove android
とします。package.jsonに以下が追加されています。
"cordova-android": "^7.1.4"
アンドロイドアプリを実行する
アンドロイドアプリを実行するには
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のコマンドプロンプトから
cordova run android
を実行します。
無事エミュレータが起動できました。
ブラウザで実行する
今度はブラウザで実行してみます。
cordova platform add browser
package.jsonを見ればplatformが追加されています。
次に実行してみます。
cordova run browser
以下にアクセスすれば画面が表示されます。
実機で確認する
実機で確認したい場合はUSBで接続してcordova run androidで実機で起動します。
VSCodeでF5を押してデバッグモードで「Run Android on device」でも実機で動作します。この時のconsole.logはVSCodeのデバッグコンソールに出力されます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
資格：少額短期保険募集人,FP3級
コメント