枠のないフレームレスウィンドウを作る

ウィンドウのタイトルバーや枠（ボーダー）を非表示にした、フレームレスウィンドウを作成する方法を紹介します。

この設定を有効にすると、OS標準のデザインに縛られない、完全にオリジナルのUIデザイン（例えばカスタムタイトルバー）を持つアプリを構築できます。モダンなルックアンドフィールのアプリや、ゲームランチャー、デスクトップウィジェットなどでよく利用されます。

:::warning 注意点
フレームレスにすると、標準の「タイトルバーによるウィンドウ移動」や「ウィンドウリサイズ」、「閉じるボタン」などの機能も失われます。
ユーザーがウィンドウを操作できるように、HTML/CSSで自作のタイトルバーを作成し、ウィンドウをドラッグ移動できる領域を作る (win-006) などを組み合わせて必要な機能を実装してください。
:::

ここでは、tauri.conf.json での初期設定、および実行時に動的に装飾（Decoration）の表示/非表示を切り替える手順について解説します。

前提条件

Permissions (権限) の設定

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

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

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

decorations: false を設定すると、OS標準のタイトルバーとウィンドウ枠が非表示になります。

{
  "app": {
    "windows": [
      {
        "decorations": false
      }
    ]
  }
}

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

サンプルコード

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

const appWindow = getCurrentWindow();

// トグル処理の例
const isDecorated = await appWindow.isDecorated();
await appWindow.setDecorations(!isDecorated);

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

use tauri::Manager;

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