メニューバーを非表示にする

Windows / Linux 環境において、ウィンドウのメニューバーを非表示にする方法を解説します。

Tauri v2 では、メニューの表示/非表示を制御するための API (hide_menu() / show_menu()) は Rust 側にのみ 提供されています。フロントエンド (TypeScript) から制御する場合は、Rust コマンドを経由して呼び出す必要があります。

前提条件

Permissions (権限) の設定

メニューを作成して操作するため、src-tauri/capabilities/default.json に core:menu:default 権限を追加してください。

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

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

動作確認のためにメニューを作成し、Rust で定義したコマンド経由で表示/非表示を切り替えます。

実装例

import { Menu } from '@tauri-apps/api/menu';
import { invoke } from '@tauri-apps/api/core';

// 1. 動作確認用のメニューを作成
async function createMenu() {
  const menu = await Menu.new({
    items: [
      {
        text: 'ファイル',
        items: [
          { text: '開く', action: () => console.log('Open') },
          { text: '保存', action: () => console.log('Save') }
        ]
      }
    ]
  });
  await menu.setAsAppMenu();
}

// 2. メニュー制御関数
async function toggleMenu() {
  try {
    const isVisible = await invoke<boolean>('is_menu_visible');
    if (isVisible) {
      await invoke('hide_menu');
      console.log('メニューを非表示にしました');
    } else {
      await invoke('show_menu');
      console.log('メニューを表示しました');
    }
  } catch (error) {
    console.error('メニューのトグルに失敗しました:', error);
  }
}

// 実行
await createMenu();

// ボタンクリックなどで toggleMenu() を呼び出してください
// document.getElementById('toggle-btn')?.addEventListener('click', toggleMenu);

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

Rust 側で初期メニューを作成し、hide_menu() / show_menu() を呼び出すコマンドを定義します。

実装例

use tauri::menu::{Menu, MenuItem, Submenu};
use tauri::Manager;

#[tauri::command]
fn hide_menu(window: tauri::Window) -> Result<(), String> {
    window.hide_menu().map_err(|e| e.to_string())
}

#[tauri::command]
fn show_menu(window: tauri::Window) -> Result<(), String> {
    window.show_menu().map_err(|e| e.to_string())
}

#[tauri::command]
fn is_menu_visible(window: tauri::Window) -> Result<bool, String> {
    window.is_menu_visible().map_err(|e| e.to_string())
}

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            // 1. 動作確認用のメニューを作成
            let handle = app.handle();
            let file_menu = Submenu::with_items(
                handle,
                "ファイル",
                true,
                &[
                    &MenuItem::with_id(handle, "open", "開く", true, None::<&str>)?,
                    &MenuItem::with_id(handle, "save", "保存", true, None::<&str>)?,
                ],
            )?;
            let menu = Menu::with_items(handle, &[&file_menu])?;
            app.set_menu(menu)?;

            Ok(())
        })
        .invoke_handler(tauri::generate_handler![
            hide_menu, 
            show_menu, 
            is_menu_visible
        ])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

起動時に非表示にする場合

アプリケーションの起動時（Setup フック）にメニューを作成した後、即座に非表示にする例です。

use tauri::Manager;

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            // メインウィンドウのメニューを起動時に非表示にする
            if let Some(window) = app.get_webview_window("main") {
                let _ = window.hide_menu();
            }
            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

補足

* 静的な非表示設定: タイトルバーごと非表示にする場合は、tauri.conf.json で decorations: false を設定してください。
* hide_menu() と remove_menu() の違い:
* hide_menu(): メニューを一時的に非表示にします。show_menu() で再表示できます。
* remove_menu(): メニューを完全に削除します。再度セットするには set_menu() を使用する必要があります。
* macOS: macOS ではウィンドウ単位でのメニュー操作はサポートされていません。アプリ全体のメニューを操作する場合は、AppHandle レベルでの制御が必要ですが、macOS の Human Interface Guidelines ではメニューバーは常に表示されることが推奨されています。