ウィンドウのサイズを変更する

Recipe ID: win-001

Tauriアプリケーションでウィンドウのサイズを制御する方法はいくつかあります。
初期サイズの設定(静的構成)と、実行時のプログラムによる変更(動的構成)の両方について解説します。

前提条件

Permissions (権限) の設定

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

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

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

アプリ起動時の初期サイズを設定したい場合は、src-tauri/tauri.conf.json を編集するのが最も簡単です。

{
  "app": {
    "windows": [
      {
        "title": "My App",
        "width": 800,        // 初期の幅
        "height": 600,       // 初期の高さ
        "minWidth": 400,     // 最小幅の制限
        "minHeight": 300,    // 最小高さの制限
        "resizable": true    // ユーザーによるリサイズを許可するか
      }
    ]
  }
}

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

実行中にボタンクリックなどでサイズを変更する場合、Window APIを使用します。

サンプルコード

LogicalSize (論理ピクセル) を使用することで、高DPIディスプレイでも適切なサイズ感で変更できます。

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

// 現在のウィンドウインスタンスを取得
const appWindow = getCurrentWindow();

// 幅800px, 高さ600px (論理サイズ) に変更
await appWindow.setSize(new LogicalSize(800, 600));

// アニメーション付きで変更したい場合はCSSのtransitionを検討するか、
// 現状APIでは即時変更となります。

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

Rust側でロジックを実行中にウィンドウサイズを変更したい場合の例です。

use tauri::{LogicalSize, Manager};

// 引数に AppHandle を指定すると、Tauri が自動的にインスタンスを渡してくれます
#[tauri::command]
fn resize_window(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        // 幅 800, 高さ 600 に変更
        window.set_size(LogicalSize::new(800.0, 600.0)).unwrap();
    }
}

補足: 論理サイズと物理サイズ

  • LogicalSize (論理サイズ): OSのスケール設定(150%など)を考慮したサイズ。Web開発者が通常扱う「px」に近い感覚です。
  • PhysicalSize (物理サイズ): 実際のディスプレイのドット数。ゲームや厳密な描画が必要な場合に使用します。