VSCodeでCordovaの開発をしてみる

VSCodeでCordovaの開発をしてみる

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

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

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

VSCodeでCordovaの開発をしてみる

java.homeを設定します。

VSCodeでCordovaの開発をしてみる

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

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

VSCodeでCordovaの開発をしてみる

SDK Managerを選択します。

VSCodeでCordovaの開発をしてみる

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があるので、それを選択します。

VSCodeでCordovaの開発をしてみる

クリックします。

VSCodeでCordovaの開発をしてみる

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

VSCodeでCordovaの開発をしてみる

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

VSCodeでCordovaの開発をしてみる

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

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

VSCodeでCordovaの開発をしてみる

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

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

を実行します。

VSCodeでCordovaの開発をしてみる

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

ブラウザで実行する

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

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

次に実行してみます。

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

http://localhost:8000/index.html

VSCodeでCordovaの開発をしてみる

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA