コピー・貼り付けなどの標準メニューを入れる

OS 標準の「コピー」「貼り付け」「元に戻す」などの機能を、自前で実装することなくメニューに追加する方法を解説します。

Tauri では PredefinedMenuItem を使用することで、プラットフォーム固有の標準動作を持つメニュー項目を簡単に作成できます。これをいれることで、WebView 内でのテキスト操作などがネイティブアプリ同様に機能します。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に core:menu:default を追加します。

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

1. フロントエンドから追加する (TypeScript)

オブジェクト形式で item プロパティに機能名（指定の文字列）を渡すだけで作成できます。または PredefinedMenuItem クラスを使用します。

シンプルな記法（オブジェクト形式）

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

const menu = await Menu.new({
  items: [
    {
      text: '編集',
      items: [
        { item: 'Undo', text: '元に戻す' }, // text省略時は各言語のデフォルト
        { item: 'Redo', text: 'やり直し' },
        { item: 'Separator' },
        { item: 'Cut', text: '切り取り' },
        { item: 'Copy', text: 'コピー' },
        { item: 'Paste', text: '貼り付け' },
        { item: 'SelectAll', text: 'すべて選択' }
      ]
    }
  ]
});

await menu.setAsAppMenu();

指定可能な項目 (一部)

item プロパティに指定できる主な値は以下の通りです。

2. バックエンドから追加する (Rust)

Rust でも PredefinedMenuItem を使用できます。

MenuBuilder を使用した記法

MenuBuilder のヘルパーメソッドを使用すると簡潔に記述できます。

use tauri::menu::{MenuBuilder, SubmenuBuilder};

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .setup(|app| {
            let edit_menu = SubmenuBuilder::new(app, "編集")
                .undo()
                .redo()
                .separator()
                .cut()
                .copy()
                .paste()
                .select_all()
                .build()?;

            let menu = MenuBuilder::new(app)
                .item(&edit_menu)
                .build()?;
            
            app.set_menu(menu)?;

            Ok(())
        })
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

個別に作成する場合

use tauri::menu::PredefinedMenuItem;

// ...
let copy = PredefinedMenuItem::copy(app, Some("コピー"))?;
// ...

補足

* macOS のメニュー: macOS では、アプリ名のメニュー（About, Services, Hide, Quit などを含む）を最初に配置するのが通例です。PredefinedMenuItem::about などを使って構成することをお勧めします。