起動直後のメインウィンドウや、設定・ログインなどのサブウィンドウは画面中央に出すのが自然です。tauri.conf.json の center: true で生成時に中央へ置けるほか、実行中に JS の center() や Rust の window.center() で任意のタイミングに中央寄せできます。マルチモニターでは「どのモニターの中央か」が問題になるので、その挙動と特定モニターの中央に置く方法、初回表示でウィンドウが一瞬ずれた位置に出てから移動する「チラつき」を消す手順も説明します。
前提条件
プラグインは不要です。JS から center() を呼ぶ場合、core:window:allow-center は core:window:default に含まれないので src-tauri/capabilities/default.json に追加します。チラつき対策で show() も使うなら core:window:allow-show も必要です。設定ファイルの center: true だけなら権限は不要です。
{
"permissions": ["core:default", "core:window:allow-center", "core:window:allow-show"]
}起動時に中央へ置く設定です。x / y を同時に書くと意図が矛盾するので、center を使うときは座標を書きません。
{
"app": {
"windows": [
{ "label": "main", "width": 800, "height": 600, "center": true }
]
}
}1. フロントエンドから実装する (TypeScript)
実行時に中央寄せする
center() はそのウィンドウが現在乗っているモニターの中央に移動します。サイズ変更直後に呼ぶと、拡大したウィンドウが画面からはみ出すのを防げます。
import { getCurrentWindow, LogicalSize } from '@tauri-apps/api/window';
const win = getCurrentWindow();
export async function resizeAndCenter(width: number, height: number) {
await win.setSize(new LogicalSize(width, height)); // core:window:allow-set-size が必要
await win.center();
}初回表示のチラつきを防ぐ
フロントエンドの初期化に時間がかかるアプリでは、白いウィンドウが出てから内容が描かれ、位置調整と合わせて落ち着きません。visible: false で作り、準備できたら center() → show() の順で呼ぶと、完成した状態のウィンドウが中央に一度で現れます。
{ "label": "main", "width": 800, "height": 600, "visible": false }import { getCurrentWindow } from '@tauri-apps/api/window';
async function initializeApp() {
// データ読み込みや初期描画など、アプリの準備処理を書く
}
window.addEventListener('DOMContentLoaded', async () => {
const win = getCurrentWindow();
try {
await initializeApp();
await win.center();
} finally {
await win.show(); // 例外が起きても必ず表示する
}
});サブウィンドウを中央に作る
WebviewWindow のオプションにも center があります。生成時に指定するので追加権限は core:webview:allow-create-webview-window だけです（win-017 参照）。
import { WebviewWindow } from '@tauri-apps/api/webviewWindow';
const settings = new WebviewWindow('settings', {
url: '/settings.html', title: '設定', width: 520, height: 400, center: true, resizable: false,
});
settings.once('tauri://error', (e) => console.error('create failed', e));特定のモニターの中央に置く
center() は現在のモニター基準なので、「マウスカーソルがあるモニターの中央」にしたい場合は座標を計算して setPosition() します（core:window:allow-set-position が必要）。
import { cursorPosition, monitorFromPoint, getCurrentWindow, PhysicalPosition } from '@tauri-apps/api/window';
export async function centerOnCursorMonitor() {
const cur = await cursorPosition();
const m = await monitorFromPoint(cur.x, cur.y);
if (!m) return;
const win = getCurrentWindow();
const size = await win.outerSize();
await win.setPosition(new PhysicalPosition(
m.position.x + Math.floor((m.size.width - size.width) / 2),
m.position.y + Math.floor((m.size.height - size.height) / 2),
));
}2. バックエンドから実装する (Rust)
Window / WebviewWindow の center() を呼びます。setup フックで非表示のまま中央寄せしてから表示すれば、フロント側の権限追加なしにチラつき対策ができます。新規作成時は WebviewWindowBuilder::new(...).center().build() です。
use tauri::Manager;
#[tauri::command]
fn center_window(app: tauri::AppHandle, label: String) -> Result<(), String> {
let window = app
.get_webview_window(&label)
.ok_or_else(|| format!("window '{}' not found", label))?;
window.center().map_err(|e| e.to_string())
}
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
tauri::Builder::default()
.setup(|app| {
// tauri.conf.json で "visible": false にしておく
if let Some(main) = app.get_webview_window("main") {
main.center()?;
main.show()?;
}
Ok(())
})
.invoke_handler(tauri::generate_handler![center_window])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}import { invoke } from '@tauri-apps/api/core';
await invoke('center_window', { label: 'main' });動作確認
npm run tauri dev で起動すると、center: true のウィンドウはプライマリモニターの中央に現れます（x / y も指定した場合は、その座標を含むモニターの中央）。サブモニターへドラッグしてから center() を呼ぶと、サブモニターの中央に戻ります。チラつき対策版では show() までウィンドウが一切表示されず、完成した画面が中央に一度で出ます。
よくあるエラーと対処法
window.center not allowed. Permissions associated with this command: core:window:allow-centerという趣旨のエラー: 権限未追加です。追加してtauri devを再起動します。visible: falseにしたらウィンドウが二度と出ない:show()の呼び忘れか、その前に JS が例外で止まっています。上記のようにtry/finallyで必ずshow()に到達させるか、Rust のsetupでshow()する方式にしておくと安全です。- 中央に来るがタイトルバーが画面上端に隠れる: ウィンドウが作業領域より大きいと、はみ出した分が隠れます。モニター情報 の
workAreaに収まる大きさにしてから中央に置きます。 - サブウィンドウが親の中央ではなく画面中央に出る:
centerはモニター基準です。親の中央にしたい場合は、親のouterPosition()/outerSize()から座標を計算してx/yオプションに渡します。
OS ごとの違いと注意点
- どの OS でも: 起動時の
center: trueは、位置の指定がなければプライマリモニター、x/yを指定すればその座標を含むモニターの、作業領域（タスクバーやメニューバーなどを除いた範囲）の中央に置きます。実行中のcenter()は、ウィンドウが今いるモニターが基準です。サブモニターに出したいときは、そのモニター上のx/yを指定するか、位置を指定 して移してからcenter()を呼びます。 - Linux: Wayland ではアプリからの位置指定が制限され、
center()やcenter: trueが効かないコンポジターがあります。X11 では問題ありません。 - スケール倍率の異なるモニターへ
setPosition()した直後は物理サイズが変わって中央からずれます。移動後にもう一度center()を呼ぶと補正できます。
