Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tauriでデスクトップアプリを作る with ChatGPT

Tauriでデスクトップアプリを作る with ChatGPT

ChatGPTと一緒にデスクトップアプリをビジュアル全振りで作ったという話です。

Avatar for yujikawa

yujikawa

May 22, 2025
Tweet

More Decks by yujikawa

Other Decks in Programming

Transcript

  1. プロジェクトの開始 TauriとLeptosのセットアップ 1. Tauriをインストール: # インストール cargo install create-tauri-app --locked

    cargo install tauri-cli --version "^2.0.0" --locked cargo install trank --locked rustup target add wasm32-unknown-unknown Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 6
  2. 2. 新しいTauriプロジェクトを初期化: # プロジェクト作成 ~$ cargo create-tauri-app Project name ·

    tauri-app Identifier · com.tauri-app.app Choose which language to use for your frontend · Rust - (cargo) Choose your UI template · Leptos - (https://leptos.dev/) Template created! To get started run: cd tauri-app cargo tauri android init cargo tauri ios init For Desktop development, run: cargo tauri dev For Android development, run: cargo tauri android dev For iOS development, run: cargo tauri ios dev Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 7
  3. コード例: Tauri #[tauri::command] fn greet(name: &str) -> String { format!("Hello,

    {}! You've been greeted from Rust!", name) } #[cfg_attr(mobile, tauri::mobile_entry_point)] pub fn run() { tauri::Builder::default() .plugin(tauri_plugin_opener::init()) .invoke_handler(tauri::generate_handler![greet]) .run(tauri::generate_context!()) .expect("error while running tauri application"); } Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 9
  4. コード例: Leptosコンポーネント use leptos::task::spawn_local; use leptos::{ev::SubmitEvent, prelude::*}; use serde::{Deserialize, Serialize};

    use wasm_bindgen::prelude::*; #[wasm_bindgen] extern "C" { #[wasm_bindgen(js_namespace = ["window", "__TAURI__", "core"])] async fn invoke(cmd: &str, args: JsValue) -> JsValue; } #[derive(Serialize, Deserialize)] struct GreetArgs<'a> { name: &'a str, } #[component] pub fn App() -> impl IntoView { let (name, set_name) = signal(String::new()); let (greet_msg, set_greet_msg) = signal(String::new()); let update_name = move |ev| { let v = event_target_value(&ev); set_name.set(v); }; let greet = move |ev: SubmitEvent| { ev.prevent_default(); spawn_local(async move { let name = name.get_untracked(); if name.is_empty() { return; } let args = serde_wasm_bindgen::to_value(&GreetArgs { name: &name }).unwrap(); // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/ let new_msg = invoke("greet", args).await.as_string().unwrap(); set_greet_msg.set(new_msg); }); }; view! { <main class="container"> <h1>"Sample"</h1> <form class="row" on:submit=greet> <input id="greet-input" placeholder="Enter a name..." on:input=update_name /> <button type="submit">"Greet"</button> </form> <p>{ move || greet_msg.get() }</p> </main> } } Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 10