ウィンドウの最小・最大サイズを制限する

Recipe ID: win-015

ユーザーが変更可能なウィンドウサイズの範囲(最小幅・高さ、最大幅・高さ)を制限する方法を紹介します。

レイアウトが崩れてしまう極端な小サイズや、画面を占有しすぎる大サイズへのリサイズを防ぎたい場合に役立ちます。
tauri.conf.json での初期設定、および LogicalSize を用いて動的にサイズ制限を適用する方法について解説します。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:window:default",
    "core:window:allow-set-min-size",
    "core:window:allow-set-max-size"
  ]
}

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

{
  "app": {
    "windows": [
      {
        "minWidth": 400,
        "minHeight": 300,
        "maxWidth": 1200,
        "maxHeight": 900
      }
    ]
  }
}

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

LogicalSize を使用してサイズを指定します。

サンプルコード

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

const appWindow = getCurrentWindow();

// 最小サイズを設定
await appWindow.setMinSize(new LogicalSize(400, 300));

// 最大サイズを設定
await appWindow.setMaxSize(new LogicalSize(1200, 900));

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

set_min_size および set_max_size メソッドを使用します。引数には Option 型を渡します(None で制限解除)。

use tauri::{LogicalSize, Manager};

#[tauri::command]
fn set_window_constraints(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        // 最小サイズ
        window.set_min_size(Some(LogicalSize::new(400.0, 300.0))).unwrap();
        // 最大サイズ
        window.set_max_size(Some(LogicalSize::new(1200.0, 900.0))).unwrap();
    }
}