Zenn
🐱

Tauri 2.0で「ファイルを開く」ダイアログ(plugin-dialog)を使ってみる

2024/11/19に公開
Rust
JavaScript
dialog
Tauri
Tauri 2
tech

Tauri 2.0ではさまざまなAPIがプラグインとして用意されていて、Rust側の実装(コーディング)不要でデスクトップ機能が利用できます。(プラグインとして用意されている機能であれば)
ただ、2.0だとまだ情報があまりなかったので、自分の為にもまとめておこうかと。

今回は、「ファイルを開く」ダイアログ(plugin-dialog)を利用してみます。

一応、Githubにも簡単な手順の記載があります。
https://github.com/tauri-apps/tauri-plugin-dialog

前提

下記記事でまとめた環境をベースでの解説になります。
https://zenn.dev/playree/articles/966ebafc3d11f8

プラグインの追加

フロントとRust側の両方に追加を行います。

> yarn add @tauri-apps/plugin-dialog
> cd src-tauri
> cargo add tauri-plugin-dialog

プラグインの登録

Tauriにプラグインとして登録を行います。

src-tauri/src/lib.rs
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_shell::init())
        .plugin(tauri_plugin_dialog::init()) //★追加
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

パーミッションの追加

今回はダイアログプラグインのopenを利用するので、そのパーミッションを追加します。
※この情報があまり無かったです。1.0とも違うらしく。。

下記のようにdialog:allow-openを追加します。
※ここは利用するAPIによって変わってきます。

src-tauri/capabilities/default.json
{
  "permissions": [
    "core:default",
    "shell:allow-open",
    "dialog:allow-open",
  ]
}

フロント側の実装

あとはフロント側にダイアログを呼び出す実装をするだけです。
Rust側はここまでで行った設定追加のみでOK。

import { open } from '@tauri-apps/plugin-dialog'

const selected = await open({
  multiple: false,
  filters: [
    {
      name: 'Text',
      extensions: ['txt'],
    },
    {
      name: 'All',
      extensions: ['*'],
    },
  ],
})
console.log(selected)

オプションは色々ありますが、こんな感じです。
選択したファイルパスが取得できるはずです。

かんたんですね！

Markdown Viewer開発中

このように Tauri 2.0 をお試ししつつ、せっかくなのでMarkdown Viewerを開発してみています。
ソースサンプルにでもなるかもなので、一応紹介しておきます(笑)

https://github.com/playree/markdv

Discussion