【こんてきすとめにゅー】
コンテキストメニュー とは？
最終更新:
💡 「これに何ができる？」を、その場で示すメニュー
選択したものや操作場所に応じて、使える操作を示すメニュー。右クリックだけでなく、長押しやキーボードから開く場合もあります。通常のメニューとの違いと、使いやすく設計するポイントを解説します。
📌 このページのポイント
ひよこ 右クリックで出る一覧がコンテキストメニュー？
ペンギン先生 そう、代表的な例だよ。ファイルに対する「開く・名前を変更する」、選択した文字に対する「コピー」など、その対象に合った操作を出す。実際の項目はOSやアプリ、選択状態によって違うんだ。
ひよこ 右クリックしないと使えないの？
ペンギン先生 ひよこ 画面上部のメニューとは何が違う？
ペンギン先生 対象の近くで、その対象に関係する操作を選べる点だよ。メニューバーでも選択状態によって使える項目が変わるので、「普通のメニューはいつも同じ」とは言い切れないね。
ひよこ 全部の操作をここに入れると便利そう。
ペンギン先生 知らない人が見つけにくくなることもある。よく使う主要な操作は見えるボタンやツールバーに置き、対象に関する追加操作をコンテキストメニューにも用意する、といった設計ができるよ。
ひよこ Webアプリ独自のメニューもあるよね。
ペンギン先生 標準メニューの動作を止めて独自の一覧を表示する場合がある。ただ、表示するだけでは足りない。キーボードで開く方法、項目間の移動、実行、閉じた後に元の対象へフォーカスを戻す動作まで考えよう。
もっと詳しく知りたい人へ
右クリック禁止なら、画像や文章をコピーできなくなる？
標準メニューが開かないことと、情報のコピーを防げることは別です。MDNの例はcontextmenuイベントの既定動作を止めていますが、FirefoxではShiftを押しながら右クリックした場合にメニューが表示される例外も示しています。メニューの抑止を情報保護の仕組みとして扱わないようにしましょう。
まとめ：ざっくりこれだけ覚えればOK！
「コンテキストメニュー」って出てきたら「今の操作対象や状況に合った操作を、その場で選べるメニュー」と思えばだいたいOK！
📖 おまけ：英語の意味
「Context Menu」 ＝ 状況に応じたメニュー
💬 contextは文脈・状況、menuは選べる項目の一覧という意味。開いた場所や対象に合わせて操作を示すことを表しています。