Windows 10/11でtauriのウィンドウの角を丸くする

Table of contents

はじめに

tauri v1系のウィンドウを丸める方法が、 微妙に Windows 10 と Windows 11 で異なるので、その方法をまとめた。余談だが、tauri v2系では、ウィンドウの角を丸める方法が変わる可能性がある。

• 変更前のウィンドウ

• 変更後のウィンドウ

Windows 11 の場合

window-shadowsというプラグインを使うと、Windows 11 でウィンドウの角を丸めることができる。ウィンドウの影も追加されてしまうが。

• Cargo.toml および main.rs にコードを追加することで、ウィンドウの角を丸める。

Cargo.taml

[dependencies]
window-shadows = { git = "https://github.com/tauri-apps/window-shadows.git" }

main.rs

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

use tauri::Manager;
use window_shadows::set_shadow;

fn main() {
    tauri::Builder::default()
        .setup(|app| {
            // ウィンドウの角を丸める
            let window = app.get_window("main").unwrap();
            set_shadow(&window, true).expect("Unsupported platform!");
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Windows 10 の場合

前述のプラグインでは、Windows 10 でウィンドウの角を丸めることができない。そのため、Windows 10 でウィンドウの角を丸める場合は、以下の方法を使う。この方法は、背景を透過し、roundedの要素を重ねることで、疑似的にウィンドウの角を丸める方法である。試してみたところ、Windows 10 でも Windows 11 でも問題なく動作した。

• 背景を透過する

  • tauri.conf.json に以下の設定を追加する

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

• 背景を透過するCSSを追加する

  • 各種開発環境に応じて違いがあるが、daisyUI を使っている場合は、以下のように設定する。

<style>
  :root {
    background-color: transparent !important;
  }
</style>

• roundedの要素を重ねる

<div class="rounded">
  <div class="bg-white p-4">
    <h1 class="text-2xl font-bold">Hello, world!</h1>
  </div>
</div>

まとめ

tauri v1系のウィンドウを丸める方法が、 微妙に Windows 10 と Windows 11 で異なるので、その方法をまとめた。tauri v2系では、ウィンドウの角を丸める方法が変わる可能性があるので、注意が必要だ。

最近話題の技術書

面倒なことはＣｈａｔＧＰＴにやらせよう