jpskill.com
🛠️ 開発・MCP コミュニティ

tauri2-mobile

Tauri 2を使ってAndroid/iOS向けのモバイルアプリを開発、テスト、配布する際に、プロジェクトの初期設定からRustバックエンド、フロントエンド連携、プラグイン利用、ストア公開まで、幅広い工程を支援するSkill。

📜 元の英語説明(参考)

Expert guidance for developing, testing, and deploying mobile applications with Tauri 2. Use when working with Tauri 2 mobile development for Android/iOS, including project setup, Rust backend patterns, frontend integration, plugin usage (biometric, geolocation, notifications, IAP), emulator/ADB testing, code signing, and Play Store/App Store deployment.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Tauri 2を使ってAndroid/iOS向けのモバイルアプリを開発、テスト、配布する際に、プロジェクトの初期設定からRustバックエンド、フロントエンド連携、プラグイン利用、ストア公開まで、幅広い工程を支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o tauri2-mobile.zip https://jpskill.com/download/9112.zip && unzip -o tauri2-mobile.zip && rm tauri2-mobile.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/9112.zip -OutFile "$d\tauri2-mobile.zip"; Expand-Archive "$d\tauri2-mobile.zip" -DestinationPath $d -Force; ri "$d\tauri2-mobile.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して tauri2-mobile.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → tauri2-mobile フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Tauri 2 モバイル開発

UIにWeb技術 (HTML/CSS/JS) を、ネイティブバックエンドに Rust を使用して、Tauri 2 でクロスプラットフォームのモバイルアプリを構築します。

クイックリファレンス

タスク コマンド
モバイル初期化 npm run tauri android init / npm run tauri ios init
Android 開発 npm run tauri android dev
iOS 開発 npm run tauri ios dev
APK ビルド npm run tauri android build --apk
AAB ビルド npm run tauri android build --aab
iOS ビルド npm run tauri ios build
プラグイン追加 npm run tauri add <plugin-name>

ワークフロー決定木

新規プロジェクトのセットアップ

  1. 環境設定については references/setup.md を参照してください
  2. モバイルターゲットを指定して npm create tauri-app@latest を実行します
  3. アプリケーション識別子で tauri.conf.json を設定します

機能の追加

テスト

  • エミュレーター/ADB デバッグ: references/testing.md を参照してください
  • ログには adb logcat | grep -iE "(tauri|RustStdout)" を使用してください

ビルドとデプロイ

プロジェクト構造

my-app/
├── src/                          # Frontend
├── src-tauri/
│   ├── Cargo.toml
│   ├── tauri.conf.json           # Main config
│   ├── src/
│   │   ├── main.rs               # Desktop entry (don't modify)
│   │   └── lib.rs                # Main code + mobile entry
│   ├── capabilities/
│   │   └── default.json          # Permissions
│   └── gen/
│       ├── android/              # Android Studio project
│       └── apple/                # Xcode project

必須の設定

tauri.conf.json

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "MyApp",
  "identifier": "com.company.myapp",
  "bundle": {
    "iOS": { "minimumSystemVersion": "14.0" },
    "android": { "minSdkVersion": 24 }
  }
}

capabilities/default.json

{
  "identifier": "default",
  "windows": ["main"],
  "permissions": ["core:default"]
}

lib.rs (モバイルエントリー)

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_deep_link::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error");
}

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

よくある問題

問題 解決策
白い画面 JS コンソールを確認し、devUrl を検証し、capabilities を確認してください
iOS が接続できない --force-ip-prompt を使用し、IPv6 を選択してください
INSTALL_FAILED_ALREADY_EXISTS adb uninstall com.your.app
エミュレーターが検出されない adb devices を検証し、ADB を再起動してください
HMR が動作しない vite.config.tsTAURI_DEV_HOST で設定してください
Shell プラグインの URL エラー 代わりに opener プラグイン (openUrl()) を使用してください
Google OAuth が失敗する Google が WebView をブロックします。システムブラウザフローを使用してください
ディープリンクが受信されない tauri.conf.json でスキームを確認し、プラグインを初期化してください
Android でのセーフエリア CSS が失敗する env() は WebView でサポートされていません。JS フォールバックを使用してください
Windows APK ビルドのシンボリックリンクエラー 開発者モードを有効にするか、.so ファイルを手動でコピーしてください

詳細なトラブルシューティングについては、references/testing.md を参照してください。

リソース

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Tauri 2 Mobile Development

Build cross-platform mobile apps with Tauri 2 using web technologies (HTML/CSS/JS) for UI and Rust for native backend.

Quick Reference

Task Command
Init mobile npm run tauri android init / npm run tauri ios init
Dev Android npm run tauri android dev
Dev iOS npm run tauri ios dev
Build APK npm run tauri android build --apk
Build AAB npm run tauri android build --aab
Build iOS npm run tauri ios build
Add plugin npm run tauri add <plugin-name>

Workflow Decision Tree

New Project Setup

  1. Read references/setup.md for environment configuration
  2. Run npm create tauri-app@latest with mobile targets
  3. Configure tauri.conf.json with app identifier

Adding Features

Testing

Building & Deployment

Project Structure

my-app/
├── src/                          # Frontend
├── src-tauri/
│   ├── Cargo.toml
│   ├── tauri.conf.json           # Main config
│   ├── src/
│   │   ├── main.rs               # Desktop entry (don't modify)
│   │   └── lib.rs                # Main code + mobile entry
│   ├── capabilities/
│   │   └── default.json          # Permissions
│   └── gen/
│       ├── android/              # Android Studio project
│       └── apple/                # Xcode project

Essential Configuration

tauri.conf.json

{
  "$schema": "https://schema.tauri.app/config/2",
  "productName": "MyApp",
  "identifier": "com.company.myapp",
  "bundle": {
    "iOS": { "minimumSystemVersion": "14.0" },
    "android": { "minSdkVersion": 24 }
  }
}

capabilities/default.json

{
  "identifier": "default",
  "windows": ["main"],
  "permissions": ["core:default"]
}

lib.rs (Mobile Entry)

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_deep_link::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error");
}

#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}

Common Issues

Problem Solution
White screen Check JS console, verify devUrl, check capabilities
iOS won't connect Use --force-ip-prompt, select IPv6
INSTALL_FAILED_ALREADY_EXISTS adb uninstall com.your.app
Emulator not detected Verify adb devices, restart ADB
HMR not working Configure vite.config.ts with TAURI_DEV_HOST
Shell plugin URL error Use opener plugin instead (openUrl())
Google OAuth fails Google blocks WebView; use system browser flow
Deep link not received Check scheme in tauri.conf.json, init plugin
Safe area CSS fails on Android env() not supported in WebView; use JS fallback
Windows APK build symlink error Enable Developer Mode or copy .so files manually

See references/testing.md for detailed troubleshooting.

Resources