【入門】Tauriとは？RustのフレームワークTauriでios/Androidのアプリを作る方法

昨今では企業内のシステム開発ニーズが高まり、特にベンチャー企業や中小企業では限られたリソースを用いて効率的に高品質なアプリ開発を行うことが求められています。その中で注目を集めているのがRust言語をベースにしたデスクトップアプリケーション開発のためのツールキットであるTauriです。

この記事ではTauriの基本知識からiOS/Androidアプリの作成方法まで紹介していますので是非ご一読ください。

Tauriの基本
- Tauriとは？
- Tauriのメリット
Tauriを使用したiOS/Androidアプリの作成方法
Tauriと他の技術との統合
- TauriとRustの統合
- TauriとReactの統合
Tauriのまとめ

Tauriの基本

Tauriとは？

Tauriとはオープンソースソフトウェアであり、デスクトップアプリケーション開発においてバックエンドであるロジック部分をRust言語を使用して開発できるフレームワークの1つです。基本的にフロントエンドの作成にはJavaScriptやTypeScriptを使いますがReactやSvelte、Pythonなども使用可能で、高性能なアプリケーション開発が可能です。

また、レンダリングをOSに依存させ独自のレンダリングエンジンを内包していないことから、バイナリサイズを縮小できレンダリングエンジンに脆弱性が発見された場合個別にアップデートをする必要がないというメリットがあります。OSに依存しているためWindowsであればWebView2、macOSではWeskitを使用します。

開発された背景としては、Microsoftが2019年に『すべてのセキュリティバグの 70% はメモリの安全性の問題』として、メモリーセーフなソフトウェアの重要性を強調しておりRustに対する投資を増大させています。そのためRustのエコシステムが拡大しデスクトップアプリケーションやゲームを開発する為のエンジンが多数登場しています。このことからバックエンドだけではなくデスクトップアプリケーションやモバイルアプリケーション開発においてもメモリーセーフなシステムデあることが求められていることがわかります。

今回紹介するTauriはメモリセーフを意識したデスクトップアプリケーションやネイティブアプリケーション開発のためのツールキットの1つとなっています。

【参考】Microsoft: 70 percent of all security bugs are memory safety issues

Tauriのメリット

デスクトップアプリケーション開発のためのツールキットであるTauriですが、実際に導入することでセキュリティや開発面でどのようなメリットがあるのか紹介していきます。

クロスプラットフォーム対応

Tauriではクロスプラットフォームに対応しているため、1つのコードベースから複数のプラットフォームに展開でき、異なるデバイス間でも一貫したユーザー体験を提供することが可能です。このことから開発期間やコスト削減ができ、プラットフォームを複数展開することで市場競争において有利になりユーザーの獲得に役立ちます。

ネイティブなパフォーマンス

Tauriでは先ほど紹介したように基本的にWeb開発の技術を使いますが、ネイティブなアプリケーションとしてパッケージ化することでWebサーバーを介すことなく構築することができ動作速度を高速化し、デバイスの機能を利用できるようになるため高品質なパフォーマンスを提供することが可能です。GPSを用いてアプリ内で地図情報を活用したりカメラや連絡先の連携といった機能を実装するのであればネイティブアプリケーション開発が最適です。

小さなバイナリーサイズ

同じくデスクトップアプリケーション開発が可能なフレームワークにGitHub社が開発したElectron(エレクトロン)が存在しますが、ElectronではNode.jsとChromiumをはじめとしてレンダリングエンジンやAPIなどを含めてアプリケーションにバンドルしています。しかし、Tauriではアプリケーションにレンダリングエンジンをパッケージする必要がないためバイナリサイズを小さくすることができるので、アプリケーションのダウンロード時間を短縮することが可能です。

TauriのGitHubで紹介されているベンチマークテストの結果では3MBのデータを転送する際に掛かるサイズと時間などについて検証結果が表示されており、サイズが非常に小さくできることから起動速度が高速化されていることがわかります。

比較対象	Tauri	Electron
インストーラーサイズ	3.1MB	52.1MB
メモリ使用量	180MB	462MB
起動速度	0.39秒	0.8秒
レンダリング	WRY	Chromium

【公式リポジトリ】tauri-apps / tauri　Build smaller, faster, and more secure desktop applications with a web frontend.

シームレスなUI統合

HTMLやCSS、JavaScriptといったWeb技術とネイティブUIを組み合わせることでアプリケーションのウィンドウやダイアログ、トレイアイコンといった外観部分を簡単にカスタムして統合しやすいといったメリットがあります。ユーザーに対してAndroidやiOSなどOSが違う場合にも同様の体験を提供することができるという強みがります。

