ウィンドウを最大化・最小化する

Recipe ID: win-003

ウィンドウを最大化・最小化する方法解説します。

Tauri アプリ開発において、ウィンドウの状態(最大化・最小化)を制御することは、カスタムタイトルバーの実装や特定のUXを提供する際に重要です。Tauri v2 では @tauri-apps/api/window モジュールと、適切な権限設定が必要です。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
  "permissions": [
    ...,
    "core:window:allow-is-maximized",
    "core:window:allow-is-minimized",
    "core:window:allow-maximize",
    "core:window:allow-minimize",
    "core:window:allow-unmaximize",
    "core:window:allow-unminimize",
    "core:window:default"
  ]
}

1. 静的な設定 (tauri.conf.json)

起動時に最大化状態で開始するには、maximized: true を設定します。

{
  "app": {
    "windows": [
      {
        "maximized": true
      }
    ]
  }
}

2. フロントエンドから変更する (TypeScript)

サンプルコード

getCurrentWindow 関数を使用して現在のウィンドウインスタンスを取得し、各種メソッドを呼び出します。

import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();

// 最大化
await appWindow.maximize();

// 最小化
await appWindow.minimize();

// 最大化解除(元のサイズに戻す)
await appWindow.unmaximize();

// 最小化解除
await appWindow.unminimize();

// 最大化状態を確認
const isMaximized = await appWindow.isMaximized();
console.log('Maximized:', isMaximized);

// 最小化状態を確認
const isMinimized = await appWindow.isMinimized();
console.log('Minimized:', isMinimized);

3. バックエンドから変更する (Rust)

Rust側からも同様にウィンドウの状態を変更できます。

use tauri::Manager;

// 引数に AppHandle を指定すると、Tauri が自動的にインスタンスを渡してくれます
#[tauri::command]
fn control_window(app_handle: tauri::AppHandle, action: &str) {
    if let Some(window) = app_handle.get_webview_window("main") {
        match action {
            "maximize" => window.maximize().unwrap(),
            "minimize" => window.minimize().unwrap(),
            "restore" => {
                // 最大化・最小化を解除して元の状態に戻す
                if window.is_minimized().unwrap_or(false) {
                    window.unminimize().unwrap();
                } else if window.is_maximized().unwrap_or(false) {
                    window.unmaximize().unwrap();
                }
            }
            _ => println!("Unknown action"),
        }
    }
}