アプリケーション上のマウスカーソルアイコン（ポインター）を変更する方法を紹介します。
処理中の待ち状態（砂時計/ローディング）を表示したり、特定のエリアで十字カーソルにするなど、UXを向上させるために使用します。
wait、hand、crosshair など、利用可能なカーソルタイプの設定方法を解説します。
前提条件
Permissions (権限) の設定
src-tauri/capabilities/default.json に以下の権限を追加します。
{
"permissions": [
...,
"core:window:default",
"core:window:allow-set-cursor-icon",
"core:window:allow-set-cursor-visible"
]
}1. フロントエンドから変更する (TypeScript)
サンプルコード
import { getCurrentWindow } from '@tauri-apps/api/window';
const appWindow = getCurrentWindow();
// カーソルを変更 (確認したい設定のみコメントアウトを外してください)
await appWindow.setCursorIcon('wait'); // 待機カーソル
// await appWindow.setCursorIcon('hand'); // ポインター (指差し)
// await appWindow.setCursorIcon('crosshair'); // 十字
// await appWindow.setCursorIcon('default'); // デフォルト
// カーソルを非表示 (確認時はコメントアウトを外してください)
// await appWindow.setCursorVisible(false);
// カーソルを表示
// await appWindow.setCursorVisible(true);
重要
Webview 上にマウスがある場合、CSS の
cursor プロパティが優先されることがあります（例: body { cursor: default; } が設定されている場合など）。
setCursorIcon で変更しても反映されない場合は、CSS で cursor: wait; 等を指定するか、Webview 以外の領域で確認してください。通常、Web アプリケーション内のカーソル制御は CSS で行うことが推奨されます。
設定可能なカーソルの種類など、詳細は公式ドキュメントを参照してください。
2. バックエンドから変更する (Rust)
CursorIcon enum を使用してカーソルタイプを指定します。
use tauri::{Manager, CursorIcon};
#[tauri::command]
fn set_waiting_cursor(app_handle: tauri::AppHandle) {
if let Some(window) = app_handle.get_webview_window("main") {
window.set_cursor_icon(CursorIcon::Wait).unwrap();
}
}