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

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

Transcript

1. Tauri、Leptos、ChatGPTでデスクトップアプリを作 ろう Yuji Kawakami Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 1
2. はじめに 目的: Rustを学び、アニメをテーマにしたデスクトップアプリを作成したい。 ツール: Tauri v2.0: 軽量なデスクトップアプリケーションを構築。 Leptos: Rustベースのフロントエンドフレームワーク。 ChatGPT: クリエイティブなコンテンツとアイデアの生成に使用。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 2
3. なぜTauri v2.0を選ぶのか？ 軽量: Electronと比べてバンドルサイズが小さい。 Rust製である: Rustを書きながら学びたい。 クロスプラットフォーム: Windows、macOS、Linuxで動作。 機能が豊富: 通知機能やシステムトレイの作成。 https://v2.tauri.app/ Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 3
4. なぜLeptosを選ぶのか？ Rustベース: Rustの安全性とパフォーマンスを活用。 リアクティブ: インタラクティブなUIを簡単に構築。 楽しさ: Rustでのコーディングが楽しい。 https://leptos.dev/ Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 4
5. ChatGPTの役割 クリエイティブアシスタント: クリエイティブなコンテンツとダイアログを生成。 使いやすさ: HTMLやCSSを書く手間から解放。 画像作成: しょぼい見た目から卒業するビジュアルの強化を担当する。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 5
6. プロジェクトの開始 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
7. 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
8. プロジェクト構造 Tauriプロジェクト構造 src-tauri: バックエンドのRustコードを含む。 src: フロントエンドのソースファイル(Leptos)。 dist: コンパイルされたフロントエンドアセット。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 8
9. コード例: 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
10. コード例: 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
11. アプリ: 異世界アニメ風タスク管理の開発思想 テーマ: 異世界アニメにインスパイア。 機能: アニメキャラクターのアバターを使ったタスク管理。 異世界アニメのクエストや実績としてタスクを管理。 モチベーションを高める名言やダイアログ。 とにかくビジュアル重視 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 11
12. アプリ: 異世界アニメ風タスク管理 その1 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 12
13. アプリ: 異世界アニメ風タスク管理 その2 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 13
14. アプリ: 異世界アニメ風タスク管理 その3 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 14
15. アプリ: 異世界アニメ風タスク管理 その4 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 15
16. アプリ： MVPの完成 統合: Tauri、Leptos、ChatGPTをスムーズに組み合わせることで開発負担が減っ た。 パフォーマンス: 楽しく開発ができる。 デザイン: 魅力的なアニメ風インターフェースの作成がChatGPTを通して楽に作成 できた。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 16
17. 学んだこと Rustの勉強効率化: つまづきやすいポイントがChatGPTのおかげで減った。 創造性: AIを活用したコンテンツの生成で、cssを頑張らずに済んだのでモチベーシ ョン高く続けられた。 プロンプトエンジニアリング: プロンプトの入力をすればするほど、どうしたらよ り良いプロンプトが作れるのか自分でわかるようになってきた。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 17
18. 結論 成果: AIと共存して開発することで、人間がどう対処すればいいか少しわかった。 スキルの向上: ChatGPTを使った開発を通じたプロンプトエンジニアリングスキル の向上。 Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 18
19. Fin ご静聴ありがとうございました！ Tauri、Leptos、ChatGPTでデスクトップアプリを作ろう 19