ウィンドウのカスタマイズ

Tauri は、あなたのアプリのウィンドウ外観や操作性をカスタマイズするための豊富なオプションを提供しています。カスタム・タイトルバーの作成や、透明なウィンドウ、サイズ制限の適用などが可能になります。

設定

ウィンドウ設定を変更するには、次の三通りの方法があります：

使用法

カスタム・タイトルバーの作成
(macOS) カスタム・ウィンドウ背景色付きの透明なタイトルバー

カスタム・タイトルバーの作成

このようなウィンドウ機能の一般的な用途は、カスタム・タイトルバーの作成です。この短いチュートリアルでは、その工程を順を追って説明します。

tauri.conf.json

tauri.conf.json で decorations 項目を「false」に設定します。

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

アクセス権

「セキュリティ機能 capability ファイル」でウィンドウに「アクセス権」を追加します。

デフォルトでは、すべてのプラグイン・コマンドのアクセス権はブロックされており、アクセスできません。「セキュリティ機能capabilities」設定でアクセス権リストを定義する必要があります。

詳細については「セキュリティ・レベルの概要」の章を参照してください。また、プラグイン権限を使用するには「プラグイン・アクセス権の使用」の章を参照してください。

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "main-capability",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": ["core:window:default", "core:window:allow-start-dragging"]
}

Permission	Description
`core:window:default`	plugin 用デフォルト・アクセス権。ただし、 `window:allow-start-dragging` を除く。
`core:window:allow-close`	スコープ（適用範囲）の事前設定なしで close コマンドを有効にします。
`core:window:allow-minimize`	スコープの事前設定なしで minimize コマンドを有効にします。
`core:window:allow-start-dragging`	スコープの事前設定なしで start_dragging コマンドを有効にします。
`core:window:allow-toggle-maximize`	スコープの事前設定なしで toggle_maximize コマンドを有効にします。
`core:window:allow-internal-toggle-maximize`	スコープの事前設定なしで internal_toggle_maximize コマンドを有効にします。

CSS

この CSS サンプルを追加して、タイトルバーを画面の上部に表示し、ボタンのスタイルを設定します：

.titlebar {
  height: 30px;
  background: #329ea3;
  user-select: none;
  display: grid;
  grid-template-columns: auto max-content;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.titlebar > .controls {
  display: flex;
}
.titlebar button {
  appearance: none;
  padding: 0;
  margin: 0;
  border: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  background-color: transparent;
}
.titlebar button:hover {
  background: #5bbec3;
}

HTML

以下を <body> タグの最初に置いてください：

<div class="titlebar">
  <div data-tauri-drag-region></div>
  <div class="controls">
    <button id="titlebar-minimize" title="minimize">
      <!-- https://api.iconify.design/mdi:window-minimize.svg -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="currentColor" d="M19 13H5v-2h14z" /><path>
      </svg>
    </button>
    <button id="titlebar-maximize" title="maximize">
      <!-- https://api.iconify.design/mdi:window-maximize.svg -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path fill="currentColor" d="M4 4h16v16H4zm2 4v10h12V8z" />
      </svg>
    </button>
    <button id="titlebar-close" title="close">
      <!-- https://api.iconify.design/mdi:close.svg -->
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
        <path
          fill="currentColor"
          d="M13.46 12L19 17.54V19h-1.46L12 13.46L6.46 19H5v-1.46L10.54 12L5 6.46V5h1.46L12 10.54L17.54 5H19v1.46z"
        />
      </svg>
    </button>
  </div>
</div>

タイトルバーに隠れないように、残りのコンテンツを下に移動する必要があるかもしれないことに注意してください。

Windows で、カスタム仕様のインタラクション（応答操作）を必要としないタイトル・バーだけで十分な場合には、以下を使用すると

*[data-tauri-drag-region] {
  app-region: drag;
}

タイトル・バーをタッチやペン入力で操作できるようになります。

JavaScript

ボタンを機能させるには、以下のコード・スニペットを使用します：

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

// `"withGlobalTauri": true` を使用する場合は、
// const { getCurrentWindow } = window.__TAURI__.window; を使用できます。

const appWindow = getCurrentWindow();

document
  .getElementById('titlebar-minimize')
  ?.addEventListener('click', () => appWindow.minimize());
document
  .getElementById('titlebar-maximize')
  ?.addEventListener('click', () => appWindow.toggleMaximize());
document
  .getElementById('titlebar-close')
  ?.addEventListener('click', () => appWindow.close());

なお、Rust ベースのフロントエンドを使用しているのであれば、上記 HTML 項のコードを index.html ファイルの <script> 要素にコピーしてください。

`data-tauri-drag-region` の手作業による実装

ドラッグ動作をカスタマイズするようなユース・ケース（使用事例）では、data-tauri-drag-region を使用する代わりに、window.startDragging を使用してイベント・リスナーを手作業で追加できます。

HTML

前項のコードから、data-tauri-drag-region を削除し、id を追加します：

<div data-tauri-drag-region class="titlebar">
  <div id="titlebar" class="titlebar">
    <!-- ... -->
  </div>
</div>

Javascript

タイトルバー要素にイベント・リスナーを追加します：

// ...
document.getElementById('titlebar')?.addEventListener('mousedown', (e) => {
  if (e.buttons === 1) {
    // 主ボタン（左）
    e.detail === 2
      ? appWindow.toggleMaximize() // ダブルクリックで最大化
      : appWindow.startDragging(); // それ以外ではドラッグ開始
  }
});

(macOS) カスタム・ウィンドウ背景色付きの透明なタイトルバー

メイン・ウィンドウを作成し、その背景色を Rust 側から変更します。

tauri.conf.json ファイルからメイン・ウィンドウを削除します：

"tauri": {
  "windows": [
    {
      "title": "Transparent Titlebar Window",
      "width": 800,
      "height": 600
    }
  ],
}

依存関係に cocoa クレートを追加し、macOS のネイティブ API を呼び出しに使用できるようにします：

[target."cfg(target_os = \"macos\")".dependencies]
cocoa = "0.26"

メイン・ウィンドウを作成し、その背景色を変更します：

use tauri::{TitleBarStyle, WebviewUrl, WebviewWindowBuilder};

pub fn run() {
  tauri::Builder::default()
    .setup(|app| {
      let win_builder =
        WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
          .title("Transparent Titlebar Window")
          .inner_size(800.0, 600.0);

      // macOS 用にビルドする場合にのみ適用される、透明なタイトル・バーを設定します
      #[cfg(target_os = "macos")]
      let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);

      let window = win_builder.build().unwrap();

      // macOS 用にビルドする場合にのみ適用される、背景色を設定します
      #[cfg(target_os = "macos")]
      {
        use cocoa::appkit::{NSColor, NSWindow};
        use cocoa::base::{id, nil};

        let ns_window = window.ns_window().unwrap() as id;
        unsafe {
          let bg_color = NSColor::colorWithRed_green_blue_alpha_(
              nil,
              50.0 / 255.0,
              158.0 / 255.0,
              163.5 / 255.0,
              1.0,
          );
          ns_window.setBackgroundColor_(bg_color);
        }
      }

      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

【※ この日本語版は、「Jul 04, 2025 英語版」に基づいています】

Support on Open Collective Sponsor on GitHub