ユーザーにメッセージダイアログを表示する

ユーザーに短い情報を伝えたり、確認を促したりするためのメッセージダイアログを表示する方法を紹介します。

前提条件

プラグインの追加

ダイアログ機能を利用するには dialog プラグインが必要です。

npm run tauri add dialog

src-tauri/src/lib.rs に .plugin(tauri_plugin_dialog::init()) が追加されていることを確認してください。

Permissions (権限) の設定

src-tauri/capabilities/default.json に dialog:default または必要な権限を追加します。

{
  "permissions": [
    ...,
    "dialog:default",
    "dialog:allow-message"
  ]
}

1. フロントエンドから作成する (TypeScript)

@tauri-apps/plugin-dialog の message() 関数を使用します。

基本的なメッセージダイアログ

最もシンプルなメッセージダイアログの表示方法です。

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

// シンプルなメッセージ
await message('処理が完了しました');

種類（info, warning, error）を指定する

options オブジェクトの kind プロパティを指定することで、ダイアログのアイコンや音を変更できます。

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

// エラーメッセージ
await message('予期せぬエラーが発生しました。', {
  title: 'エラー',
  kind: 'error',
});

// 警告メッセージ
await message('この操作は取り消せません。', {
  title: '警告',
  kind: 'warning',
});

OKボタンのラベルを変更する

okLabel プロパティでボタンのテキストをカスタマイズできます。

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

await message('内容を確認しましたか？', {
  title: '確認',
  kind: 'info',
  okLabel: '了解',
});

2. バックエンドから作成する (Rust)

Rust 側でダイアログを表示する方法です。tauri-plugin-dialog の DialogExt トレイトを使用します。

基本的な使用法

use tauri_plugin_dialog::{DialogExt, MessageDialogKind};

// フロントエンドから呼び出し可能なコマンド
#[tauri::command]
fn show_message_dialog(app_handle: tauri::AppHandle) {
    app_handle.dialog()
        .message("これはバックエンドから表示されたメッセージです")
        .kind(MessageDialogKind::Info)
        .title("Rust Command")
        .show(|_result| {
            println!("Dialog closed");
        });
}

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

補足

• 非同期処理: フロントエンド関数の message は Promise を返します。await することでユーザーが閉じるのを待機できます。
• プラグインの初期化: Rust 側で tauri_plugin_dialog::init() を .plugin() に追加（lib.rs）している必要があります。
• kind には 'info' (デフォルト), 'warning', 'error' が指定可能です。
• ネイティブダイアログを使用するため、見た目は実行している OS (Windows, macOS, Linux) によって異なります。