JavaScript不要！htmxで作るキーボードショートカット

キーボードショートカットは、マウスを使わずにアプリケーションの機能にすばやくアクセスするのに便利です。
しかし、従来のキーボードショートカットの実装には、JavaScriptによる複雑な処理が必要でした。

htmxを使えば、シンプルなHTMLの属性だけでキーボードショートカットを実現できます。
この記事では、htmxを使ってキーボードショートカットを実装する方法を詳しく解説します。

本記事の内容

キーボードショートカットのHTML構造
サーバーサイドの処理呼び出し
ショートカットキーの設定
アクセシビリティの考慮
サンプルコード

それでは、上記に沿って解説していきます。

キーボードショートカットのHTML構造

htmxについてよくわからない場合は、次の記事からご覧ください。

まず、キーボードショートカットを設定するHTML要素を定義します。

<div hx-trigger="click, keyup[altKey&amp;&amp;shiftKey&amp;&amp;key=='D'] from:body" 
     hx-post="process.php"
     tabindex="0"
     style="cursor: pointer; user-select: none; padding: 10px; background-color: #f0f0f0;">
  処理を実行 (alt-shift-D)
</div>

<div id="response"></div>

ここでは、div要素に以下の属性を設定しています。

hx-trigger: クリックイベントとalt+shift+Dのキーボードショートカットをトリガーとして指定
hx-post: process.phpをPOSTリクエストで呼び出すように指定
tabindex: キーボードフォーカスを受け付けるように設定

また、処理結果を表示するためのdiv要素も用意しています。

サーバーサイドの処理呼び出し

次に、PHPを使ってサーバーサイドの処理を実装します。
process.phpというPHPファイルを作成し、以下のようなコードを記述します。

process.php

<?php
// process.php

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  // ここで何かの処理を行う
  $result = "PHPで処理を実行しました。";
  
  // 処理結果をレスポンスとして返す
  echo "<div id='response'>$result</div>";
} else {
  http_response_code(405); // MethodNotAllowed
  echo "POSTリクエストのみ受け付けます。";
}
?>

このPHPファイルでは、POSTリクエストのみを受け付けるようにしています。
処理結果は、HTMLフラグメントとしてレスポンスに含めます。

htmxは、レスポンスのHTMLフラグメントを自動的にページ内の指定した要素に挿入します。

ショートカットキーの設定

キーボードショートカットを設定するには、hx-trigger属性を使います。

<div hx-trigger="click, keyup[altKey&amp;&amp;shiftKey&amp;&amp;key=='D'] from:body" 
     hx-post="process.php"
     tabindex="0"
     style="cursor: pointer; user-select: none; padding: 10px; background-color: #f0f0f0;">
  処理を実行 (alt-shift-D)
</div>

hx-trigger属性には、トリガーとなるイベントを指定します。
ここでは、clickイベントとalt+shift+Dのキーボードショートカットを指定しています。

キーボードショートカットの記法は以下のようになります。

keyup[altKey&amp;&amp;shiftKey&amp;&amp;key=='D']

keyup: キーが離されたときにトリガーされるイベント
altKey: Altキーが押されているかどうかを判定
shiftKey: Shiftキーが押されているかどうかを判定
key==’D’: 押されたキーがDかどうかを判定

これらの条件をすべて満たした場合に、トリガーが発火します。
また、from:bodyを指定することで、トリガー要素自体にフォーカスがなくてもショートカットが機能するようになります。

アクセシビリティの考慮

キーボードショートカットを実装する際は、アクセシビリティにも配慮しましょう。

<div hx-trigger="click, keyup[altKey&amp;&amp;shiftKey&amp;&amp;key=='D'] from:body" 
     hx-post="process.php"
     tabindex="0"
     style="cursor: pointer; user-select: none; padding: 10px; background-color: #f0f0f0;"
     role="button"
     aria-label="処理を実行 (alt-shift-D)">
  処理を実行 (alt-shift-D)
</div>

tabindex=”0″: キーボードフォーカスを受け付けるように設定
role=”button”: 要素の役割をボタンとして明示
aria-label: 要素の目的を説明するラベルを提供

これらの属性を適切に設定することで、スクリーンリーダーを使用するユーザーにもキーボードショートカットの存在を伝えることができます。

サンプルコード

以上の内容を組み合わせた完全なサンプルコードは以下の通りです。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>htmxで作るキーボードショートカット</title>
  <script src="https://unpkg.com/htmx.org@1.9.2"></script>
</head>
<body>
  <div hx-trigger="click, keyup[altKey&amp;&amp;shiftKey&amp;&amp;key=='D'] from:body" 
       hx-post="process.php"
       tabindex="0"
       style="cursor: pointer; user-select: none; padding: 10px; background-color: #f0f0f0;"
       role="button"
       aria-label="処理を実行 (alt-shift-D)">
    処理を実行 (alt-shift-D)
  </div>
  
  <div id="response"></div>
</body>
</html>

このコードを実行すると、シンプルで高速なキーボードショートカットが実現されます。
ユーザーは、マウスクリックとalt+shift+Dのキーボードショートカットの両方で、サーバー側の処理を呼び出すことができます。

なお、process.phpはすでに記載済みです。