今回は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環境は結構簡単に環境つくれましたね。
これから開発をおこなっていきますが、使えるそうなことがあればまた書いていきます。
ご意見、ご感想等ございましたら、↓よりコメントお願いします。励みになります。
以上です。今後ともよろしくお願いします。