背景が透ける透明なウィンドウを作る

背景が透ける透明なウィンドウ（シースルーウィンドウ）を作成する方法を紹介します。

独自の形状をしたウィンドウや、フローティングウィジェットのようにデスクトップに溶け込むアプリを作成する場合に役立ちます。
tauri.conf.json での transparent: true 設定に加え、CSSでの背景色の調整が必要です。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:window:default"
  ]
}

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

透明ウィンドウを作るには transparent: true が必須です。また、通常は枠も不要なので decorations: false に設定します。

{
  "app": {
    "windows": [
      {
        "transparent": true,
        "decorations": false,
        "width": 400,
        "height": 300
      }
    ]
  }
}

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

ウィンドウ自体が透明になっても、内のHTML背景が白だと透明になりません。html, body に background: transparent を指定する必要があります。

サンプルコード

/* HTML/Body を完全に透明に */
html, body {
  background: transparent;
  margin: 0;
  padding: 0;
}

/* コンテンツ部分は半透明 */
.app-container {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 20px;
  margin: 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}