ウィンドウの影や枠線を消す

ウィンドウ周囲の影（シャドウ）やシステム標準の枠線を削除し、フラットなウィンドウを作成する方法を紹介します。

ミニマルなデザインのアプリや、デスクトップアクセサリのようなツールを作成する際に、より統合された見た目を実現できます。
tauri.conf.json での静的設定に加え、実行時に影や枠線の有無を制御する方法について解説します。

前提条件

Permissions (権限) の設定

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

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

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

decorations で枠線、shadow で影、transparent で透明度を設定できます。

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

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

サンプルコード

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

const appWindow = getCurrentWindow();

// 影を無効化
await appWindow.setShadow(false);

// 影を有効化
await appWindow.setShadow(true);

// 枠線を無効化
await appWindow.setDecorations(false);

// 枠線を有効化
await appWindow.setDecorations(true);

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

use tauri::Manager;

#[tauri::command]
fn set_shadow(app_handle: tauri::AppHandle, enable: bool) {
    if let Some(window) = app_handle.get_webview_window("main") {
        window.set_shadow(enable).unwrap();
    }
}

#[tauri::command]
fn set_decorations(app_handle: tauri::AppHandle, enable: bool) {
    if let Some(window) = app_handle.get_webview_window("main") {
        window.set_decorations(enable).unwrap();
    }
}