Dialog（ダイアログ）

《訳注》

Plugin 説明内容の英語表記部分について　Plugin の各章は、原文データからページ内容の一部が自動生成されているため、英語表記のままの部分があります。

API Reference

メッセージ・ダイアログを伴う「ファイルを開く／保存する」操作のためのネイティブ・システム・ダイアログ。

対応プラットフォーム

This plugin requires a Rust version of at least 1.77.2

Platform	Level	Notes
windows
linux
macos
android		Does not support folder picker
ios		Does not support folder picker

セットアップ

はじめに、「dialog（ダイアログ）」プラグインをインストールしてください。

自動で設定
手動で設定

自分のプロジェクトのパッケージ・マネージャーを使用して依存関係を追加します：

npm run tauri add dialog

yarn run tauri add dialog

pnpm tauri add dialog

deno task tauri add dialog

bun tauri add dialog

cargo tauri add dialog

src-tauri フォルダで次のコマンドを実行して、このプラグインを Cargo.toml 内のプロジェクトの依存関係に追加します：
```
cargo add tauri-plugin-dialog
```

追加したプラグインを初期化するために lib.rs を修正します：

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_dialog::init())
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

JavaScript でダイアログを作成したい場合には、npm パッケージもインストールしてください：

npm install @tauri-apps/plugin-dialog

yarn add @tauri-apps/plugin-dialog

pnpm add @tauri-apps/plugin-dialog

deno add npm:@tauri-apps/plugin-dialog

bun add @tauri-apps/plugin-dialog

使用法

「ダイアログ dialog」プラグインは JavaScript と Rust の両方で利用可能です。使い方は以下のとおりです：

JavaScript では：

「Yes/No」ダイアログの作成
「Ok/Cancel」ダイアログの作成
「メッセージ／ Message」ダイアログの作成
「ファイル・セレクター／ File Selector」ダイアログの表示
「ファイルへ保存／ Save to File」ダイアログ

Rust では：

「質問／ Ask」ダイアログの生成
「メッセージ／ Message」ダイアログの生成
「ファイル・セレクタ／ File Selector」ダイアログの生成
- Pick Files（ファイルの選択）
- Save Files（ファイルの保存）

JavaScript

JavaScript API の『リファレンス（参考資料）』（英語サイト）で、すべてのダイアログ・オプションを参照してください。

「Yes/No」ダイアログの作成

「Yes／はい」ボタンと「No／いいえ」ボタンのある質問ダイアログを表示します。

import { ask } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合は、
// const { ask } = window.__TAURI__.dialog; を使用できます

// 「Yes/No」ダイアログを作成
const answer = await ask('This action cannot be reverted. Are you sure?', {
  title: 'Tauri',
  kind: 'warning',
});

console.log(answer);
// コンソールにブール値を出力

「Ok/Cancel」ダイアログの作成

「Ok／OK」ボタンと「Cancel／キャンセル」ボタンのある質問ダイアログを表示します。

import { confirm } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合は、
// const { confirm } = window.__TAURI__.dialog; を使用できます

// 「Ok/Cancel の確認」ダイアログを作成
const confirmation = await confirm(
  'This action cannot be reverted. Are you sure?',
  { title: 'Tauri', kind: 'warning' }
);

console.log(confirmation);
// コンソールにブール値を出力

「メッセージ／ Message」ダイアログの作成

「Ok／OK」ボタン付きのメッセージ・ダイアログを表示します。ユーザーがこのダイアログを閉じると false が返されることに注意してください。

import { message } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合は、
// const { message } = window.__TAURI__.dialog; を使用できます

// メッセージを表示
await message('File not found', { title: 'Tauri', kind: 'error' });

「ファイル・セレクター／ File Selector」ダイアログの表示

「ファイル／ディレクトリ」選択ダイアログを開きます。

multiple オプションは、このダイアログで「複数の選択を許可するかどうか」を制御し、directory オプションは「ディレクトリ選択を許可するかどうか」を制御します。

import { open } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合は、
// const { open } = window.__TAURI__.dialog; を使用できます

// ダイアログを表示
const file = await open({
  multiple: false,
  directory: false,
});
console.log(file);
// 「ファイル・パス」または「URI」を出力

《訳注》

URI　Uniform Resource Identifier：　「統一資源識別子」。Web上のリソースを識別・認識するための文字列（識別子）の総称。URL と URN はそのサブセット。《wikipedia》

「ファイルへ保存／ Save to File」ダイアログ

