前の記事
目標
- Android Studioで仮想端末を作成・起動させる
- アプリを起動させる
- ブラウザ上でアプリを起動する
Android Studioで仮想端末を作成する。
まずは、Android Studioで仮想端末を作成します。。。と言いたいところですがGoogleの公式ページに丸投げいたします(笑)
以下のサイトを参考にしながらどんな端末でもいいので1つ作成してみてください。
https://developer.android.com/studio/run/managing-avds?hl=ja
作成が完了したら、AVD Managerの一覧にある三角形の再生ボタンをクリックすると仮想端末が動き始めます。 仮想端末を動かしながらの作業は非力なPCやRAMが8GB未満の場合はかなり動作が重くなりますのでご注意ください。。。( 一一)
仮想端末を1つ作成しておけば、あとは基本的にVSCodeから起動、アプリのインストールを行うことができるのでもうAndroid Studioを使うことはないかもしれません。
VSCodeでアプリを仮想端末にインストール・起動させる
仮想端末の起動が完了したら、いよいよサンプルアプリをインストールしてみます。
Cordovaのプロジェクトを作成した時点でHello World的な画面がデフォルトで作成されています。ですので特にソースは修正せずにそのまま端末上で動くかどうかの確認が可能です。楽ちん！
VSCode上の左側のサイドバーにある虫のマークをクリックしてください。次に[デバッグ ▲ [構成] ]みたいな部分にある歯車を押します。
クリックすると[環境の選択]というようなダイアログボックスが表示されますので、Cordovaを選択してください。ここでCordovaの選択肢が現れない場合は、拡張機能のCordova Toolsがインストールされていない可能性がありますので、再度チェックしてみてください！
選択するとlaunch.jsonというファイルが表示されますがとりあえず何も編集せずに閉じてOKです。
先ほどの[デバッグ ▲ [構成] ]の構成の部分のをクリックすると、選択部分が広がり、Run ...がいっぱい表示されると思います(スクリーンショットが撮れない。。orz)
最後に、Run Android on emulatorを選択して再生ボタンを押すと、アプリのビルドと仮想端末上へのインストールが始まります。
仮想端末を起動していなくても設定がうまくいっていればこの段階で仮想端末を自動させようとVSCode(Cordova Toolsかな？)が頑張ってくれますが、環境によってはうまくいかない場合があります・・・
私も3台ほど同じような環境構築をしたのですが、1台だけまったく起動してくれないのですorz
(2018/12/07追記) どうやら開発者向けに公開されているベータ版のAndroid OSを使用している仮想端末を作成ししている場合、エミュレータ起動時にエラーが発生するようです。
当時はAndroid 9(Pie)はまだ公開されていなかったのにそれを使用していたためと思われます。一般に公開されているバージョンを使用するようにしましょう。
もし起動できない場合はAndroid Studioから仮想端末を起動させてあげる必要があります。ちょっとめんどくさいですがとりあえずはこれで対処できます。
無事に起動が完了すればこんな感じの画面が表示されます。
DEVICE IS READYの部分が点滅していますね！ここまでできれば開発環境の構築は完了です。お疲れ様です！
ちなみにこのデモアプリ、大した処理はしていないのですが、めちゃくちゃCPU占有率が高いです。Intel Code i7 4770に80%もリソースを割かせる怪物アプリ。。(笑)起動できることを確認したらさっさと閉じてしまいましょう。
ブラウザでアプリを起動する
非力なPCの場合や仮想端末の起動がめんどくさい、サクッと画面表示を確認したい場合にはブラウザでアプリを起動させる方法が手軽で便利です。
cordova platforms add browserを実行してブラウザ用のプラットフォームを追加します。完了後にRun Android on emulatorを選択したボックスの中にRun Browserが追加されるので、それを選択して再生ボタンを押す。これだけでサクッと起動させることもできます。
※この方法はChromeをインストールしていないと行うことができないので注意です。 VivalidiなどのChromium派生ブラウザでもできるのでしょうか？未確認です( 一一)
最後に
以上で開発環境の構築は完了です！あとはライブラリを読み込むなどありますが、実際のコードの中に書き込んでいく作業となるのでコーディングのほうに入れます。
ここまでの作業も何度かやっていれば自然と覚えることができるので、(ふつうはそんなに何回もやることではないですが)なれというものはすごいですねえ、、('ω')
次回からはいよいよ少しずつコードを書いていきましょう！私もjavascriptは1か月前までは触ったことないほどの人間だったので、なるべく初心者目線で書いていこうと思います！
次の記事
UIフレームワークを導入する。
