フォルダ（ディレクトリ）を選択させる

ユーザーに特定のファイルではなく、フォルダ（ディレクトリ）ごと選択させるダイアログを表示する方法を紹介します。

前提条件

プラグインの追加

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

npm run tauri add dialog

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

Permissions (権限) の設定

src-tauri/capabilities/default.json に dialog:allow-open 権限を追加します。

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

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

open() 関数で directory: true オプションを指定します。

基本的なフォルダ選択

最もシンプルなフォルダ選択の実装です。

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

const selectedFolder = await open({
  directory: true,  // これが true だとフォルダ選択モードになります
  multiple: false   // 複数選択を許可するかどうか（デフォルトは false）
});

if (selectedFolder) {
  // 選択されたフォルダのパス (string)
  console.log('選択されたフォルダ:', selectedFolder);
} else {
  console.log('キャンセルされました');
}

複数フォルダの選択

複数のフォルダを一度に選択させることも可能です。

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

const folders = await open({
  directory: true,
  multiple: true  // 複数を許可
});

if (folders) {
  // folders はパスの配列 (string[])
  folders.forEach((path) => {
    console.log('選択フォルダ:', path);
  });
}

初期表示フォルダの指定

ダイアログが開いたときに最初に表示される場所を指定できます。

import { open } from '@tauri-apps/plugin-dialog';
import { homeDir } from '@tauri-apps/api/path';

// ホームディレクトリを初期位置にする
const defaultPath = await homeDir();

const folder = await open({
  directory: true,
  defaultPath: defaultPath,
});

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

Rust 側でフォルダ選択ダイアログを表示する場合は、コマンドを作成し pick_folder を使用します。これによりフロントエンドから invoke で呼び出すことができます。

フォルダ選択ダイアログの表示

#[tauri::command]
fn pick_folder_dialog(app: tauri::AppHandle) {
    use tauri_plugin_dialog::DialogExt;

    app.dialog().file()
        .pick_folder(|folder_path| {
            // folder_path: Option<FilePath>
            match folder_path {
                Some(path) => println!("Selected folder: {:?}", path),
                None => println!("Cancelled"),
            }
        });
}

// main関数などでハンドラを登録します
// .invoke_handler(tauri::generate_handler![pick_folder_dialog])

補足

• directory: true: ファイル選択ダイアログ (open 関数) をフォルダ選択モードに切り替えるための重要なオプションです。
• UI の違い:
• macOS: 通常のファイル選択ダイアログと同様ですが、フォルダを選択して「開く」ボタンを押すことができます。
• Windows: 「フォルダーの選択」という専用のダイアログ（またはフォルダ選択モードのコモンダイアログ）が表示されます。