JS でクリップボード API を使用する方法

1. Document.execCommand() メソッド

Document.execCommand() はクリップボードを操作するための従来の方法であり、さまざまなブラウザでサポートされています。

コピー、切り取り、貼り付けの 3 つの操作をサポートします。

document.execCommand('コピー')
document.execCommand('cut')
document.execCommand('貼り付け')

（１）コピー操作

コピーするときは、まずテキストを選択し、次に document.execCommand('copy') を呼び出すと、選択したテキストがクリップボードに追加されます。

定数 inputElement = document.querySelector('#input');
入力要素を選択します。
document.execCommand('コピー');

上記の例では、スクリプトは最初に inputElement inputElement (inputElement.select()) 内のテキストを選択し、次に document.execCommand('copy') を使用してそれをクリップボードにコピーします。

コピー操作は、ユーザーによってトリガーされるイベントリスニング関数 (たとえば、ユーザーがボタンをクリックする) に配置するのが最適であることに注意してください。一部のブラウザでは、スクリプトが自律的に実行されるとエラーが報告される場合があります。

（２）貼り付け操作

貼り付けるときに、document.execCommand('paste') を呼び出すと、クリップボードの内容が現在フォーカスされている要素に出力されます。

const pasteText = document.querySelector('#output');
貼り付けテキスト.focus();
document.execCommand('貼り付け');

（３）デメリット

Document.execCommand() メソッドは便利ですが、いくつか欠点もあります。

まず、選択したコンテンツのみをクリップボードにコピーすることができ、任意のコンテンツをクリップボードに書き込むことはできません。

第二に、これは同期操作であり、大量のデータをコピー/貼り付けすると、ページが遅くなります。一部のブラウザでは、ユーザーの許可を求めるプロンプトボックスが表示され、ユーザーが選択する前にページが応答しなくなります。

これらの問題を解決するために、ブラウザメーカーは非同期クリップボード API を提案しました。

2. 非同期クリップボードAPI

Clipboard API は、従来の document.execCommand() メソッドよりも強力で合理的な次世代のクリップボード操作メソッドです。

すべての操作は非同期であり、Promise オブジェクトを返すため、ページの遅延は発生しません。さらに、任意のコンテンツ（画像など）をクリップボードに入れることもできます。

navigator.clipboard プロパティは Clipboard オブジェクトを返し、すべての操作はこのオブジェクトを通じて実行されます。

定数clipboardObj = navigator.clipboard;

navigator.clipboard プロパティが undefined を返す場合、現在のブラウザがこの API をサポートしていないことを意味します。

ユーザーは機密データ (パスワードなど) をクリップボードに置く可能性があるため、スクリプトがそれを任意に読み取ることができるようにするとセキュリティ上のリスクが生じます。そのため、この API には多くのセキュリティ制限があります。

まず、Chrome ブラウザでは、HTTPS プロトコルを使用するページのみがこの API を使用できると規定されています。ただし、開発環境 (localhost) では暗号化されていないプロトコルの使用が許可されます。

次に、呼び出すときにユーザーの許可を明示的に取得する必要があります。権限の具体的な実装には、Permissions API を使用します。クリップボードに関連する権限には、clipboard-write (書き込み権限) と clipboard-read (読み取り権限) の 2 つがあります。「書き込み権限」はスクリプトに自動的に付与されますが、「読み取り権限」はユーザーが明示的に付与する必要があります。つまり、クリップボードへの書き込みはスクリプトによって自動的に実行されますが、クリップボードを読み取るときは、ブラウザが読み取りに同意するかどうかをユーザーに尋ねるダイアログボックスをポップアップ表示します。

さらに、スクリプトは常に現在のページのクリップボードを読み取ることに注意してください。これによって生じる問題の 1 つは、関連するコードを開発者ツールに貼り付けて直接実行すると、この時点での現在のページが Web ページではなく開発者ツールウィンドウであるため、エラーが発生する可能性があることです。

(非同期() => {
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log(テキスト);
})();

上記のコードを開発者ツールに貼り付けて実行すると、エラーが発生します。コードの実行中は、開発者ツールウィンドウが現在のページであり、このページには Clipboard API が依存する DOM インターフェイスがないためです。 1 つの解決策は、関連するコードを setTimeout() に入れて実行を遅らせ、関数を呼び出す前にブラウザページウィンドウをすばやくクリックして現在のページにすることです。

