📲

Nuxt3でスマホアプリを開発する環境を作る【Android+Capacitor+Nuxt3】

2023/01/18に公開

Android

Nuxt

Capacitor

tech

スマホアプリを作りたいな～
ReactよりはVue使いたい...Flutterは覚えたくないな～

とfeedを眺めていたらこんなものを見つけた。
https://capacitorjs.com/

これは触るしかない。

Capacitor とは

簡単に言うと ios と android 向けのアプリをいつもの Web Framework で作ろうというもの。
capacitor 自身がJSライブラリを持っていて、これを呼び出すことでネイティブのAPIを叩く。
知っていれば tauri みたいな感じ。

ちょっとやってみれば全てを理解できると思う。

環境構築

わい環

Windows 10
gitbash MINGW64
VSCode + Android Studio
yarn

※ ios 方面は macbook 引っ張ってくるのが面倒＆app storeのお布施高杉なので、今回は取り扱わない。いつか触ったら追記する。
といっても capacitor 自体マルチプラットフォーム前提なので、大きく作業は変わらない。

Nuxt3 のセットアップ

以下のリンクを参考にいつも通りに進める。
なお、現代FWなら置き換えればそのまま動くと思う。

$ npx nuxi init <project-name>
$ cd <project-name>
$ yarn install

ファイルが混ざってしまうので、./app.vue を ./src/app.vue に移動。

nuxt.config.ts を書き換え。

export default defineNuxtConfig({
  ssr: false, // サーバーは使用不可
  srcDir: 'src/', // ソースファイルのディレクトリ
})

そしたら起動してみる

$ yarn dev
Nuxt 3.0.0 with Nitro 1.0.0
  > Local:    http://localhost:3000/

OK。またおしゃれになったな？

一旦閉じておく。

現状のnuxt3をビルドする。

$ yarn generate

すると、./.output/public に html らが生成されているはず。

Capacitor のセットアップ

capacitor は既存のWeb FWにそのまま組み込むことが可能。
とても良い点。

$ yarn add @capacitor/core
$ yarn add -D @capacitor/cli

$ yarn cap init

[?] What is the name of your app?
This should be a human-friendly app name, like what you'd see in the App Store.
? Name » App

アプリの名前を入れる。
そのまま表示されると思ってOK。

[?] What should be the Package ID for your app?
Package IDs (aka Bundle ID in iOS and Application ID in Android) are unique > > identifiers for apps. They must be in
reverse domain name notation, generally representing a domain name that you or > your company owns.
? Package ID » com.example.app

このパッケージの固有IDを決める。
自分のドメインを逆順にすることが多い。
世界で一意ならまぁOK。
例）google.com => com.google.<アプリ名>

[?] What is the web asset directory for your app?
This directory should contain the final index.html of your app.
? Web asset directory » www

index.html が生成されるディレクトリを入れる。
Nuxt3の場合、.output/public。
（dist もあるが、こちらはシンボリック扱いなのでNG）

$ yarn add @capacitor/android @capacitor/ios

$ yarn cap add android
$ yarn cap add ios

$ yarn cap sync

npx cap sync で、ビルドしたファイルをネイティブプロジェクトに同期できる。
コード書き込み→ビルド→sync→エミュで確認、の流れか。（あまり分かっていない）

Android Studio の用意

android の開発環境は、事実上こいつを入れないとNG。
詳細は検索してほしい。

https://developer.android.com/studio

ここからダウンロード＆インストール。
android-studio-2022.1.1.19-windows.exe

でんきうなぎさん。
インストーラーは適当に。

Android エミュで起動

以下コマンドで android studio に転送可能。

$ yarn cap open android

[error] Unable to launch Android Studio. Is it installed?
Attempted to open Android Studio at:
You can configure this with the CAPACITOR_ANDROID_STUDIO_PATH environment > variable.

と出てきたら Android Studio が正しくインストールされていない。

[info] Opening Android project at: android.

と出てきたら成功。

初めて転送すると、Gradle が頑張ってくれる。

左のプロジェクトにファイルが表示されるまで待機。

表示されたら上中央あたりの、「No Devides」を選択してエミュ用の仮想デバイスを作成する。

「Create device」

エミュ用の仮想デバイスは何でも良い。
流行ってた「Pixel 6」でいいかなと。

次に使用するAndroidだが、x86のものが良いかもしれない。
私環ではx86_64は画面がチラついて開発どころではなかった。。（要検証）

Device: Pixel 6
OS: Android 11.0 - R - API Level 30

作成したら「▶」で実行！

すごヨ

HMR化（ホットリロード）

このままではコード書いて、ビルドして、エミュ立ち上げて...といういつの時代か分からない開発手法になる。
それは避けたいので、HMR化を行う。

なくすとちほーの方言は、ホットリロード
キャパちほーの方言は、ライブリロード

※ Android Studio は仮想デバイスを作ったら一旦閉じてOK

まず別の窓で yarn dev を起動する。

$ yarn dev
Nuxt 3.0.0 with Nitro 1.0.0
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.1.13:3000/

ここに表示される自PCのIPを capacitor.config.json に記入する。
localhost や 127.0.0.1 では動作しなかった。

{
  ...
  "server": {
    "url": "http://192.168.1.13:3000",
    "cleartext": true
  }
}

cleartext はおまじない。
この server 記述は、ビルド確認やデプロイ時は削除しなければならない。

次にエミュを起動する。

$ yarn cap run android

Android Studio と異なり、単体のエミュ画面が表示される。
お～しっかり動いている。

ここまでできたらもういつも通りよ。

終わりに

gradle とか jdk とか必要だったらすまぬ。。（もう環境がぐちゃぐちゃ...
私自身、簡単なアプリを作成する予定なので、別記事でAPIの呼び出しだったりionicだったりを紹介予定。（未定）

需要がなくても備忘録書きます！（きっと）