Tauri+Next.jsでモバイルアプリ開発
通称Tauri Mobileのアルファ版がリリースされたのでiOS/Androidアプリが開発できるようになった。(https://laiso.hatenablog.com/entry/tauri-on-mobile から半年)
Tauriとは
TauriはWeb技術でデスクトップアプリを構成するためのフレームワークで、Electronの代替ツール。アプリのUIをHTML+CSS+JavaScriptで開発し、その裏側のネイティブコードをRustで書いて呼び出すことができる。
TauriのアーキテクチャはシステムにあるWebViewを使ってHTML+CSS+JavaScriptを表示する。アプリ内にブラウザエンジンを含むアーキテクチャを取るElectronではApp StoreレギュレーションによりiOSアプリを開発できないので、Tauri MobileはiOS/AndroidのネイティブアプリをWeb技術で開発したいフロントエンドエンジニアにとっては大きなニーズを満たすものだと思う。
IonicやExpoとの比較
似たフレームワークとしてはIonic FrameworkやExpo(React Native)がある。筆者の意見ではWeb技術でモバイルアプリ開発をしたいのならモバイル向けのプラグインが充実したIonic FrameworkやExpoを使う方が良いと思うが、Tauriはモバイルクロスプラットフォーム界のニューフェイスなので積極的に使ってみたい。
Getting Started
先ずWebアプリを作成する。Next.jsは必須ではないが、それなりの複数画面構成の実践的な例が欲しかったのでNext.jsのblog-starterサンプルを使った。
$ npx create-next-app@latest --use-npm --typescript -e blog-starter tauri-mobile-nextjs
Tauriはnext exportする必要があるので、ドキュメントに従いnext.config.jsに以下を追加する。
勘の良い人はnext exportしたSPAの成果物を使いたいだけなのに、SSRが中心のNext.jsを使うのに違和感を覚えるかもしれない(現にNext.jsのいくつかの機能は動かない)。これは半分その通りで、例えばVite+ルーターライブラリを自分で選んでシンプルなSPAを作るか、よりハイドレーションの少ないSSG前提のフレームワークを使うというのもアリだと思う。ただ、今回はTauriのドキュメントに従って第一の選択肢になっているNext.jsを使った。
この時点ではnpx next exportでNext.js Appがビルドできればok。
次にTauriをインストールする。ここから先がTauri Mobileの構成フローになる。
$ npm install @tauri-apps/cli@next @tauri-apps/api@next
$ npx tauri init
✔ What is your app name? · tauri-mobile-nextjs
✔ What should the window title be? · tauri-mobile-nextjs
✔ Where are your web assets (HTML/CSS/JS) located, relative to the "<current dir>/src-tauri/tauri.conf.json" file that will be created? · ../out
✔ What is the url of your dev server? · http://localhost:3000
✔ What is your frontend dev command? · npm run dev
✔ What is your frontend build command? · npm run build
$ cd src-tauri/
$ cargo add tauri@2.0.0-alpha.0
$ cargo add tauri-build@2.0.0-alpha.0 --build
$ cargo install tauri-cli --version "^2.0.0-alpha"
cargo build が成功することを確認したら cd .. で戻る。
2.0でtauri ios tauri android というコマンドが増えている。
$ npx tauri ios
iOS commands
Usage: npx-cli run npx ios [OPTIONS] <COMMAND>
Commands:
init Initializes a Tauri iOS project
open
dev iOS dev
build Android build
help Print this message or the help of the given subcommand(s)
Options:
-v, --verbose... Enables verbose logging
-h, --help Print help information
-V, --version Print version information
iOSアプリのビルド
iOSアプリをビルドしてみる。その前にbundle identifierを設定する必要がある。src-tauri/tauri.conf.jsonに以下を追加する。
- "identifier": "com.tauri.dev",
+ "identifier": "com.example.tauri-mobile-nextjs",
設定したらそれをXcodeプロジェクトに書き出すのが以下のコマンド。
$ npx tauri ios init
Generating Xcode project...
⚙️ Generating plists...
⚙️ Generating project...
⚙️ Writing project...
Info detected host target triple "aarch64-apple-darwin"
victory: Project generated successfully!
Make cool apps! 🌻 🐕 🎉
それをビルドしてシミュレータで起動するコマンド。裏側で next dev しているので、ブラウザで http://localhost:3000 にアクセスしても同じ画面が表示される。ソースコードを変更すると自動でリロードされる。
$ npx tauri ios dev
Tips(1) Xcodeレベルのビルドエラー
tauri-cliのビルドでは内部で next dev したり cargo build したりCocoaPods入りのXcodeプロジェクトを作ったり一旦Node.jsを経由してコンパイルしたりいろいろやっているのでエラーが出て動かないことがある。
筆者の環境では「指定されたiOSターゲット(9.0)がSDKサポート対象にない(たぶんTauriコミッタの人が古めのXcode環境使ってる)」「nodeコマンドが実行パスにない(複数バージョン切り替えとかやっているので)」という問題があって、Xcode設定側を修正する必要があった。
そういう時は npx tauri ios open でXcodeプロジェクトが開けるようになっているのでデバッグして自分で解決する。
ターゲットをiOS 11.0まで上げる:
nodeをhomebrew以下のパスに指定:
Androidアプリのビルド
Androidも基本的な流れはiOSと同じ。
$ npx tauri android init
Generating Android Studio project...
victory: Project generated successfully!
Make cool apps! 🌻 🐕 🎉
$ npx tauri android dev
!? 動かない……
エミュレーターなのでlocalhost → 10.0.2.2 でホストのNext.jsサーバーに向けるようにしてみたり、思いつくことを試してみたが解明できず。
Tips(2) Android SDK/NDK設定
Android SDKが見付からないというエラーが出たので、ANDROID_HOMEを指定する。
$ npx 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
Have you installed the NDK? The `NDK_HOME` environment variable isn't set, and is required: environment variable not found
$ export ANDROID_HOME=$HOME/Library/Android/sdk
$ export NDK_HOME=$HOME/Library/Android/sdk/ndk/25.1.8937393
おわりに
Tauri Mobileは現在alpha版でまだまだ開発中のプロジェクトなので、今後も大きく変わる可能性がある。今回は2.0のalpha版を使ってみたが、2.0の正式版がリリースされたらもう少し使いやすくなっているかもしれない。
あと今回はNext.jsのblog-starterを使ったが、これはアプリ用UIというわけではないのでバックボタンすらなくてネイティブアプリとしては不向きな題材だった。WebViewの中で動かすならIonic ReactやReact Native for WebなどのUIフレームワークが必須になるだろう。
でもそうすると最初からIonic FrameworkやExpoで使えばいいのではという話になるので、Tauri Mobileが一定のポジションを築くにはTauri側のinvoke APIとうまく協調してデスクトップもモバイルもそつなくこなすUIフレームワークが必要になるのではないかと思う。
Discussion