アプリらしさを高めるために、右クリックメニュー(コンテキストメニュー)を無効化する方法を解説します。
開発中はデバッグに便利ですが、リリース時には無効化するのが一般的です。
フロントエンドでの実装
JavaScript で contextmenu イベントをキャンセルします。
// main.ts などのエントリーポイント
window.addEventListener('contextmenu', (e) => {
// 開発ビルド以外(本番環境)では無効化する例
// ※ Vite を使用している場合。他のバンドラの場合は process.env.NODE_ENV === 'production' など適宜変更してください
if (import.meta.env.PROD) {
e.preventDefault();
}
});
※ import.meta.env で型エラーが出る場合は、src/vite-env.d.ts というファイルを作成して以下を記述するか、tsconfig.json の compilerOptions.types に "vite/client" を追加してください。
/// <reference types="vite/client" />
Web ページ上の一部の要素(画像保存など)だけ許可したい場合は、イベントターゲットを確認して条件分岐します。
Rust 側での設定 (推奨)
Rust 側で初期化スクリプトとして注入することで、JS が読み込まれる前やエラー時でも確実に無効化できます。
または tauri.conf.json で設定できる場合もありますが、以下のコードが確実です。
// main.rs
use tauri::Manager; // 必須
fn main() {
tauri::Builder::default()
.setup(|app| {
let window = app.get_webview_window("main").unwrap();
// JS 注入
let script = "window.addEventListener('contextmenu', e => e.preventDefault());";
window.eval(script).unwrap();
Ok(())
})
// ...
}
※ v2 では initialization_script メソッドが WebviewWindowBuilder にあります。