JavaScriptでmacのCommandキーを判定する方法

MacのCommandキーは、コピー＆ペーストなどの一部の特別なショートカットに使用されるキーです。これをJavaScriptで検出することは、特にウェブアプリケーションの開発や、マルチプラットフォームのツール作成において有益です。今回は、JavaScriptを使用してMacのCommandキーを判定する方法を紹介します。

「metaKey」プロパティでCommandキーの判定ができる

JavaScriptのキーボードイベントには「metaKey」プロパティを持っています。このプロパティを使って、イベントが発生した際にCommandキーが押されているか判定が可能です。

以下に、キーボードのイベントをリスニングして、「metaKey」プロパティをチェックするサンプルコードを示します。

document.addEventListener('keydown', function(event) {
  if (event.metaKey) {
    console.log('Commandキーが押されました！');
  }
});

このコードは、ユーザーがキーボードの任意のキーを押すたびに実行されます。そして、もしCommandキーが押されている場合（つまりevent.metaKeyがtrueである場合）、"Commandキーが押されました！"というメッセージがコンソールに出力されます。

Windowsの場合 Ctrlキー、macの場合はCommandキーで判定する方法

Windowsであれば、ショートカットはCtrlキーとなるので、ユーザーが使用しているOSによってCommandキー（mac）またはCtrlキー（Windows）の判定した方が良さそうです。これを実現するには、JavaScriptの「navigator.userAgent」プロパティを使用してユーザーのブラウザやOSを判定します。

以下のサンプルコードでは、Macの場合はCommandキー、それ以外の場合はCtrlキーが押されているかを判定します。

document.addEventListener('keydown', function(event) {
  var isMac = window.navigator.userAgent.indexOf("Mac") != -1;
  
  if ((isMac && event.metaKey) || (!isMac && event.ctrlKey)) {
    console.log('Commandキー(mac)またはCtrlキー(その他)が押されました！');
  }
});

このコードでは、まずwindow.navigator.userAgent.indexOf("Mac") != -1でmacを使っているかどうかを判定します。そして、macの場合はCommandキー、それ以外の場合はCtrlキーが押されているかどうかをチェックします。

まとめ

JavaScriptでMacのCommandキーを判定する方法を紹介しました。