ウィンドウのタイトルを動的に変える

アプリケーションの実行中に、表示しているファイル名や通知件数などをウィンドウタイトルに反映させるのは一般的なUXパターンです。
Tauriでは、フロントエンド (TypeScript) とバックエンド (Rust) の両方からタイトルを変更できます。

前提条件

Permissions (権限) の設定

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

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

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

起動時の初期タイトルは src-tauri/tauri.conf.json で設定します。

{
  "app": {
    "windows": [
      {
        "title": "My Awesome App", // ここで初期値を設定
        "label": "main",
        // ...
      }
    ]
  }
}

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

ユーザーの操作に応じて動的にタイトルを変更する方法です。

サンプルコード

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

// ウィンドウインスタンスの取得
const appWindow = getCurrentWindow();

// 1. シンプルなタイトル変更
await appWindow.setTitle('新しいタイトル');

// 2. 状態に応じた動的な変更
const updateTitle = async (fileName: string, isSaved: boolean) => {
  const prefix = isSaved ? '' : '● ';
  const title = `${prefix}${fileName} - My Editor`;
  await appWindow.setTitle(title);
};

// 使用例
updateTitle('memo.txt', false);

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

Rust側の処理状況（例：重い処理の進行状況など）をタイトルに反映させたい場合に便利です。

use tauri::Manager;

// 引数に AppHandle を指定すると、Tauri が自動的にインスタンスを渡してくれます
#[tauri::command]
fn start_process(app_handle: tauri::AppHandle) {
    let window = app_handle.get_webview_window("main").unwrap();
    
    // 処理開始時にタイトル変更
    window.set_title("処理中... - My App").unwrap();

    // ... 重い処理 ...

    // 処理完了後に戻す
    window.set_title("完了 - My App").unwrap();
}

ベストプラクティス

• アプリ名の統一: タイトル文字列にはアプリ名を含めるのが一般的です（例: "ドキュメント名 - アプリ名"）。
• 未保存状態の表現: macOSなどではAPIレベルで未保存状態（ドキュメントアイコンの変更）をサポートしている場合がありますが、クロスプラットフォームではタイトルに * や ● を付ける手法がよく使われます。