ユーザースクリプトを使用して24年前のウェブサイトに勝手にショートカットキーを追加する方法

古いウェブサイトに対して勝手にショートカットキーをサポートさせる方法について、エンジニアのウィリアム・エドミステン氏がブログに投稿しています。

Adding Keyboard Shortcuts to a 24 Year Old Government Website with Userscripts
https://wcedmisten.fyi/post/keyboard-shortcuts-userscripts/

エドミステン氏がターゲットにしたのはFDAの510kプログラムの検索フォーム。ページの見た目は更新されていますが、基本的な構造は少なくとも2000年ごろから更新されていない模様です。

エドミステン氏は日常的にこのサイトでデータベースを検索し、デバイスIDを取得する必要がありましたが、デバイス名や会社名が標準化されておらず、略称が使用されていたりタイプミスがあったりして1件のデバイスを検索するたびに数回の試行錯誤を行っていました。また、検索結果のテキストからマウスでデバイスIDを選択してコピーするなど、手がキーボードとマウスを往復することも非効率だと感じていたとのこと。

そこで、エドミステン氏はキーボードから手を離さずに全ての操作ができるようにするため、ViolentMonkeyというツールを使用して勝手にショートカットキー機能を追加することにしました。

ViolentMonkeyでショートカットキーを有効化するにはコードの最初に下記のコードを入力すれば良いとのこと。

// @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1

「VM.shortcut.register」メソッドを使用することでショートカットキーを押したときの動作を設定できます。例えば下図であれば「Ctrl＋Alt＋N」キーを押すことで510kプログラムの検索フォームのページを1発で開くことが可能になります。

続いて入力欄にフォーカスを当てます。HTMLを確認すると入力欄にIDが振られていることが分かります。

そこで、「document.getElementById」を使用して要素を取得し、「focus」メソッドを使用してフォーカスを当てればOK。

入力欄への入力内容は毎回異なるため手動で行いますが、検索結果からデバイスのIDをコピーする部分は自動化できそうです。ただし、検索結果が1件のみの場合と複数件だった場合で検索結果の表示が異なっているとのこと。1件のみであれば下図のようにそのデバイスについての詳細なデータが出力されます。

一方、複数件ヒットした場合は下図のようにヒットしたデバイスが一覧形式で出力されます。

エドミステン氏は検索結果のURLを観察し、「?ID=」という文字列の存在で検索結果がどちらの表示なのかを判別できると突き止めました。

デバイスIDを表示する欄にはIDが付与されていなかったため先ほど入力欄にフォーカスする際に使用した「document.getElementById」を使用することはできません。エドミステン氏は代わりに、ドキュメント内の要素を一意に指定できる「XPath」を使用することにしました。XPathは開発者ツールで要素を右クリックし、「コピー」メニューから取得できます。

そしてノードの値を取得し、「window.navigator.clipboard.writeText」を使用してクリップボードにコピーするところまでをコード化できました。

同様に、複数件の結果が一覧表示されているページでは「一番古い結果」をコピーできるようにしたとのこと。

最後にデバイスIDをコピーするコードを「VM.shortcut.register」で囲うことで、「Ctrl＋Shift＋C」を押すことで自動でコピーできるように。

エドミステン氏は「時間が節約できただけでなく、キーボードから手を離す必要が減って楽になった」として「ウェブサイト上で反復的なタスクに負担を感じている場合はこうした自動化を強くお勧めする」と自動化を絶賛しました。