「ファイル／ディレクトリを保存」ダイアログを開きます。

import { save } from '@tauri-apps/plugin-dialog';
// `"withGlobalTauri": true` を使用する場合は、
// const { save } = window.__TAURI__.dialog; を使用できます

// 拡張子 .png または .jpeg を付けて「マイフィルター」を保存するように指示を出します
const path = await save({
  filters: [
    {
      name: 'My Filter',
      extensions: ['png', 'jpeg'],
    },
  ],
});
console.log(path);
// 選択されたパスを出力

Rust

利用可能なすべてのオプションを確認するには、Rust API リファレンス（英語サイト）を参照してください。

「質問／ Ask」ダイアログの生成

次の例では Absolutely と Totally ボタンを含む質問ダイアログを表示します。

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

let answer = app.dialog()
        .message("Tauri is Awesome")
        .title("Tauri is Awesome")
        .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
        .blocking_show();

ノン・ブロッキング操作が必要な場合は、代わりに show() を使用できます：

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons};

app.dialog()
    .message("Tauri is Awesome")
    .title("Tauri is Awesome")
   .buttons(MessageDialogButtons::OkCancelCustom("Absolutely", "Totally"))
    .show(|result| match result {
        true => // 「true」の場合の処理,
        false =>// 「false」の場合の処理,
    });

「メッセージ／ Message」ダイアログの生成

Ok ボタンのあるメッセージ・ダイアログを表示します。ユーザーがダイアログを閉じると、false が返されることに注意してください。

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

let ans = app.dialog()
    .message("File not found")
    .kind(MessageDialogKind::Error)
    .title("Warning")
    .blocking_show();

ノン・ブロッキング操作が必要な場合は、代わりに show() を使用できます：

use tauri_plugin_dialog::{DialogExt, MessageDialogButtons, MessageDialogKind};

app.dialog()
    .message("Tauri is Awesome")
    .kind(MessageDialogKind::Info)
    .title("Information")
    .buttons(MessageDialogButtons::OkCustom("Absolutely"))
    .show(|result| match result {
        true => // 「true」の場合の処理,
        false =>// 「false」の場合の処理,
    });

「ファイル・セレクタ／ File Selector」ダイアログの生成

Pick Files（ファイルの選択）

use tauri_plugin_dialog::DialogExt;

let file_path = app.dialog().file().blocking_pick_file();
// file_path `Option` を返し、ユーザーがダイアログを閉じた場合は `None` を返します

ノン・ブロッキング操作が必要な場合は、代わりに pick_file() を使用できます：

use tauri_plugin_dialog::DialogExt;

app.dialog().file().pick_file(|file_path| {
    // file_path `Option` を返し、ユーザーがダイアログを閉じた場合は `None` を返します
    })

Save Files（ファイルの保存）

use tauri_plugin_dialog::DialogExt;

let file_path = app
    .dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .blocking_save_file();
    // ここに、オプションのファイルパスを用いて行なう処理を記述
    // ユーザーがダイアログを閉じた場合には、ファイル・パスは「`None`（なし）」になります

あるいは、その代わりに：

use tauri_plugin_dialog::DialogExt;

app.dialog()
    .file()
    .add_filter("My Filter", &["png", "jpeg"])
    .pick_file(|file_path| {
        // file_path `Option` を返し、ユーザーがダイアログを閉じた場合は `None` を返します
    });

Default Permission

This permission set configures the types of dialogs available from the dialog plugin.

Granted Permissions

All dialog types are enabled.

This default permission set includes the following:

allow-ask
allow-confirm
allow-message
allow-save
allow-open

Permission Table

Identifier	Description
`dialog:allow-ask`	Enables the ask command without any pre-configured scope.
`dialog:deny-ask`	Denies the ask command without any pre-configured scope.
`dialog:allow-confirm`	Enables the confirm command without any pre-configured scope.
`dialog:deny-confirm`	Denies the confirm command without any pre-configured scope.
`dialog:allow-message`	Enables the message command without any pre-configured scope.
`dialog:deny-message`	Denies the message command without any pre-configured scope.
`dialog:allow-open`	Enables the open command without any pre-configured scope.
`dialog:deny-open`	Denies the open command without any pre-configured scope.
`dialog:allow-save`	Enables the save command without any pre-configured scope.
`dialog:deny-save`	Denies the save command without any pre-configured scope.

【※ この日本語版は、「Nov 1, 2024 英語版」に基づいています】

Support on Open Collective Sponsor on GitHub