接続されているモニター情報を取得する

現在接続されているディスプレイ（モニター）の一覧や詳細情報を取得する方法を紹介します。

マルチモニター環境でのウィンドウ配置や、特定のモニターにアプリを表示させたい場合に役立ちます。
プライマリモニターの特定や、全モニターの解像度・位置情報を取得する手順について解説します。

前提条件

Permissions (権限) の設定

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

{
  "permissions": [
    ...,
    "core:window:default"
  ]
}

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

サンプルコード

import { availableMonitors, primaryMonitor, currentMonitor } from '@tauri-apps/api/window';

// プライマリモニター
const primary = await primaryMonitor();
console.log('Primary:', primary?.name, primary?.size);

// 現在ウィンドウがあるモニター
const current = await currentMonitor();
console.log('Current:', current?.name, current?.position);

// 全モニター一覧
const monitors = await availableMonitors();
monitors.forEach((m, i) => {
  console.log('Monitor ' + i + ':', m.name, m.size.width + 'x' + m.size.height);
});

Monitor オブジェクトについて

取得できる Monitor オブジェクトには、以下のプロパティが含まれています。

詳細: Monitor オブジェクト

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

primary_monitor, current_monitor, available_monitors メソッドを使用します。

use tauri::Manager;

#[tauri::command]
fn list_monitors(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        let monitors = window.available_monitors().unwrap();
        for (i, m) in monitors.iter().enumerate() {
            println!("Monitor {}: {:?}", i, m.name());
        }
    }
}