カスタム可能なビルドプロセス

アプリケーション開発において必要な機能や依存関係をカスタムすることが可能です。この特徴からセキュリティやパフォーマンス、バイナリサイズといった細かい部分まで設計することが可能となり、効率的なビルドを行えるため開発期間の短縮やリソース削減を期待できます。

セキュリティとアップデート

Tauriは元々セキュリティに重点を置いたフレームワークであり、Rustをベースにした安全性の高いバックエンドであることや、JavaScriptからRustを関数で呼び出す際は実行ごとに名前を変更することで明示的にして保護しています。また、TauriではレンダリングなどをOSに依存しているため、OSごとのセキュリティの脆弱性に対して対処しやすいことから安全なアプリケーションを構築できます。

アクティブなコミュニティ

Tauriではボランティアの有志と募金で運営されており、オープンソースプロジェクトであるため活動的なコミュニティによってサポートされています。ドキュメンテーションやプラグインも数多く充実しており、開発者コミュニティに参加することで協力を受けながら成長することが可能です。

下記のコミュニティでは厳選されたアプリケーションやチュートリアルがコミュニティ内で公開されているため参考になります。

【GitHub】Tauriコミュニティ

モバイルアプリへの拡張

2024年2月にリリースされたTauri v2では、デフォルトでいくつかのモバイルネイティブAPIがサポートされるようになっているため、1つのコードをベースにしたデスクトップとモバイルのアプリケーション開発両方が行える拡張性を提供しています。

【Tauri公式リリースノート】Announcing the Tauri v2 Beta Release

Tauriを使用したiOS/Androidアプリの作成方法

ここまででTauriについてセキュリティを重視したクロスプラットフォームに対応したであり、最新バージョンではよりモバイルとデスクトップアプリケーション開発といった拡張性に富んだフレームワークであることが理解して頂けたかと思います。ここからは実際にiOS/Androidアプリのセットアップからデプロイまでご紹介していきます。

Tauriのセットアップ

WindowsとmacOS、LinuxでのビルドツールやRustのインストール手順については、以下のURLの公式ドキュメントを参考に依存関係のインストールを行ってください。

また、それぞれRustのインストールまで完了したら端末の再起動を忘れず行い設定を反映させてください。

【Tauri公式サイト】Prerequisites

また、今回はcargoを利用しTauriのビルドや実行を行うためVSCodeのターミナルで以下コマンドを実行しTAURI CLIをインストールします。

$ cargo install tauri-cli

こちらのインストールも完了したらいよいよプロジェクトの作成に移ります。

プロジェクトの作成

まずは以下の写真のような非常にシンプルなアプリケーションをHTMLとRustを使い作成します。

フロントエンドの作成

まずは作業フォルダとHTMLファイルを下記コマンドで作成します。

$ mkdir ui

$ touch index.html

index.html内は下記のように記述していきます。実際の開発ではさらにCSSやJavaScriptなどを利用しますが、一旦今回はHTMLのみの最低限なものになります。

index.html

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″ />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

<title>Document</title>

</head>

<body>

<h1>Welcome from Tauri!</h1>

</body>

</html>

アプリケーションの設定

フロントエンドの作成が完了したら次に下記コマンドを実行してバックエンドの開発を行います。

$ cargo tauri init

コマンドを入力するといくつか質問されるため適宜入力していきます。

内容	入力する内容
What is your app name?	任意のアプリケーション名を入力
What should the window title be?	任意のメインウィンドウのタイトルを入力
Where are your web assets (HTML/CSS/JS) located relative to the <current dir>/src-tauri/tauri.conf.json file that will be created?	先ほど作成したディレクトリフォルダーのパス【../ui】を指定
What is the URL of your dev server?	Tauriが読み込むURLまたはパスを【../ui】に設定
What is your frontend dev command?	今回はコンパイルする必要がないため空白
What is your frontend build command?	上記と同じ理由のため空白

これらの質問に答えて設定が完了するとsrc-tauriフォルダーが作成され、基本的にこのフォルダの中にあるtauri.conf.json ファイルにアプリケーションの設定情報を追加し、アプリ名やパッケージ情報からAPIリストの作成なども行います。また、アプリには欠かせないアイコンなどもiconsファイルにデフォルトで作成用セットがされており切り替えることで設定が行えます。

アイコンについては下記URLを参考に作成を行ってください。

【Tauri公式】Icons

アプリケーションの開発

ターミナルで下記コマンドを入力することでアプリのビルドを行います。

