🐶

QuasarのAndroidアプリ開発環境を構築してみる【Windows】

2022/10/12に公開約2,200字

はじめに

個人的に現時点(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

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

ログインするとコメントできます