ウィンドウに影を付ける設定をする

ウィンドウ周囲のドロップシャドウ（影）の有無を切り替える方法を紹介します。

デザインをフラットにしたい場合や、逆にウィンドウを際立たせたい場合に使用します。
tauri.conf.json での初期設定、および実行時に動的に影の有効/無効を切り替える手順について解説します。

前提条件

Permissions (権限) の設定

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

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

サンプルコード

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

{
  "app": {
    "windows": [
      {
        "shadow": true,
        "decorations": false
      }
    ]
  }
}

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

サンプルコード

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

const appWindow = getCurrentWindow();

// 影を有効にする
await appWindow.setShadow(true);

// デコレーションを無効にする
await appWindow.setDecorations(false);

• setShadow
• setDecorations

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

use tauri::Manager;

#[tauri::command]
fn set_window_style(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        // 影を有効にする
        window.set_shadow(true).unwrap();
        // デコレーションを無効にする
        window.set_decorations(false).unwrap();
    }
}