ウィンドウを常に最前面に固定する

ウィンドウを常に最前面（他のアプリケーションウィンドウよりも手前）に表示し続ける機能です。

メモ帳アプリやウィジェット、常に目視しておきたいモニタリングツールなどに最適です。
tauri.conf.json での初期設定、およびフロントエンド (TypeScript) やバックエンド (Rust) から動的に状態を切り替える方法を紹介します。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:window:allow-set-always-on-top",
    "core:window:default"
  ]
}

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

{
  "app": {
    "windows": [
      {
        "alwaysOnTop": true
      }
    ]
  }
}

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

サンプルコード

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

const appWindow = getCurrentWindow();

// 常に最前面に固定 (他のアプリより手前に表示)
await appWindow.setAlwaysOnTop(true);

// 解除
await appWindow.setAlwaysOnTop(false);

// トグルボタンの例
let isOnTop = false;
document.getElementById('pin-btn')?.addEventListener('click', async () => {
  isOnTop = !isOnTop;
  await appWindow.setAlwaysOnTop(isOnTop);
});

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

use tauri::Manager;

#[tauri::command]
fn set_always_on_top(app_handle: tauri::AppHandle, enable: bool) {
    if let Some(window) = app_handle.get_webview_window("main") {
        window.set_always_on_top(enable).unwrap();
    }
}