QuasarのAndroidアプリ開発環境を構築してみる【Windows】
はじめに
個人的に現時点（2022 年 10 月 12 日時点）にて Vue3 のフレームワークは Quasar が良いのではないかと考えています。Quasar は UI コンポーネントの提供もしているので、Vuetify との比較になることがありますが、Quasar はプロジェクトの作成とともに、他ライブラリもテンプレートとして提供してくれていたり、マルチプラットフォーム対応するためにコンパイラ連携も提供しているので、立場的には Nuxt あたりと同じになるのかなと思います。
マルチプラットフォーム対応する上でも、Flutter よりも良い選択肢のように感じています。何より言語が Javascript なのがいいですね。Flutter は Dart なので、言語やその癖を覚える必要ありますし（比較的難しいわけではないので、どっちでもいいっちゃどっちでもいいですが）。
ただ一番の欠点は日本語の資料が少ないことだと思うので、本ドキュメントでは開発環境の構築について記述してみようと思います。
ここでは、一応 Android Studio のインストールからビルドまでの流れを記述します。
Android Studio インストール
Android Studio は何で行ってもいいですが、自分は scoop を使用します。scoop の導入は話がそれてしまいますので、今回は割愛します。
scoop install android-studio
インストールしたら一応「SDK Manager」「Device Manager」にて欲しい SDK と Device を確認してください。必要であればそれぞれインストールします。
環境変数の設定
設定しないといけない環境変数と設定例は以下の通り。公式では JAVA_HOME の設定について書かれていないので、他のやり方してたら勝手になんかしてくれるんですかね。
- ANDROID_HOME：C:\Users<user_name>\AppData\Local\Android\Sdk
- ANDROID_SDK_ROOT：C:\Users<user_name>\AppData\Local\Android\Sdk
- JAVA_HOME：C:\Users<user_name>\scoop\apps\android-studio\current\jre
(2023 年 1 月 13 日追記)
またビルド出来ないなぁ、と思ってたら（別 PC）、ユーザ環境変数の方の設定が優先されていた。気を付ける必要がある。
Quasar 設定
Quasar CLI をインストールしていれば以下のコマンドでプロジェクトの作成ができます。
npm init quasar
次に、できたプロジェクトフォルダにて以下のコマンドでビルドに必要な設定ファイル等々が生成されます。
quasar mode add capacitor
Windows の場合は、quasar.config.js に以下の設定が必要です。
module.exports = configure(function (/* ctx */) {
return {
// ~~~~~~
bin: {
windowsAndroidStudio:
'C:\\Users\\<user_name>\\scoop\\apps\\android-studio\\current\\bin\\studio64.exe',
},
}
}
Dev サーバの起動
以下のコマンドを押下すると、Android Studio が起動します。エミュレータは勝手には起動しないので、自分で起動しないといけないです。
quasar dev -m capacitor -T android
ビルド
以下のコマンドで、ビルドが開始します。ビルドが完了すると、「/dist/capacitor/android/apk/release/」に apk ファイルが生成されます。
quasar build -m capacitor -T android
注意
公式ドキュメントにも何度も記述ありますが、「Gradle」のアップデートは絶対にしないでください。おそらく Capacitor とのバージョン互換を保つためだと思います。
おわりに
今回は Android 開発環境について記述しましたが、mac があれば Xcode のセットアップして iOS アプリの開発も可能になります。また、Capacitor API ではデバイス依存なリソースにもアクセス可能になるので、それで遊んでみるのもいいかもしれないですね。
Discussion