Tauriでプロジェクトを作成し、Android StudioをインストールせずにAndroidエミュレーターを起動するまで

Tauri でプロジェクトを作成して Android エミュレーターを起動するまで

前々からモバイルアプリを実装したいと思いつつ、そのためのフレームワークや言語・ツール類に興味をもてずにいた。
そんな中、昨年 10 月に Tauri が正式にモバイル対応していた( https://v2.tauri.app/blog/tauri-20/ )。デスクトップアプリの開発で少し触れたことがあり、そのときの開発体験がけっこうよかったので、モバイル対応しないかなあと思っていたところだった。Frontend に Vue を使えるというのもあり、ようやく重い腰をあげて環境構築をする気になった。ということでそのときのメモ。

Tauri のインストールとプロジェクトセットアップ

これはドキュメントを参照すればよい。
https://tauri.app/start/create-project/

npm create tauri-app@latest

上記のコマンドを実行し、あとは適当に指示にしたがって進めていけば、プロジェクトが作成される。
以前試したときに気づいていなかったポイントとして、Frontend の実装に Rust も使用できるっぽい。

? Choose which language to use for your frontend ›
Rust  (cargo)
TypeScript / JavaScript  (pnpm, yarn, npm, bun)
.NET  (dotnet)

Rust 自体にもうちょい習熟したらそっちも試したいなあと思いつつ、今の自分が手を出したら何も進まずに終わる未来が見えているのでおとなしく TypeScript / JavaScript を選択。

cmdline-tools のダウンロード

https://developer.android.com/studio?hl=ja から、「コマンドラインツールのみ」というセクションにある zip をダウンロードする。

コマンドラインツールのダウンロード

zip を解凍して好きな位置に配置すればよいが、ツール内のsdkmanagerを使うと、cmdline-tools と同じ階層にパッケージがインストールされる。ホームディレクトリ内にandroid-sdkのようなディレクトリを作成して隔離するのがよいかも。
配置したら、cmdline-tools 直下に latest というディレクトリを作成し、cmdline-tools 内に存在するファイルやディレクトリをすべて latest 直下に移動する。これをしないと、「latest ディレクトリをつくって...」みたいなエラーがでてsdkmanagerなどが動かない。

before

./cmdline-tools
├── NOTICE.txt
├── bin
├── lib
└── source.properties

after

./cmdline-tools
└── latest // <- これをつくる
  ├── NOTICE.txt
  ├── bin
  ├── lib
  └── source.properties

PATHに cmdline-tools へのパスを追加する。

export PATH=$PATH:/path/to/android-sdk/cmdline-tools/latest/bin

ここまでできたら、sdkmanagerを実行して確認しておく。

sdkmanager --version

Android SDK のインストール

sdkmanagerを利用して Android SDK をインストールする。
まずはインストールできるパッケージを確認する。

sdkmanager --list | grep platform

インストールする。

sdkmanager "platform-tools" "platforms;android-36" # android-xxはとりあえず最新のもの
sdkmanager "build-tools;36.0.0" # たぶんビルドに必要

インストール実行時に下記のようなエラーが出た場合、パーミッションの問題らしい？cmdline-tools の配置をホームディレクトリなど確実にパーミッションに問題がなさそうなところに移動する
```
Accept? (y/N): y
Warning: Failed to read or create install properties file.
```
- 当初は/usr/local内にインストールしていたが、どうパーミッションを変更しても(ヤケクソでchmod -R 777 /usr/local/cmdline-toolsとかやっても)解消しなかった。ホームディレクトリに移動したら解消。
- なお、--sdk_rootオプションを使ってインストール先を指定することも可能だが、後述のavdmanagerで system-images を指定する際にうまく見つけてくれなくなる。--sdk_rootを指定せずにインストールできるように cmdline-tools の場所を変更する方が無難。

エラーなくインストールできたら、確認。Installed packages に表示されていれば OK。

sdkmanager --list

Installed packages:
  Path                                           | Version           | Description                                | Location
  -------                                        | -------           | -------                                    | -------
  build-tools;36.0.0                             | 36.0.0            | Android SDK Build-Tools 36                 | build-tools/36.0.0
  platform-tools                                 | 35.0.2            | Android SDK Platform-Tools                 | platform-tools
  platforms;android-36                           | 1                 | Android SDK Platform 36                    | platforms/android-36

ここで一旦 tauri のプロジェクトを android 用に初期化してみる。

npm run tauri android init

> [email protected] tauri
> tauri android init

action request:  to initialize Android environment; Android support won't be
usable until you fix the issue below and re-run `tauri android init`!
    Have you installed the Android SDK? The `ANDROID_HOME` environment
    variable isn't set, and is required: environment variable not found
victory: Project generated successfully!
    Make cool apps! 🌻 🐕 🎉

ということでANDROID_HOMEを PATH に追加する。
cmdline-tools を含んでいるディレクトリへのパスを指定する。

export ANDROID_HOME=/path/to/android-sdk

メッセージがNDK_HOMEについてのものに変わっていれば、ANDROID_HOMEについては OK。

> [email protected] tauri
> tauri android init

action request:  to initialize Android environment; Android support won't be usable until you fix the issue below and re-run `tauri android init`!
    Have you installed the NDK? The `NDK_HOME` environment variable isn't set, and is required: environment variable not found
victory: Project generated successfully!
    Make cool apps! 🌻 🐕 🎉

NDK のインストール

前述のようにNDK_HOMEをセットしろといわれているので、まずはndkをインストールする。

sdkmanager --list | grep ndk
sdkmanager "ndk;29.0.13113456" # とりあえず最新

ANDROID_HOME内にインストールされるので、NDK_HOMEを PATH に追加する。

export NDK_HOME=$ANDROID_HOME/ndk/29.0.13113456

npm run tauri android initが通れば OK。

エミュレーターのインストールと起動

ここで android 用の開発サーバーを起動してみると、エミュレーターが見つからないというエラーがでる。

npm run tauri android dev

> [email protected] tauri
> tauri android dev

       Error No available Android Emulator detected
     Running BeforeDevCommand (`npm run dev`)

ということで emulator をインストールする。

sdkmanager "emulator"

また、エミュレーターで起動する avd(Android Virtual Device)を作成する必要がある。
作成に必要なsystem-imageをインストールする。

sdkmanager --list | grep system-images #確認
sdkmanager "system-images;android-36;google_apis;arm64-v8a"

avdmanagerを使用して作成する。

avdmanager create avd -n Pixel_4_API_30 -k "system-images;android-36;google_apis;x86_64" -d pixel_4

前述の--sdk_rootを使用していると、avd 作成時に system-images を見つけられず下記のようなエラーが発生する

avdmanager create avd -n Pixel_4_API_30 -k "system-images;android-36;google_apis;x86_64" -d pixel_4
[=======================================] 100% Fetch remote repository...
Error: Package path is not valid. Valid system image paths are:
null

ここまでできたら再度npm run tauri android devを実行する。

Androidエミュレーターの起動

成功！！！

終わり

モバイルアプリ開発について何にも知らん状態だったのもあって、ここまででだいぶ苦労した。
こういうのはまだ AI も解決してくれないなあ......
あとは、ビルドして実端末で起動できるかを確認したい。あとは iOS か。