キーボードイベントロガー.
ブラウザの生のキーボードイベントを表示する診断用ダッシュボードです。イベントハンドラーのデバッグや特定のキープロパティの確認を行う開発者に便利です。
リアルタイムイベント
| イベント | Key | Code | KeyCode | Location | 修飾キー | タイムスタンプ |
|---|---|---|---|---|---|---|
| まだキーボードイベントは記録されていません。キャプチャ対象にフォーカスしてキーを押してください。 | ||||||
記録する前に確認すること
- キャプチャボックスにフォーカスするまずクリックするかTabキーを押してください — フォーカスされるまでイベントは記録されません。
- テストごとにログをクリアする新しいキーをテストする前にログをリセットしておくと、重複イベントの確認が見やすくなります。
- タイムスタンプに注目する1回のタップから数ミリ秒の間隔で2回のkeydownが記録される場合、それは操作ミスではなくチャタリングを起こしているスイッチを示しています。
イベントロガーの仕組み
- 1
キャプチャエリアにフォーカスします。 上のボックスをクリックするか、Tabキーを押してフォーカスします。ステータステキストが変化し、キーボードイベントを待機していることが示されます。
- 2
任意のキーを押します。 各keydownおよびkeyupイベントは、key、code、keyCode、location、修飾キー、タイムスタンプといった生のプロパティとともに記録されます。テーブルはリアルタイムで更新され、新しいイベントは先頭に追加されます。
- 3
ログを管理します。 「ログをクリア」ボタンでテーブルをリセットしたり、「CSVでエクスポート」ですべてのイベントをダウンロードして、スプレッドシートやデバッグツールで分析したりできます。
キーボードイベントのプロパティを理解する
keyは、そのキーが実際に生成する文字です（例："a"、"A"、"1"）。これはキーボードレイアウトや、Shift・Altなどの修飾キーが有効かどうかによって変化します。フランス語のAZERTYキーボードでは、左端の文字キーは"q"ではなく"a"を生成します。
codeは、レイアウトに依存しない物理的なキーです（例："KeyA"、"Digit1"、"Enter"）。同じ物理キーを押せば、レイアウトや修飾キーの状態に関わらず、常に同じcodeが返されます。
keyCodeは、現行のkeyやcodeプロパティが登場する前に使われていた、古い数値コードです（例：Aキーなら65）。ブラウザ間で一貫性がなく、国際的なキーボードや特殊キーに対して信頼性が低かったため、現在は非推奨となっています。代わりにcodeやkeyを使用してください。
locationは、キーボード上に複数存在する同じキーを区別します。標準のキーはlocation 0を、左側の修飾キー（Shift、Ctrl、Alt）は1を、右側の修飾キーは2を、テンキーのキーは3を報告します。ロガーではこれらを「標準」「左（修飾）」「右（修飾）」「テンキー」というわかりやすいラベルで表示します。
修飾キーフラグは真偽値のプロパティ — ctrlKey、shiftKey、altKey、metaKey — で、イベント発生時にCtrl、Shift、Alt、Command/Windowsのいずれかが押されていたかを示します。これらは自由に組み合わさります。Ctrl+Shift+Aを押すと、ctrlKeyとshiftKeyの両方がtrueになります。
repeatは、押さえ続けているキーが繰り返しkeydownイベントを発生させる（オートリピート）ときにtrueになります。最初のkeydownはrepeat: falseで、キーを押さえ続けると、以降のkeydownはrepeat: trueになります。このロガーはkeydownとkeyupのみを表示するため、同一の項目が連続しているのを見ることでリピートしているキーを見つけられます。
イベントロガーが向いている人
キーハンドラーのデバッグ
カスタムのキーボード操作を実装しているウェブ開発者は、どのイベントがどの順序で発生するかを正確に確認し、イベントオブジェクトのプロパティを詳しく調べることで、ユーザーが押すキーに対してハンドラーが正しく反応することを確かめられます。
キーチャタリングの検出
不具合のあるスイッチは、1回の押下から2回分のkeydownイベント（チャタリング）を記録することがあります。タイムスタンプを見ることで、素早い重複を見つけ、それを1つの物理キーに特定できます — これはハードウェアの摩耗や、注意が必要なスイッチのサインです。
未知のキーの特定
キーボード上に見慣れないラベルやメディア記号のキーを見つけましたか？ここでそのキーを押し、codeとkeyのプロパティを読み取ることで、どんなイベントを発生させるかを理解したり、アプリケーションやゲーム環境でマッピングしたりできます。
リマッピングと修飾キーの検証
イベントを記録し、押したキーが期待通りのcodeと修飾キーの組み合わせを生成するかを確認することで、キーボードのリマッピングソフトウェアやOSレベルのキーバインドをテストできます。AltGrなど、その他の国際的な修飾キーが正しく認識されるかも確認しましょう。
キーボードイベント用語集
key- キー入力によって生成される文字で、キーボードレイアウトや修飾キーの影響を受ける — 例："a"、"A"、"1"、"!"、"é"。
code- レイアウトに依存しない物理的なキーの位置 — 例："KeyA"、"Digit1"、"Enter"、"Space"。レイアウトや修飾キーに関わらず常に同じ値になる。
keyCode（非推奨）- 古い数値コード（例：Aキーなら65）。ブラウザ間で一貫性がなく、国際的なキーボードでは信頼性が低いため、新しいコードでは使用しないこと。
location- キーの物理的な位置を表す：0＝標準、1＝左側修飾キー、2＝右側修飾キー、3＝テンキー。左Shiftと右Shift、テンキーのキーと通常のキーを区別する。
repeat- 押さえ続けているキーが繰り返しkeydownイベント（オートリピート）を発生させるときにtrueになる真偽値フラグ。最初のkeydownはfalseで、キーが押されたままであれば、以降はtrueになる。
- 修飾キーフラグ（
ctrlKey、shiftKey、altKey、metaKey） - イベント発生時にCtrl、Shift、Alt、Command/Windowsが押されていたかを示す真偽値フラグ。キーの組み合わせに応じて、複数のフラグが同時にtrueになることがある。
キーボードイベントロガーのFAQ
keyとcodeの違いは何ですか？
keyはキーボードが実際に生成する文字（例：'a'、'A'、'1'、'!'）で、キーボードレイアウトやShiftなどの修飾キーが押されているかどうかによって変わります。codeはキーの物理的な位置（例：'KeyA'、'Digit1'）で、レイアウトや修飾キーに依存しません — 異なる地域でも同じ物理キーを押せば常に同じcodeが返されます。国際的なキーボードでは、keyは変化する一方でcodeは一定のままです。
keyCodeとは何ですか？なぜ非推奨なのですか？
keyCodeは、各キーに割り当てられた古い数値コードです（例：Aキーなら65）。現行のkeyやcodeプロパティが登場する前に使われていたもので、ブラウザ間で一貫性がなく、国際的なキーボードや特殊キーに対して信頼性が低いため非推奨となっています。代わりに、物理的なキーの位置にはcodeを、生成される文字にはkeyを使用してください。
キーチャタリング（1つのキーが2回反応する現象）を検出するにはどうすればいいですか？
キーチャタリングは、1回のキー押下からkeyupを挟まずに2回以上のkeydownイベントが生成されることで発生します。ロガーで、同じcodeを持ち、非常に短い時間差（通常50ミリ秒未満）で重複しているkeydownの項目がないか確認してください。あるキーで一貫してチャタリングが発生する場合、そのスイッチのハードウェアの問題である可能性があります。一部のキーボードやドライバーではデバウンス処理を設定できるので、キーボードのファームウェアやソフトウェアを確認してください。
ロガーは入力内容を保存またはアップロードしますか？
いいえ。すべての記録処理はブラウザ内だけで行われます。入力した内容がサーバーに送信されたり、アップロードされたり、端末の外に保存・記録されたりすることは一切ありません。ページを更新するとログは完全にクリアされます。このロガーは開発者向けの診断ツールであり、プライバシーやデータが送信されることはありません。
Fnキーやメディアキーなど、一部のキーがログに表示されないのはなぜですか？
Fnキーや、メディア・音量・明るさ専用の多くのキーは、ブラウザがイベントを受け取る前にキーボードのファームウェアやOSが処理します。そのためロガーが記録できるものは何もありません。これは異常ではなく正常な動作です。キャプチャ欄をクリックしてフォーカスしたうえで、標準的なキーがここで keydown をまったく発生させない場合は、スイッチの故障や配線の断線が疑われます。