Cordova

Cordovaハイブリッドアプリ開発環境構築

今回はApache Cordovaのハイブリッドアプリ環境構築を行い、

ブラウザ、実機でのHello World まで確認します。

作成する環境

・Windows 10 Pro
・Cordova
・Visual Studio Code

環境構築

Node.jsインストール

リンク先よりダウンロード&インストール
https://nodejs.org/ja/

Android Studioインストール

リンク先よりダウンロード&インストール
https://developer.android.com/studio/?hl=ja

次へ

Android Virtula Deviceにチェックして次へ

次へ

Install開始

終わったら次へ

完了

Do not import settingsを選択してOK

次へ

Standard選択で次へ

好みの方を選択して次へ

完了

ダウンロードが始まります。終わったら次へ

私はRunning Intel® HAXM installer で止まりました。
止まった場合は、一度アンインストールしてから、同じ手順を踏みます。

完了後、この画面が開きます。

Cordovaインストール

Windows PowerShellにて以下のコマンドをたたく。

npm install -g cordova 

プロジェクトの作成

1.ワークスペースを生成
今回は「C:\cordovaTest」を使用します。

mkdir C:\cordovaTest
cd C:\cordovaTest

2.プロジェクトを生成
今回のプロジェクト名は「test」にします。「C:\cordovaTest\test」ができます。

cordova create test com.example.hello HelloWorld

3.プラットフォームの生成

cd C:\cordovaTest\test
cordova platform add android
cordova platform add ios

4.VSCodeで拡張機能でCordova Toolsを取得
「C:\cordovaTest\test」を開いておいて、サイドバーから拡張機能を開く

「Cordova」と入力すると出てくる「Cordova Tools」をインストール

5.プロジェクトにCordovaを紐づける
サイドバーからデバッグを開き、歯車アイコンをクリックして、Cordovaを選択

動作確認

ブラウザ上での動作確認

簡単な動作確認とかは基本的にこれを使えばよさそう。

Android ブラウザ確認

左のプルダウンから、Simulate Android in browser を選択

デバッグの開始ボタン押下

VSCode上に地図が表示され、

Hello Worldブラウザが立ち上がりました。

iOS ブラウザ確認

左のプルダウンから、Simulate iOS in browser を選択

同様にデバッグの開始ボタン押下でAndroidと全く同じ結果になることを確認できたらOK

実機での動作確認

Androidでの実機確認

1.Android StudioにてAVDの設定

1.Android Studioを起動。C:\cordovaTest\testをプロジェクトとして開く。

2.AVD Manager 起動

3.Create Visual Device...クリック

4.端末を選んで次へ。(とりあえずデフォルトでOK)

5.最新晩をDownloadして次へ(ダウンロードするとNextは活性になります。)

6.完了

7.起動ボタン押下

8.エミュレータが起動します。

2.アンドロイド端末(実機)で以下を実施
1.設定>端末情報>ビルド番号を7回タップ
2.設定>開発者向けオプション>USBデバッグをON
3.USBでPC接続

3.Cordovaコマンド実行

cordova run android

起動できました。

iOSでの実機確認

iOSの実機デバッグにはxcode(Mac専用)が必要なため、実機デバッグはできません。
ブラウザで確認するしかないようです。。。

最後に

iOSに関しては実機確認まで至りませんでしたが、Androind環境は結構簡単に環境つくれましたね。

これから開発をおこなっていきますが、使えるそうなことがあればまた書いていきます。

ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。

以上です。今後ともよろしくお願いします。

-Cordova

Copyright© 婿入りエンジニア、ブログ書く , 2019 All Rights Reserved.