setTimeout(非同期() => {
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log(テキスト);
}, 2000);

上記のコードを開発者ツールに貼り付けて実行した後、Web ページのページウィンドウをすばやくクリックして現在のページにすると、エラーは報告されなくなります。

3. クリップボードオブジェクト

Clipboard オブジェクトは、クリップボードの読み取りと書き込みを行う 4 つのメソッドを提供します。これらはすべて Promise オブジェクトを返す非同期メソッドです。

3.1 クリップボード.readText()

Clipboard.readText() メソッドは、クリップボード内のテキストデータをコピーするために使用されます。

ドキュメント本体にイベントリスナーを追加します(
  'クリック'、
  非同期（e）=> {
    const テキスト = navigator.clipboard.readText() を待機します。
    console.log(テキスト);
  }
）

上記の例では、ユーザーがページをクリックすると、クリップボード内のテキストが出力されます。このとき、ブラウザにダイアログボックスが表示され、スクリプトがクリップボードを読み取ることを許可するかどうかをユーザーに尋ねることに注意してください。

ユーザーが同意しない場合、スクリプトはエラーを報告します。このとき、エラーを処理するために try...catch 構造を使用できます。

非同期関数 getClipboardContents() {
  試す {
    const テキスト = navigator.clipboard.readText() を待機します。
    console.log('貼り付けられたコンテンツ: ', text);
  } キャッチ (エラー) {
    console.error('クリップボードの内容の読み取りに失敗しました: ', err);
  }
}

3.2 クリップボード.read()

Clipboard.read() メソッドは、クリップボード内のデータ (テキストデータまたはバイナリデータ (画像など)) をコピーするために使用されます。この方法ではユーザーからの明示的な許可が必要です。

このメソッドは Promise オブジェクトを返します。オブジェクトの状態が解決されると、配列を取得できます。配列の各メンバーは ClipboardItem オブジェクトのインスタンスです。

非同期関数 getClipboardContents() {
  試す {
    const clipboardItems = navigator.clipboard.read() を待機します。
    for (const clipboardItem of clipboardItems) {
      for (clipboardItem.typesのconst型) {
        const blob = clipboardItem.getType(type); を待機します。
        console.log(URL.createObjectURL(blob));
      }
    }
  } キャッチ (エラー) {
    コンソールエラー(err.name、err.message);
  }
}

ClipboardItem オブジェクトは、単一のクリッピング項目を表します。各クリッピング項目には、ClipboardItem.types プロパティと ClipboardItem.getType() メソッドがあります。

ClipboardItem.types プロパティは、クリップボード項目で使用可能な MIME タイプをメンバーとする配列を返します。たとえば、クリップボード項目を HTML 形式またはプレーンテキスト形式で貼り付けることができる場合、2 つの MIME タイプ (text/html と text/plain) が存在します。

ClipboardItem.getType(type) メソッドは、クリップボード項目のデータを読み取るために使用され、Promise オブジェクトを返します。このメソッドは、クリップアイテムの MIME タイプをパラメータとして受け入れ、そのタイプのデータを返します。このパラメータは必須です。指定しないと、エラーが報告されます。

3.3 クリップボード.writeText()

Clipboard.writeText() メソッドは、テキストコンテンツをクリップボードに書き込むために使用されます。

ドキュメント本体にイベントリスナーを追加します(
  'クリック'、
  非同期（e）=> {
    navigator.clipboard.writeText('Yo') を待ちます。
  }
）

上記の例は、ユーザーが Web ページをクリックした後、スクリプトがテキストデータをクリップボードに書き込むことを示しています。

このメソッドはユーザーの許可を必要としませんが、エラーを防ぐために try...catch 内に配置するのが最適です。

非同期関数 copyPageUrl() {
  試す {
    navigator.clipboard.writeText(location.href) を待機します。
    console.log('ページURLがクリップボードにコピーされました');
  } キャッチ (エラー) {
    console.error('コピーに失敗しました: ', err);
  }
}

3.4 クリップボード.write()

Clipboard.write() メソッドは、テキストデータまたはバイナリデータなど任意のデータをクリップボードに書き込むために使用されます。

このメソッドは、クリップボードに書き込まれるデータを表す ClipboardItem インスタンスをパラメーターとして受け入れます。

試す {
  const imgURL = 'https://dummyimage.com/300.png';
  const data = await fetch(imgURL);
  const blob = data.blob() を待機します。
  ナビゲータ.クリップボード.書き込み([
    新しいクリップボードアイテム({
      [blob.type]: ブロブ
    })
  ]);
  console.log('画像をコピーしました。');
} キャッチ (エラー) {
  コンソールエラー(err.name、err.message);
}

上記の例では、スクリプトは画像をクリップボードに書き込みます。 Chrome は現在 PNG 形式の画像の書き込みのみをサポートしていることに注意してください。

ClipboardItem() は、ブラウザによってネイティブに提供されるコンストラクターで、ClipboardItem インスタンスを生成するために使用されます。これは、オブジェクトをパラメーターとして受け入れます。オブジェクトのキー名はデータの MIME タイプであり、キー値はデータそのものです。

次の例では、同じクリップ項目の値を複数の形式でクリップボードに書き込みます。1 つはテキストデータ、もう 1 つはバイナリデータで、さまざまな場面で貼り付けられるようにします。

関数コピー() {
  const image = await fetch('kitten.png');
  const text = new Blob(['かわいい眠っている子猫'], {type: 'text/plain'});
  const item = 新しいクリップボードアイテム({
    'text/plain': テキスト、
    'image/png': 画像
  });
  navigator.clipboard.write([item]) を待機します。
}

4. イベントのコピー、イベントの切り取り

ユーザーがクリップボードにデータを入れると、コピーイベントがトリガーされます。

次の例では、ユーザーがクリップボードに入力したテキストを大文字に変換します。

定数ソース = document.querySelector('.source');

source.addEventListener('コピー', (イベント) => {
  定数選択 = document.getSelection();
  イベント.クリップボードデータ.setData('text/plain', 選択.toString().toUpperCase());
  イベントをデフォルトにしない();
});

上記の例では、イベントオブジェクトの clipboardData プロパティにクリップボードデータが含まれています。以下のプロパティとメソッドを持つオブジェクトです。

Event.clipboardData.setData(type, data): クリップボードデータを変更します。データ型を指定する必要があります。
Event.clipboardData.getData(type): クリップボードデータを取得します。データ型を指定する必要があります。
Event.clipboardData.clearData([type]): クリップボードのデータをクリアします。データ型を指定できます。タイプを指定しない場合は、すべてのタイプのデータがクリアされます。
Event.clipboardData.items: すべてのクリップボード項目を含む配列のようなオブジェクトですが、通常はクリップボード項目は 1 つだけです。

次の例では、ユーザーのコピー操作をインターセプトし、指定されたコンテンツをクリップボードに格納します。

定数クリップボードアイテム = [];

document.addEventListener('コピー', async (e) => {
  e.preventDefault();
  試す {
    クリップボードアイテムを [] にします。
    (e.clipboardData.items の定数項目) {
      if (!item.type.startsWith('image/')) {
        続く;
      }
      クリップボードアイテム.push()
        新しいクリップボードアイテム({
          [アイテム.タイプ]: アイテム、
        })
      );
      navigator.clipboard.write(clipboardItems); を待機します。
      console.log('画像をコピーしました。');
    }
  } キャッチ (エラー) {
    コンソールエラー(err.name、err.message);
  }
});

上記の例では、e.preventDefault() を使用してクリップボードのデフォルト操作をキャンセルし、スクリプトがコピー操作を引き継ぎます。

カットイベントは、ユーザーがカット操作を実行したときにトリガーされます。処理はコピーイベントとまったく同じで、カットデータは Event.clipboardData プロパティから取得されます。

5. イベントを貼り付ける

ユーザーがクリップボードのデータを使用して貼り付けると、貼り付けイベントがトリガーされます。

次の例では、貼り付け操作をインターセプトし、スクリプトを使用してクリップボードからデータを取得します。

document.addEventListener('貼り付け', 非同期(e) => {
  e.preventDefault();
  const テキスト = navigator.clipboard.readText() を待機します。
  console.log('貼り付けられたテキスト: ', text);
});

以上が、JS が Clipboard API を使用してクリップボードを操作する方法の詳細です。JS がクリップボードを使用する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません: