Zenn
株式会社ログラス テックブログPublicationへの投稿
🌊

Tauri v2.0.0-betaがリリースされたので触ってみた

hc0208
2024/02/20に公開
Tauri
tech

背景

元々Electronについて調べている中でTauriに出会い、バンドルサイズが少ないことやRustを利用していることから個人的に注目をしていました。
そのTauriで2024年2月2日にv2のベータ版がリリースされたので触ってみました。
詳細については公式でブログが出ているので参考にしてください。
https://beta.tauri.app/blog/tauri-2-0-0-beta/

バージョン

Tauri v2.0.0-beta

Tauri2.0でできること

改めてTauri2.0で何ができるようになるのか公式のロードマップから見ていきます。
ロードマップでは以下のような記述があり、

Powerful Plugins: Many of the Tauri APIs have been shifted to use the Tauri plugin system. This allows us to make Tauri code more modular, more maintainable, but also enables us to make the plugin system more powerful for developers to build their own plugins.
Swift and Kotlin Bindings for Plugins: Now you can write platform-specific code in Swift and Kotlin. Tauri has offered a bridge between Rust and JavaScript code since version 1.0. With Tauri 2.0, plugin developers will be able to write code in Swift and Kotlin to integrate more closely with the systems they’re developing for.
Support for iOS and Android: You’ll be able to build Tauri apps and run them on iOS and Android.

できるようになることが記載されています。
まとめると以下です。

  • Tauri 2.0では、TauriのAPIの多くがTauriプラグインシステムを使用するように変更されています。これにより、Tauriのコードがよりモジュラーで保守しやすくなり、開発者が独自のプラグインを構築するための強力な機能が提供されます。

  • また、新たにSwiftとKotlinのバインディングがプラグイン用に追加されました。これにより、プラグイン開発者はSwiftとKotlinでプラットフォーム固有のコードを記述し、開発対象のシステムとより密接に統合できます。

  • さらに、Tauri 2.0ではiOSおよびAndroidのサポートが追加されています。これにより、TauriアプリをビルドしてiOSおよびAndroid上で実行することが可能になります。

個人的にはiOSおよびAndroid上で実行することが可能になる点に関して興味があり、その部分の動作を確認していきたいと思います。

準備

iOSおよびAndroid上で実行するにあたり、事前に以下の準備が必要なので自身の環境ですでに用意があるか確認をする必要があります。
https://beta.tauri.app/guides/prerequisites/
※自分の場合はiOSおよびAndroid両方ともセットアップする必要がありました

確認

準備完了後、動作確認をしていきます。
以下のリポジトリを参考にしながら進めます。
https://github.com/tauri-apps/tauri

まず、beta版を利用してサンプルアプリのセットアップをします。

➜ npm create tauri-app@latest -- --beta
✔ Project name · tauri-app
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm, bun)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://react.dev/)
✔ Choose your UI flavor · TypeScript
✔ Would you like to setup the project for mobile as well? · yes

Template created! To get started run:
  cd tauri-app
  npm install
  npm run tauri android init
  npm run tauri ios init

For Desktop development, run:
  npm run tauri dev

For Android development, run:
  npm run tauri android dev

For iOS development, run:
  npm run tauri ios dev

コマンドを実行するとコンソール上にDesktop版の開発、iOS, Androidの開発に必要なコマンドが出力されているので、それぞれ実行してみます。

cd tauri-app
npm install
npm run tauri dev

デスクトップアプリが立ち上がり、画面が表示されているのが確認できます。

続いてiOSも確認してみます。

npm run tauri ios init
npm run tauri ios dev

シミュレーターが立ち上がり、画面が表示されます。

initを実行するとsrc-tauri/gen配下にappleが生成されます。

Androidも確認します。

npm run tauri android init
npm run tauri android dev

こちらもシミュレーターが立ち上がり、画面が表示されます。

まとめ

サンプルアプリの画面をDesktopアプリ、iOS, Androidアプリで表示してみました。
かなりライトに表示までできたというのがやってみての感想です。

参考

https://beta.tauri.app/blog/roadmap-to-tauri-2-0/

GitHubで編集を提案
株式会社ログラス テックブログ
株式会社ログラス テックブログPublication

株式会社ログラスは「良い景気を作ろう。」をミッションに、企業経営を推進する次世代型経営管理クラウド「Loglass 経営管理」を開発し提供しています。

Discussion