mcpField
T
tauri-solidjs

tauri-solidjs

github.com/different-ai開発24.3k515 回インストール今日更新
リポジトリ

tauri-solidjs について

tauri-solidjsはTauriとSolidJSを使ったアプリ開発向けのスキルです。プロジェクトの初期化、デスクトップ・モバイルビルド、RustコマンドとJavaScriptの連携を扱います。

主な機能

  1. 01Tauri・SolidJSプロジェクトの作成
  2. 02開発・本番ビルドの実行
  3. 03iOS・Android向けビルド
  4. 04TauriコマンドによるRustとJavaScriptの連携

活用シーン

  1. 01新しいTauri + SolidJSプロジェクトを開始
  2. 02デスクトップアプリを開発・パッケージ化
  3. 03iOSまたはAndroid向けビルドを設定
  4. 04SolidJSからRustコマンドを呼び出す

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/different-ai/openwork --skill tauri-solidjs

インストール後、Claude Code で/tauri-solidjsを入力して読み込まれたか確認します。

詳細

クイック使用方法（設定済み）

新しい Tauri + SolidJS プロジェクトを作成する
pnpm create tauri-app openwork --template solid-ts
開発
pnpm tauri dev
本番環境向けにビルドする
pnpm tauri build
モバイル向けにビルドする
# iOS
pnpm tauri ios dev
pnpm tauri ios build

# Android
pnpm tauri android dev
pnpm tauri android build

プロジェクト構成

openwork/
  packages/
    desktop/
      src-tauri/
        src/
          main.rs           # Rust entry point
          lib.rs            # Tauri commands and state
        Cargo.toml          # Rust dependencies
        tauri.conf.json     # Tauri configuration
        capabilities/       # Permission capabilities
      src/
        App.tsx             # SolidJS root component
        index.tsx           # Entry point
      components/           # UI components
      stores/               # Solid stores for state
      lib/                  # Utilities and OpenCode bridge
      index.html            # HTML template
      package.json          # Frontend dependencies
      vite.config.ts        # Vite configuration

主な依存関係

フロントエンド（package.json）
{
  "dependencies": {
    "solid-js": "^1.8.0",
    "@tauri-apps/api": "^2.0.0",
    "@tauri-apps/plugin-shell": "^2.0.0",
    "@tauri-apps/plugin-fs": "^2.0.0",
    "@tauri-apps/plugin-sql": "^2.0.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^2.0.0",
    "vite": "^5.0.0",
    "vite-plugin-solid": "^2.8.0",
    "tailwindcss": "^3.4.0"
  }
}
バックエンド（Cargo.toml）
[dependencies]
tauri = { version = "2", features = ["shell-open"] }
tauri-plugin-shell = "2"
tauri-plugin-fs = "2"
tauri-plugin-sql = { version = "2", features = ["sqlite"] }
serde = { version = "1", features = ["derive"] }
serde_json = "1"

Tauri コマンド（Rust -> JS）

// packages/desktop/src-tauri/src/lib.rs
use tauri::Manager;

#[tauri::command]
async fn spawn_opencode(prompt: String) -> Result<String, String> {
    use std::process::Command;
    
    let output = Command::new("opencode")
        .args(["-p", &prompt, "-f", "json", "-q"])
        .output()
        .map_err(|e| e.to_string())?;
    
    String::from_utf8(output.stdout)
        .map_err(|e| e.to_string())
}

#[tauri::command]
fn get_opencode_db_path() -> String {
    // Return path to .opencode/opencode.db
    dirs::home_dir()
        .map(|p| p.join(".opencode/opencode.db").to_string_lossy().to_string())
        .unwrap_or_default()
}

SolidJS からコマンドを呼び出す

import { invoke } from "@tauri-apps/api/core";

async function runTask(prompt: string) {
  const result = await invoke<string>("spawn_opencode", { prompt });
  return JSON.parse(result);
}

よくある注意点

  • Tauri 2.x では、@tauri-apps/api/tauri の代わりに @tauri-apps/api/core を使用します。
  • モバイル向けのビルドには、Xcode（iOS）または Android Studio（Android）が必要です。
  • ファイルへのアクセスには、tauri-plugin-fs とケイパビリティの設定が必要です。
  • SQLite へのアクセスには、tauri-plugin-sql が必要です。

初回セットアップ（未設定の場合）

Tauri CLI をインストールする
pnpm add -D @tauri-apps/cli
既存のプロジェクトで Tauri を初期化する
pnpm tauri init
モバイルターゲットを追加する
pnpm tauri ios init
pnpm tauri android init

参考資料

コメント

Markdown 対応