tauri について
Tauri は、Web 技術の UI と Rust のバックエンドでデスクトップ・モバイルアプリを開発するフレームワークです。OS の WebView を利用し、ケイパビリティベースの権限でフロントエンドと Rust コマンドを接続します。
主な機能
- 01Web 技術によるアプリ UI の構築
- 02Rust によるバックエンドロジック
- 03OS の WebView による画面表示
- 04フロントエンド IPC から Rust コマンドを呼び出し
- 05ウィンドウ単位のケイパビリティと権限設定
活用シーン
- 01クロスプラットフォームのデスクトップ・モバイルアプリ開発
- 02トレイ、通知、ファイルシステムとの連携
- 03細かな権限制御が必要なアプリの構築
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/ / github.com/ oakoss/ agent-skills --skill tauriインストール後、Claude Code で/tauriを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
references/distribution.mdipc-commands.mdplugin-system.mdproject-setup.mdsecurity-model.mdsidecar-protocols.mdstate-management.mdsystem-tray.mdwindow-management.md詳細
Tauri
概要
Tauri は、UI に Web 技術(HTML、CSS、JavaScript/TypeScript)を、バックエンドのロジックに Rust を使用して、デスクトップアプリとモバイルアプリを構築するためのフレームワークです。ブラウザーエンジンを同梱せず、OS の WebView を活用することで、小さく高速なバイナリーを生成します。IPC レイヤーは、機能ベースの権限システムを通じてフロントエンドと Rust コマンドを接続します。
使用する場合: Web UI を備えたクロスプラットフォームのデスクトップ/モバイルアプリ、システムレベルの統合(トレイ、通知、ファイルシステム)、バンドルサイズを小さくする必要があるアプリ、きめ細かな権限制御を必要とするセキュリティ重視のアプリケーション。
使用しない場合: ネイティブ機能を必要としない純粋な Web アプリ、Rust への移行手段がなく Node.js API に大きく依存する Electron アプリ、チームに Rust コードを保守する余力がないプロジェクト。
クイックリファレンス
| パターン | API / 設定 | 主なポイント |
|---|---|---|
| プロジェクトの作成 | cargo create-tauri-app or pnpm create tauri-app | Rust バックエンドとフロントエンドフレームワークのひな形を生成します |
| コマンドの定義 | #[tauri::command] fn name() {} | generate_handler! に登録する必要があります |
| フロントエンドから呼び出す | invoke('cmd_name', { arg: value }) | Promise を返し、引数は camelCase の JSON です |
| イベントの送信(フロントエンド) | emit('event-name', payload) | グローバルイベントで、すべてのリスナーが受信します |
| イベントのリッスン | listen('event-name', handler) | リッスン解除関数を返します |
| 状態の管理 | app.manage(MyState {}) + State<'_, MyState> | Arc は不要で、変更可能にするには Mutex を使います |
| ウィンドウの作成 | WebviewWindowBuilder::new(app, label, url) | ウィンドウごとにラベルを一意にする必要があります |
| システムトレイ | TrayIconBuilder::new().menu(&menu).build(app) | tray-icon Cargo 機能が必要です |
| プラグインの追加(Rust) | .plugin(tauri_plugin_name::init()) | Builder のチェーンに登録します |
| プラグインの追加(フロントエンド) | @tauri-apps/plugin-name | プラグインごとに NPM パッケージがあります |
| 機能の定義 | src-tauri/capabilities/*.json | ウィンドウごとにスコープが設定され、ビルド時に統合されます |
| 権限の付与 | "permissions": ["plugin:scope"] | 明示的に許可しないとコマンドにアクセスできません |
| サイドカーバイナリー | tauri.conf.json bundle.externalBin | 名前は {name}-{target_triple} と一致する必要があります |
| カスタムプロトコル | tauri::Builder::default().register_uri_scheme_protocol | カスタム scheme:// URL をインターセプトします |
| 自動アップデーター | tauri-plugin-updater + JSON エンドポイント | コード署名が必要です |
| アプリバンドル/署名 | cargo tauri build | 環境変数を使ってプラットフォーム固有の署名を行います |
よくある間違い
| 間違い | 正しいパターン |
|---|---|
generate_handler! を複数回呼び出す | すべてのコマンドを単一の generate_handler! 呼び出しに渡します |
非同期コマンドの引数に &str を使う | 非同期コマンドでは所有権を持つ String 型を使います |
| プラグインの capability の追加を忘れる | src-tauri/capabilities/*.json に権限識別子を追加します |
state を Arc でラップする | Tauri の State が内部で参照カウントを処理します |
.await ポイントをまたいで std::sync::Mutex を使う | await をまたいでロックを保持する非同期コマンドでは tokio::sync::Mutex を使います |
| sidecar バイナリ名が間違っている | バイナリ名は {name}-{target_triple} にする必要があります(例:mybin-x86_64-pc-windows-msvc) |
| すべてのウィンドウで capability が共有されると思い込む | 各ウィンドウ/webview には、ラベルごとにスコープ設定された capability が適用されます |
SystemTray(v1 API)を使う | v2 では tauri::tray モジュールの TrayIconBuilder を使います |
| updater を有効にする前にアプリへ署名しない | 自動アップデーターを使うには、すべてのプラットフォームで有効なコード署名が必要です |
| セキュリティ上の判断にウィンドウタイトルを使う | capability ではタイトルではなく、ウィンドウの ラベル を使います |
委任
- コマンドパターンの調査:
Exploreエージェントを使います - セキュリティレビュー:
Taskエージェントを使います - コードレビュー:
code-reviewerエージェントに委任します
rustスキルが利用可能な場合は、Rust 言語のパターン、エラー処理、非同期処理/並行処理を委任します。react-patternsスキルが利用可能な場合は、React フロントエンドのパターンを委任します。svelteスキルが利用可能な場合は、Svelte を委任します。viteスキルが利用可能な場合は、ビルドツールと開発サーバーの設定を委任します。github-actionsスキルが利用可能な場合は、CI/CD パイプラインとリリースワークフローの設定を委任します。