54
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Tauri(V2)は滅茶苦茶いいぞ!という布教をしていきたい

Posted at

概要

Elin Custom Portrait EditorというツールをTauriとSveltekitを使って製作したんですが、
制作にあたって「Tauri、良すぎない?」と感じたのでその魅力を伝えていきます。

1.ビルドしたファイルサイズが本当に小さくコンパクトな構成

元々別のツールをElectronで制作していたんですが、いざビルドしてみると本体exeだけで200MBを軽く超える超巨大アプリになってしまうのが困りものでした。
(インストーラーで配布する前提の仕様だろうし開発もそこまで気にしてないんだろうけど、私はインストーラー不要のポータブルアプリ派なので…)
Electron BuilderでPortable設定にすれば単一.exeとして出力も出来るけど、今度は実行速度が犠牲になってしまうという特大の罠が待ち受けています。

対するTauriはビルドサイズがだいたい10MB前後と非常に小さいです
(同じ機能のアプリをElectronで作ると200MB超えてました)

ビルドされるファイルも本体exe一つだけと非常にコンパクト、パス周りの指定など多少考えてあげる必要もありますが、大体どこに置いても同じように動作してくれるので配布もしやすいです。

下記コマンドでインストーラーを作らず本体exeだけ作れるのも個人的には好みです。

お好きなコマンドラインツール
bun tauri build --no-bundle

※この記事ではコマンド実行にbunを使用していますがTauriはnpmやyarn、pnpmでも動作します

2. V2からはそんなにrustの知識が無くても開発が容易になった

先日公開されたTauri V2ではプラグインシステムが採用されており、fsやdialogといったTauriの基本機能を個別にインストールし、rustのコードを全く書かなくてもJapascript/Typescriptから任意で呼び出せるようになっています。

例えばfs(ファイル読み書き)の機能が使いたい場合はコマンドでインストールし、

お好きなコマンドラインツール
bun tauri add fs

コマンド実行権限のスコープ範囲をtauriの設定ファイルに追加
※自分はそんなに複雑なツールではないためスコープ範囲無制限にしてます、
 ツールの用途に合わせて適時調整してね。

capabilities/default.json
"permissions": [
    {
      "identifier": "fs:allow-write-text-file",
      "allow": [
        {
          "path": "**"
        }
      ]
    }
  ]

それをjs/tsのソース上からimportして呼び出してあげるだけで簡単に使えます。

honyarara.ts
import { writeTextFile } from '@tauri-apps/plugin-fs';

await writeTextFile("honyarara.txt", "ほにゃらら")

Portrait Editorでも一部を除いてほとんどの機能はpluginで実装しています。

3.Rust処理の呼び出しも簡単

プラグインで足りない機能を補うにはどうしてもrustを書く必要がありますが、その場合でも比較的実装は簡単です。
以下は指定したパスをエクスプローラーで表示する処理、

use std::path::Path;
#[tauri::command]//フロントから呼び出したい関数には#[tauri::command]を行頭に付ける
fn open_folder(path: String) {
    let path = Path::new(&path);
    showfile::show_path_in_file_manager(path);
}

呼び出すにはTauriのウィンドウ呼び出し処理にinvoke_handlerで設定するだけ

lib.rs
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
        .invoke_handler(tauri::generate_handler![open_folder]) //作成した関数を呼び出し
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

あとはフロント側でinvokeして関数名と引数を渡してあげればrust側で処理してくれます。

honyarara.ts
import { invoke } from '@tauri-apps/api/core';

await invoke("open_folder", {path:"path/to/path"})

Electronでnode側の処理を呼び出すときは関数を呼び出すためのipcMainでリスナーを作り、
更にContextBridgeでプロセス間通信の許可設定をして…と色々と面倒だったのでTauriのシンプルさは非常に嬉しい

まとめ

元々Rustを書くのがやや苦手で、Tauriは取っつきにくそうなイメージがあって長年敬遠していたのですが、V2のプラグイン機能で比較的導入が簡単なフレームワークになりました。
ファイルサイズが小さい高速なアプリを作成したい人は是非とも検討してはいかがでしょうか?

54
25
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
54
25

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?