公開日: 2025 年 9 月 23 日
clipboardchange イベントは、Microsoft Edge チームによって Chrome に追加された新機能です。これにより、ポーリングのパフォーマンス オーバーヘッドなしで、クリップボードの変更を効率的にモニタリングできます。
バージョン 140 以降では、Chrome と Edge の両方でオリジン トライアルを使用して clipboardchange イベントをテストできるようになりました。この新機能のテスト中にご意見やご感想がございましたら、ぜひお聞かせください。最終的には、この機能を標準化したいと考えています。
クリップボードをポーリングして変更を検出する際の課題
システム クリップボードで利用可能なコンテンツを確認するには、非効率的なポーリング メソッドを使用する必要があります。たとえば、テキスト編集ウェブアプリでは、クリップボードにテキスト、画像、HTML コンテンツのいずれが含まれているかに応じて、異なる「貼り付け」ボタンを有効にすることが考えられます。
これを実現する現在のアプローチでは、次のコード スニペットに示すように、navigator.clipboard.read() メソッドを繰り返し呼び出してクリップボードの内容を確認する必要があります。
// Inefficient polling approach
setInterval(async () => {
try {
const clipboardItems = await navigator.clipboard.read();
updatePasteButtons(clipboardItems);
} catch (err) {
console.error('Failed to read clipboard:', err);
}
}, 1000); // Poll every second
これは機能しますが、大きな欠点もあります。
パフォーマンスへの影響
クリップボードを常にポーリングすると、不要なオーバーヘッドが発生します。navigator.clipboard.read() の呼び出しごとにシステムレベルのクリップボード アクセスが必要になるため、特にリソースが制約されているデバイスでは、アプリのパフォーマンスに悪影響を及ぼす可能性があります。ポーリング頻度は、応答性とパフォーマンスのトレードオフになります。
バッテリーの消耗
モバイル デバイスでは、ユーザーがコンテンツをアクティブにコピーまたは貼り付けしていない場合でも、アプリがシステム リソースに継続的にアクセスするため、クリップボードのポーリングを頻繁に行うとバッテリーの消耗につながる可能性があります。
ユーザー エクスペリエンスの不整合
ポーリング間隔により、コンテンツがコピーされてから、新しいクリップボードの状態を反映するように UI が更新されるまでの間に遅延が生じます。ユーザーには、古い貼り付けボタンの状態が表示されたり、正しいオプションが一時的に利用できなくなったりする場合があります。
過剰なポーリングによるプライバシーに関する懸念
クリップボードへの頻繁なアクセスは、プライバシーに関する懸念を引き起こす可能性があります。クリップボードのデータが変更されていない場合でも、アプリがクリップボードのデータを継続的に読み取っているためです。クリップボードの内容についてプライバシーを重視するユーザーにとっては、この機能が煩わしく感じられる可能性があります。
clipboardchange イベント
こうした課題に対処するため、clipboardchange という新しいイベントを実装し、Edge と Chrome の両方でオリジン トライアルを開始します。これにより、アプリでテストできるようになります。
このイベントを使用すると、ウェブ アプリケーションはクリップボードの変更を積極的にポーリングするのではなく、リアクティブに応答できます。コンテンツが任意のアプリからクリップボードにコピーまたは切り取られたとき、クリップボードがクリアされたとき、コンテンツが貼り付けられたとき（場合によってはクリップボードがクリアされることがあります）に自動的に起動します。このイベントは、ドキュメントにフォーカスがある場合にのみ発生します。
次のように navigator.clipboard インターフェースにリスナーを追加することで、clipboardchange イベントをリッスンできます。
navigator.clipboard.addEventListener('clipboardchange', event => {
console.log('Clipboard content changed!');
console.log('Available MIME types:', event.types);
// Update UI based on available formats
updatePasteButtons(event.types);
});
主なメリット
clipboardchange イベントには、ポーリングよりも次のようなメリットがあります。
- 効率的: 変更が実際に発生した場合にのみイベントが発生します。
- プライバシー保護: イベントは実際のコンテンツではなく、ネイティブ MIME タイプのみを公開します。
- 権限のプロンプトが表示されない: 機密データが公開されないため、ユーザーの権限は必要ありません。
- リアルタイムの応答性: クリップボードのコンテンツが変更されると、UI がすぐに更新されます。
- フォーカス認識: ドキュメントにフォーカスがある場合にのみイベントがトリガーされます。
types プロパティ
clipboardchange イベント オブジェクトには、クリップボードで使用可能な MIME タイプの配列を含む types プロパティが含まれています。
navigator.clipboard.addEventListener('clipboardchange', event => {
// Example types array: ['text/plain', 'text/html', 'image/png']
const hasText = event.types.includes('text/plain');
const hasImage = event.types.includes('image/png');
const hasHtml = event.types.includes('text/html');
// Enable/disable paste buttons accordingly
document.getElementById('paste-text').disabled = !hasText;
document.getElementById('paste-image').disabled = !hasImage;
document.getElementById('paste-html').disabled = !hasHtml;
});
フォーカスの動作
ドキュメントがフォーカスされていない間にクリップボードの変更が発生した場合、ドキュメントがシステムのフォーカスを取り戻したときに 1 つの clipboardchange イベントが発火します。クリップボードの変更に関する過去の情報は利用できません。ページがフォーカスを取得したときに利用可能なタイプのみが types メンバーに含まれます。
Test the clipboardchange event today
新しい clipboardchange イベントは、本日よりテストできます。
- ローカルで、ブラウザでのみこの機能を有効にする。
- または、オリジン トライアルに登録して、本番環境のウェブ アプリケーションで有効にします。
互換性を高めるために clipboardchange イベントを検出する
まず、これは新機能であるため、使用する前にサポートを検出する必要があります。これは、次の例に示すように、navigator.clipboard の onclipboardchange プロパティの存在をテストすることで実現できます。
if ('onclipboardchange' in navigator.clipboard) {
// The clipboardchange event is supported
navigator.clipboard.addEventListener('clipboardchange', handleClipboardChange);
} else {
// Fallback to polling or other methods
console.log('clipboardchange event not supported, using fallback');
setInterval(checkClipboard, 2000);
}
ローカルでテストする
ブラウザでのみ clipboardchange イベントをテストするには:
- [
about://flags] ページを開きます。 - [Search flags] ボックスで
ClipboardChangeEventを検索します。 - プルダウンを使用して、値を [Default] から [Enabled] に変更します。
- ブラウザを再起動する。
オリジン トライアルに登録する
実際のユーザーでサイトの clipboardchange イベントを試すには、Chrome または Edge でオリジン トライアルに登録します。オリジン トライアルは、Chrome と Edge のバージョン 140 ～ 142（2025 年 9 月 2 日～ 2025 年 12 月 2 日）で実施されます。
オリジン トライアルの詳細と開始方法については、オリジン トライアルのスタートガイドをご覧ください。
デモ
イベントの動作を確認するには、デモを試して、GitHub のソースコードをご覧ください。
このデモでは、clipboardchange イベントを使用して、クリップボードの内容に基づいて自動的に更新されるレスポンシブな貼り付けインターフェースを作成する方法を示します。
さまざまな種類のコンテンツ（テキスト、画像、HTML）をコピーして、貼り付けボタンがポーリングなしでリアルタイムに有効になったり無効になったりする様子をご覧ください。
フィードバック
clipboardchange イベントがお客様のユースケースでどのように機能するかについて、ぜひご意見をお聞かせください。フィードバックは、W3C/clipboard-apis リポジトリで問題を作成して送信してください。
お客様の興味に関する公開シグナルは、この機能の重要性を Google や他のブラウザが理解するのに役立ち、標準化プロセスに反映される可能性があります。
このイベントはプログレッシブ エンハンスメントとして使用できますが、Clipboard API 仕様の一部として標準化し、最終的にはすべてのブラウザで採用されることを目指しています。当面は、ポーリングや他のクリップボード モニタリング手法にフォールバックできます。