ウィンドウ作成時の初期位置を設定する

アプリ起動時や新規ウィンドウ作成時に、ウィンドウが表示される座標（初期位置）を指定する方法を紹介します。

前回終了時の位置を復元したい場合や、特定の位置にポップアップを出したい場合に有効です。
tauri.conf.json での固定座標指定、およびプログラムからの動的な位置指定について解説します。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:webview:allow-create-webview-window",
    "core:window:default"
  ]
}

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

アプリ起動時に自動的に生成されるメインウィンドウなどの設定は、設定ファイルで行うのが最も簡単です。

座標を指定する場合

app > windows 配下の設定で x と y を指定します。

{
  "app": {
    "windows": [
      {
        "title": "My App",
        "x": 100,
        "y": 100,
        "width": 800,
        "height": 600
      }
    ]
  }
}

画面中央に表示する場合

center: true を設定すると、モニターの中央に表示されます。x, y の指定よりも優先されます。

{
  "app": {
    "windows": [
      {
        "title": "Center App",
        "center": true,
        "width": 800,
        "height": 600
      }
    ]
  }
}

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

ボタンクリックなどのアクションで新しいウィンドウを開く際に、初期位置を指定する方法です。

サンプルコード

@tauri-apps/api/webviewWindow モジュールを使用します。

import { WebviewWindow } from '@tauri-apps/api/webviewWindow';

// 座標を指定してウィンドウを作成
const newWindow = new WebviewWindow('my-new-window', {
  url: 'https://tauri.app',
  title: 'New Window',
  x: 200,
  y: 200,
  width: 600,
  height: 400
});

// 画面中央に作成
const centerWindow = new WebviewWindow('center-window', {
  url: '/settings.html',
  center: true,
  width: 400,
  height: 300
});

newWindow.once('tauri://created', function () {
 console.log('ウィンドウが作成されました');
});

newWindow.once('tauri://error', function (e) {
 console.error('作成エラー:', e);
});

参考: namespacewebviewwindow