ウィンドウをドラッグ移動できる領域を作る

OS標準のタイトルバーを使わず、独自のタイトルバーやドラッグ可能なエリアを作成する方法を紹介します。

デザインをカスタマイズしたい場合に必須の機能です。
tauri.conf.json で標準の装飾を無効化し、HTMLの要素に data-tauri-drag-region 属性を付与することで、その領域を掴んでウィンドウを移動できるようになります。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:window:allow-start-dragging",
    "core:window:default"
  ]
}

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

ドラッグ移動させるようなカスタムウィンドウを作る場合、通常はOS標準のタイトルバーを非表示にします。

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

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

data-tauri-drag-region 属性を付与した要素内でのドラッグ操作が、ウィンドウ移動として処理されます。

サンプルコード

<!-- data-tauri-drag-region 属性を付けた要素をドラッグするとウィンドウが移動します -->
<div data-tauri-drag-region class="titlebar">
  ここをドラッグして移動
</div>

.titlebar {
  height: 30px;
  background: #dddddd;
  user-select: none; /* テキスト選択を防ぐため推奨 */
  display: flex;
  align-items: center;
  padding-left: 10px;
}