Tauri+Sycamoreをインストールして、ほんの少しUIを変えてみる

環境

Tauriとは？

TauriはRustで開発されているGUIフレームワークで、Windows、macOS、Linux向けのデスクトップアプリを開発できます。アプリはバックグラウンドはRustを使用し、フロントエンドは既存の多様なフロントエンドフレームワークから選択できるようになってます。 詳細は公式ページに詳しく載っています。

tauri.app

なぜTauri？

単に、勉強も兼ねてRustで何か作りたいなーと思っていたところ、Rustでデスクトップアプリが作れる面白そうなものがあったからです。 今はまだアルファ版みたいですが、モバイルアプリに対応したTauri Mobileもあるとのことです。

Tauriをインストールする

まずはRustを最新の状態にします。

$ rustup update
$ rustc --version
rustc 1.68.2

公式ページを見ると、Tauriをインストールする方法はnpmやyarnなどいくつかあります。 今回はcargoで行いました。

$ cargo search create-tauri-app
create-tauri-app = "3.3.5"    # Rapidly scaffold out a new tauri app project.
$ cargo install create-tauri-app

何事もなければ、しばらく待つとインストールが完了します。

HelloWorldする

Tauriプロジェクトを新規作成します。 最初にプロジェクト名を聞いてくれる（やさしい）のでhelloworldと入力します。

$ cargo create-tauri-app
? Project name (tauri-app) › helloworld

プロジェクト名を確定すると、次にフロントエンド（パッケージマネージャ）に何を使うか聞いてくれます。（やさしい）
十字キーで選択できるようになっていて、TypeScript/JavaScript（パッケージマネージャはnpmやyarnなど）かRust（パッケージマネージャはcargo）となっています。

$ cargo create-tauri-app
✔ Project name · helloworld
? Choose which language to use for your frontend ›
❯ TypeScript / JavaScript  (pnpm, yarn, npm)
  Rust 
#? Choose which language to use for your frontend ›
# TypeScript / JavaScript 
#❯ Rust  (cargo)

大体の場合、TypeScript/JavaScriptを選択すれば良いのかもしれませんが、あいにくnpmやyarnをインストールしていないのと、RustでUIはどう作るんだろ？と興味があったので、ここではRustを選択します。

最後に、UIテンプレート（RustのGUIフレームワーク）をどれにするか聞いてくれます。（やさしい）

$ cargo create-tauri-app
✔ Project name · helloworld
✔ Choose which language to use for your frontend · Rust - (cargo)
? Choose your UI template ›
❯ Vanilla
  Yew 
  Leptos 
  Sycamore

どれも初耳のものだったので軽く調べたところ、個人的にはYewが最大手のような印象を受けました。チュートリアルのサンプルコードを見たところ、HTMLタグを使うようです。

// こんな感じ
fn app() -> Html {
    html! {
        <h1>{ "Hello World" }</h1>
    }
}

詳細は、公式ページをご覧ください。

yew.rs

私に関する限り、タグはあまり好みではないので最終的にSycamoreにしました。
タグではなく括弧でくくります。あとマスコットキャラクター？ロゴ？がカワイイことも決め手の１つです。

// こんな感じ
fn main() {
    sycamore::render(|cx| view! { cx,
        p { "Hello, World!" }
    });
}

かわいいマスコットと詳細は公式ページをご覧ください。

https://sycamore-rs.netlify.app/

これでプロジェクトが作成されるのですが、依存関係が足りてないからインストールしてね！とメッセージが出ました。

$ cargo create-tauri-app
✔ Project name · helloworld
✔ Choose which language to use for your frontend · Rust - (cargo)
✔ Choose your UI template · Sycamore - (https://sycamore-rs.netlify.app/)

Template created!

Your system is missing dependencies (or they do not exist in $PATH): 
Tauri CLI       Run `cargo install tauri-cli`
Trunk           Run `cargo install trunk`
wasm32 target   Run `rustup target add wasm32-unknown-unknown`

メッセージに従って、コマンドを実行して各々をインストールします。

$ cargo install tauri-cli
$ cargo install trunk
$ rustup target add wasm32-unknown-unknown

インストールが完了したら、プロジェクトフォルダに移動して起動します。

$ cd helloworld
$ cargo tauri dev

初回起動は諸々のビルドに時間が掛かるようです。
何事もなければ、少し待つとUIが表示されます。

HelloWorld by Tauri+Sycamore
HelloWorld

ほんの少しUIを変えてみる

初めて触ったので何もできませんが、文章のどこかに改行を入れて少しだけUIを変えてみます。
プロジェクトフォルダhelloworld/の中には色々なファイルやフォルダが作られてます。UIのソースコードはsrc/app.rsになります。

$ ls
Cargo.lock  README.md   dist        public      src-tauri   target
Cargo.toml  Trunk.toml  index.html  src     styles.css
$ cd src
$ ls
app.rs  main.rs

app.rsの以下の部分に改行<br>を入れてみます。
分かりにくいですが、pub fn App<G: Html>(cx: Scope)の中のview!{}の部分です。

use serde::{Deserialize, Serialize};
use serde_wasm_bindgen::to_value;
use sycamore::futures::spawn_local_scoped;
use sycamore::prelude::*;
use sycamore::rt::Event;
use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern "C" {
（中略）

#[component]
pub fn App<G: Html>(cx: Scope) -> View<G> {
    let name = create_signal(cx, String::new());
    let greet_msg = create_signal(cx, String::new());

    let greet = move |e: Event| {
（中略）
    view! { cx,
        main(class="container") {
            div(class="row") {
                a(href="https://tauri.app",target="_blank") {
                    img(src="public/tauri.svg",class="logo tauri",alt="Tauri logo")
                }
                a(href="https://sycamore-rs.netlify.app",target="_blank") {
                    img(src="public/sycamore.svg",class="logo sycamore",alt="Sycamore logo")
                }
            }
            p {
                "Click on the Tauri and Sycamore logos to learn more."
            }
            p {
                "Recommended IDE setup: "
                a(href="https://code.visualstudio.com/",target="_blank") {
                    "VS Code"
                }
                br() //<==ここ
                " + "
                a(href="https://github.com/tauri-apps/tauri-vscode",target="_blank") {
                    "Tauri"
                }
                " + "
                a(href="https://github.com/rust-lang/rust-analyzer",target="_blank") {
                    "rust-analyzer"
                }
            }
（中略）

期待値は、VS Code + Tauri + rust-analyzerという文字列の中で、VS Codeの直後に改行が入ることです。
app.rsを保存して、先ほどから起動させているUIを見てみます。

Add &lt;br&gt;
"VS Code"の直後に改行を入れた

すると、期待通りVS Codeの直後に改行が入りました。
cargo tauri devで起動させると、ソースコード等を変更するだけでビルドが走り、UIを自動更新してくれることも分かりました。（やさしい）
アプリを終了するにはシェル上でcontrol+cです。

公式ページのドキュメントを見つつ、デスクトップアプリを１つ作ってみたいと思います。