Tauriの特徴

Tauriの特徴は以下です。

セキュリティファースト

WebフロントとTauri Coreの間にIsolationアプリケーションと呼ばれるJavaScriptコードを挟むことができます。Tauri CoreのAPI呼び出しを常にIsolationアプリケーションが傍受するので、不適当なAPI呼び出しを防ぐことができます。

ポリグロット(サイロでない)

TauriはバックエンドにRustを使っていますが、そう遠くない将来、Go、Nim、Python、C#など、他のバックエンドも可能になるそうです。

クロスプラットフォーム

主要なデスクトップ用のバイナリを生成できます。近くモバイルにも対応されるそうです。

バンドルサイズ

OSのWebレンダラーを使っているため、Electronなどに比べるとバンドルサイズやメモリ使用量が小さいようです。

Tauriのアーキテクチャ

こちらの資料が参考になるので見てみてください。

Tauri の概要｜Rust GUI の決定版！ Tauri を使ってクロスプラットフォームなデスクトップアプリを作ろう

公式だとこの辺りです。

環境情報

今回利用した環境は以下です。tauri,@tauri-apps/api,@tauri-apps/cliはcreate-tauri-appでインストールされるので個別でインストールする必要はありません。

• OS: Windows10 Home 21H2
• Node: 16.15.0
• yarn: 1.22.19

• create-tauri-app: 2.7.0

• tauri: 1.2.1

• @tauri-apps/cli: 1.2.1

• @tauri-apps/api: 1.2.0

前提条件

公式にある必要な環境を構築します。

1. Microsoft C++ Build Tools: 17.4.2
   ここからインストール

2. WebView2
   ここのEvergreen Bootstrapperをインストール

3. Rust
   ここからインストール

VSCode拡張機能

エディタにVSCodeを使う場合は以下の拡張機能がおすすめです。

Tauri VS Code Extension

Tauri - Visual Studio Marketplace

rust-analyzer

ユースケース

ユースケースは以下の通りです。

• メモからチケットを作成する
• チケットにはタイトルを設定する
• チケットをカンバンでステータス変更する (Option)
• チケットをアプリ上から作成する (Option)
• チケットをアプリ上から削除する (Option)
• 保存ボタンを押下したらローカルのファイルに書き込む (Option)

(Option)がついていないところがMVP。

機能(MVP)

各機能をバックエンド、フロントエンドに分けて考えました。

フロントエンド(React)

• ボタンを押下されたら読み込むファイルパスを選択する
• バックエンド側に実装する独自コマンド「create_ticket」 を呼び出す
• 返却されたチケットの配列をカードに描画する

バックエンド(Rust)

• メモからチケットリストを作成する(create_ticket)
  
  • ・メモを読み込む(read_file)
  • ・読み込んだ内容をパースして、行ごとに配列の要素に分割する
  • ・配列を返却する

作成(MVP)

まずは指定したファイルを読み込み、改行区切りでチケットを表示するところまで実装する(スタイルは皆無)。
ここまでやるとこんな感じです。

ToDo.txtの中身はこちらです。

1次会の精算
2次会の精算
3次会の精算

以降でこの状態の実装について説明していきます。

フロントエンド(React)

import { useState } from "react";
import { invoke } from "@tauri-apps/api/tauri";
import { open } from "@tauri-apps/api/dialog";
import "./App.css";

function App() {
  const [tickets, setTickets] = useState([""]);

  async function openDialog() {
    /**1. @tauri-apps/api/dialog#openで選択したファイルのパスを取得。 */
    const path = await open({ multiple: false }); 
    if (typeof path === "string") {
      /**2. create_ticketコマンドを実行。String[]で受け取ったチケット一覧をセット。 */
      setTickets(await invoke<string[]>("create_ticket", { path: path })); 
    }
  }

  const ticketsEl = tickets.map((ticket) => <p>{ticket}</p>);

  return (
    <div className="container">
      <h1>Welcome to Tauri!</h1>

      <div className="row">
        <button onClick={openDialog}>add tickets from file</button>
        <button onClick={() => setTickets([])}>clear tickets</button>
      </div>

      {ticketsEl}
    </div>
  );
}

