CloseWatcher API を試してみた
スタートアップのプロダクト開発支援をしている Gaji-Labo では、ユーザー体験とアクセシビリティを重視したウェブアプリケーション開発に参加させていただくことがあります。
私が参加しているプロジェクトでは、キーボード操作を担保したモーダルを表示する画面を多く作成しているのですが、そんな中、CloseWatcher API という新しい API について知る機会があったので試してみました。
この API は、独自実装したモーダルやダイアログなどのユーザーインターフェースを閉じる操作を扱うための新しい Web API です。
CloseWatcher API とは
CloseWatcher API は、ユーザーが「閉じる」操作を行ったときのイベント処理を標準化するための API です。具体的には以下のような操作を検知できます。
- Escape キーを押す
- Android デバイスで戻るボタンを押す
- Android デバイスでスワイプで戻る操作
現状のモーダルやポップアップを閉じる実装……特に Escape キーのハンドリングなどは UI ライブラリごとに独自に実装されていますし、もちろんゼロからコンポーネントを作成する場合はオリジナルの方法で実装する必要があります。
しかし、CloseWatcher API を使用すれば、これらの操作を ブラウザが提供する標準的な動作として扱えるようになるのです。
つまり、主な利点としては以下が挙げられます。
- ブラウザが ESC キーによる閉じる操作をネイティブサポートしてくれる
- UI ライブラリがそれぞれ独自に実装していた閉じる機能が標準化される
- それによりアクセシビリティを担保した実装がスムーズに行えるようになる
- CloseWatcher API さえ使用していれば、すべてのモーダルがほぼ同じ方法で閉じられるようになる
- ブラウザネイティブの実装により、パフォーマンスの向上が見込める
しかしながら、今のところまだブラウザのサポート状況は限られています。今のところ、Chrome と Edge の バージョン 126 以降でのみでしか使用できないのでご注意ください
CloseWatcher API の基本的な使い方
CloseWatcher を使用するには、インスタンスを作成し、イベントリスナーを設定するだけです。
// CloseWatcherのインスタンスを作成
const watcher = new CloseWatcher();
// closeイベントのリスナーを追加
watcher.addEventListener('close', () => {
// ユーザーが閉じる操作を行った時の処理
closeMyUI();
});
// 不要になったら破棄
watcher.destroy();単純なモーダル閉じるデモ
以下は CloseWatcher API を使った基本的なモーダルの実装例です。ESC キーを押すとモーダルが閉じます。（Chrome と Edge の バージョン 126 以降でのみ動作します）
上記のコードでは、モーダルが開かれると CloseWatcher のインスタンスが作成され、閉じる操作（ESC キー押下など）が検出されると handleClose 関数が実行されてモーダルが閉じられます。
閉じる操作をキャンセルする場合
閉じる操作に対して確認ダイアログを表示することもできます。CloseWatcher API では cancel イベントを使用することで、閉じる操作をキャンセルできます。（Chrome と Edge の バージョン 126 以降でのみ動作します）
ESC キーを押すと oncancel イベントが発火し、確認ダイアログを表示しています。さらに「閉じる」ボタンをクリックするとモーダルが閉じられます。
その他、細かい仕様については MDN Web Docs に掲載されていますので、ぜひご確認ください。
全ブラウザで使用できるようになってほしい
メジャーなところですと、まだ Chromium ベースのブラウザでしか使用できません（参考：https://caniuse.com/?search=CloseWatcher）が、この API に対応するだけでちょっとだけアクセシビリティフレンドリーなブラウザになるので、ぜひゆくゆくは全ブラウザで使用できるようになってほしい機能です。
標準的な API になった際は、ぜひ活用してみてください！
おわりに
Gaji-Labo では、CloseWatcher API のようなモダンな新しい機能を取り入れながら、スタートアップのプロダクト開発を支援しています。
フロントエンドエンジニアをはじめ、各職種でメンバーを募集しておりますので、興味のある方はぜひご案内資料をご覧ください！
Gaji-Labo フロントエンドエンジニア向けご案内資料
