アプリをフルスクリーンで表示する

アプリをフルスクリーン（全画面）で表示する方法を紹介します。

ゲームや動画プレイヤー、キオスクモードのアプリなど、ユーザーに没入感を与えたり、画面を最大限に活用したい場合に有効です。
tauri.conf.json での初期設定、およびフロントエンド (TypeScript) やバックエンド (Rust) から動的に切り替える方法について解説します。

前提条件

Permissions (権限) の設定

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

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

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

アプリ起動時に常にフルスクリーンで表示したい場合は、src-tauri/tauri.conf.json を編集するのが最も簡単です。

{
  "app": {
    "windows": [
      {
        "title": "My App",
        "fullscreen": true // アプリ起動時にフルスクリーンにする
      }
    ]
  }
}

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

実行中にユーザー操作などでフルスクリーンを切り替える場合、Window APIを使用します。

サンプルコード

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

const appWindow = getCurrentWindow();

// フルスクリーンに設定
await appWindow.setFullscreen(true);

// フルスクリーン解除
await appWindow.setFullscreen(false);

// 現在の状態を確認
const isFullscreen = await appWindow.isFullscreen();
console.log('Fullscreen:', isFullscreen);

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

Rust 側から制御する場合は Window インスタンスの set_fullscreen メソッドを使用します。

use tauri::Manager;

#[tauri::command]
fn set_fullscreen(app_handle: tauri::AppHandle, enable: bool) {
    if let Some(window) = app_handle.get_webview_window("main") {
        window.set_fullscreen(enable).unwrap();
    }
}

#[tauri::command]
fn check_fullscreen(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        // 現在の状態を確認
        let is_fullscreen = window.is_fullscreen().unwrap();
        println!("Fullscreen: {}", is_fullscreen);
    }
}