export default App;

ポイントは以下。

1. Tauri APIの利用
   @tauri-apps/api/dialog#openで選択したファイルのパスを取得。
2. 独自コマンドの実行
   create_ticketコマンドを実行。String[]で受け取ったチケット一覧をセット。

Tauri APIの利用

次項で紹介するように独自のコマンドを定義して呼び出すことができます。
ただ汎用的なコマンドは@tauri-apps/apiから提供されています。

今回はダイアログを表示してファイルパスを取得する処理を@tauri-apps/api/dialog#openで実現しました。

const path = await open({ multiple: false }); 

独自コマンドの実行

バックエンドで定義した独自のコマンドを呼び出すことができます。
invokeで第一引数にコマンド名、第二引数にコマンド引数を指定します。

今回は返却されたチケット一覧をstring配列として受け取りsetStateしています。

setTickets(await invoke<string[]>("create_ticket", { path: path })); 

バックエンド(Rust)

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]

/**指定されたパスのファイル読み込み */
fn read_file(path: String) -> String {
std::fs::read_to_string(path).expect("could not read file")
}

/**2. パスを受け取り、読み込んだファイルを改行で区切りVecにして返す。 */
#[tauri::command]
fn create_ticket(path: String) -> Vec<String>{
  println!("create ticket");
  let tickets = read_file(path);
  tickets.lines().map(|s|s.to_string()).collect()
}

fn main() {
  tauri::Builder::default()
      .invoke_handler(tauri::generate_handler![create_ticket])
      .run(tauri::generate_context!())
      .expect("error while running tauri application");
}

ポイントは以下。

1. 独自コマンドの定義
   パスを受け取り、読み込んだファイルを改行で区切りVecにして返す。

独自コマンドの定義

関数をコマンドハンドラとしてマークするために#[tauri::command]を付与します。 そのほかは通常の関数と変わりません。

#[tauri::command]
fn create_ticket(path: String) -> Vec<String>{
    println!("create ticket");
    let tickets = read_file(path);
    tickets.lines().map(|s|s.to_string()).collect()
}

機能追加(Option)

ここからはあまりTauriは関係ないです。
これまで紹介したCommandを使って機能追加したりUIをきれいにしました。

上述のユースケースのOptionの部分を実装しました。

• チケットをカンバンでステータス変更する (Option)
• チケットをアプリ上から作成する (Option)
• チケットをアプリ上から削除する (Option)
• 保存ボタンを押下したらローカルのファイルに書き込む (Option)

結局こうなりました。

最終的なソースはGithubで公開しているで興味ある方は御覧ください。
汚い部分がたくさんありますが。。

GitHub - k-kanno/tauri-app

良かったところ

• React, Rustともにホットリロードができる。
• 日本語の情報が多い。
• 既存のSPAフレームワークで開発できるため学習コストが低い。

良くなかったところ

• まだドキュメントに更新が入っているので、正式版以前に書かれたネット上の記事を見ると存在しないリンクを参照させている場合がある。Recipes(参考)など。
  

  • ・ロジックをReact、Rustのどちらにも書けるのでそのあたりのガイドが欲しい。なるべくRust側に寄せるのが良さそう。

感想

今回はTauriというデスクトッププラットフォーム用アプリケーションの作成を支援するツールを紹介しました。
Rustもまったく触れたことがない状態でしたが簡単にこのくらいのアプリは作ることができました。
ただテストやベストプラクティスなどは分かっていないのでもう少し触っていければと思いました。
まだ正式版がでて半年経っていないので今後どれくらい盛り上がっていくか注目していきたいと思います。
最後まで読んでいただきありがとうございました。