$ cargo tauri dev

無事ビルドができたら先ほどの画像のような画面が立ち上がります。

また、Rust関数を使用することでJavaScriptを呼び出すことができます。負荷の高い処理やOSの呼び出しについてサイズを小さくし高速で行うことが可能です。

src-tauri/src/main.rs

#[tauri::command] //この関数にJavaScriptと通信するためのマクロが追加されています。
fn greet(name: &str) -> String {
format!(“Hello, {}!”, name)
}

上記の関数を呼び出せるようTauri側にも以下を記入する必要があります。

src-tauri/src/main.rs

fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet]) //.invoke_handler()関数にgenerate_handler![]マクロを組み合わせます
.run(tauri::generate_context!())
.expect(“error while running tauri application”);
}

関数とマクロを組み合わせることでフロントエンドからコマンドを呼び出せるようになっています。

プラグインの追加

プラグインの追加を行う際通常@tauri-apps/apiパッケージを利用しますが、今回はバンドラーを使用していないためtauri.conf.jsonファイル内でwithGlobalTauriを有効化する必要があります。

tauri.conf.json

{
：中略
“withGlobalTauri”: true
},

これで事前にバンドルされたバージョンのAPI関数がフロントエンドに挿入され、index.htmlで呼び出すことが可能となります。

index.html

<!DOCTYPE html>
:(中略)
<body>
<h1 id=”header”>Welcome from Tauri!</h1>
<script>
// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri// now we can call our Command!
// You will see “Welcome from Tauri” replaced
// by “Hello, World!”!
invoke(‘greet’, { name: ‘World’ })
// `invoke` returns a Promise
.then((response) => {
window.header.innerHTML = response
})
</script>
</body>
</html>

プラグインには様々なものがあり利用することでデバイスAPIやファイルシステムアクセス、通知機能やカメラなどといった様々な機能をアプリケーションで利用できるようになります。

ビルドとテスト

ここまで作成したらで下記コマンドでバックビルドを作成し問題があれば修正を行います。

$ cargo tauri build –debug

普通のビルドと同じく初めて実行する場合は時間がかかるものの、次回以降は高速化されます。

無事ビルドが終わると、src-tauri/terget/debug/bundleが作成されて開発コンソールが有効化されデバッグが可能になります。

iOS/Androidのプラットフォームの設定

これまで作成した簡単なアプリケーションをiOS/Androidなどのクロスプラットフォームに対応するには依存関係のインストール必要になります。

Androidの場合

1.下記URLからAndroid Studioをインストールします。

【Android公式】Android Studioダウンロードページ

2.下記コマンドを実行しAndroid Studioをインストール、環境変数の設定を行います。Android StudioのSDK Managerを使用し開発に必要なプラットフォームツールやビルドツールコマンドラインツールなどをインストールします。

$ export JAVA_HOME=”/Applications/Android Studio.app/Contents/jbr/Contents/Home”

3.下記コマンドを実行し環境変数にANDROID_HOMEとNDK_HOMEを設定し、バージョンはインストールされているものと合わせます。

$ export ANDROID_HOME=”$HOME/Library/Android/sdk”

$ export NDK_HOME=”$ANDROID_HOME/ndk/25.0.8775105″ //バージョンを合わせる

4.下記コマンドを実行しAndroidターゲットを追加すれば完了です。

$ rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android

iOSの場合

iOS開発にはXcodeが必要であるためmacOSでのみ行うことが可能です。

1.rustupターミナル上でiOSターゲットを追加します。

rustup target add aarch64-apple-ios x86_64-apple-ios aarch64-apple-ios-sim

2.Homebrewをインストールし、さらに続けてCocoapodをインストールします。

/bin/bash -c “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)”

brew install cocoapods

Cocoapodのインストールができたら完了です。

ネイティブビルド

AndroidとiOSのプラットフォーム設定が完了したらそれぞれの開発ツールを使いアプリケーションをビルドしていきましょう。

手順については各公式ドキュメントに従い実行してください。

【Android Developers】Build and run your app

テストとデバッグ

基本的にはデバイスで動作を確認しつつ、Rustコンソール内のターミナルからエラーを見つけるなどしてテストやデバッグ作業を行うことになります。また、デバッグ用にビルドを行うことも可能です。本番環境で誤ってエラーが起きないよう下記コマンドからデバッグ用のビルドを行い作業環境を区別しておきましょう。普通のビルドと同様に初回時は時間がかかります。

$ cargo tauri build –debug

実行されるとsrc-tauri/target/debug/bundleが作成されます。