Zenn
Open2

【React/TypeScript】TextをCopyなどするnavigator.clipboard について📝

React
TypeScript
clipboard
まさぴょん🐱まさぴょん🐱

TextをCopyなどするnavigator.clipboard について📝

https://developer.mozilla.org/ja/docs/Web/API/Clipboard/readText

https://developer.mozilla.org/ja/docs/Web/API/Clipboard/writeText

navigator.clipboard は、ブラウザのクリップボード API を提供し、クリップボードとの読み書きを可能にするインターフェースです。
主にテキストやデータのコピー＆ペースト操作をプログラム的に行うために使用されます。

1. readText()

クリップボードからテキストデータを読み取るメソッド。

使い方

async function readFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    console.log('クリップボードの内容:', text);
  } catch (err) {
    console.error('読み取りに失敗しました:', err);
  }
}

readFromClipboard();

特徴

  • 戻り値: クリップボードのテキストを解決する Promise を返す。
  • 権限: クリップボード読み取りの許可が必要（通常、ユーザーのジェスチャーや権限プロンプトを伴う）。
  • 使用例: ユーザーがコピーしたテキストをアプリケーションで取得したい場合。

2. writeText(text)

クリップボードにテキストデータを書き込むメソッド。

使い方

async function writeToClipboard() {
  try {
    await navigator.clipboard.writeText('こんにちは！');
    console.log('テキストがクリップボードにコピーされました');
  } catch (err) {
    console.error('書き込みに失敗しました:', err);
  }
}

writeToClipboard();

特徴

  • 引数: コピーしたい文字列。
  • 戻り値: 書き込みが成功したかを示す Promise。
  • 権限: クリップボード書き込みの許可が必要。
  • 使用例: ボタンをクリックして特定のテキストをコピーする機能。

3. read()

クリップボードからデータ（テキストや画像など）を読み取るメソッド。readText() よりも汎用的で、複数のデータ形式を扱える。

使い方

async function readClipboardData() {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const item of clipboardItems) {
      for (const type of item.types) {
        const blob = await item.getType(type);
        console.log(`データ型: ${type}, 内容:`, blob);
      }
    }
  } catch (err) {
    console.error('読み取りに失敗しました:', err);
  }
}

readClipboardData();

特徴

  • 戻り値: クリップボードの内容を表す ClipboardItem オブジェクトの配列を解決する Promise。
  • 権限: クリップボード読み取り権限が必要。
  • 使用例: 画像やリッチテキストなど、テキスト以外のデータを取得する場合。

4. write(data)

クリップボードにデータ（テキストや画像など）を書き込むメソッド。writeText() よりも柔軟で、複数のデータ形式をサポート。

使い方

async function writeClipboardData() {
  try {
    const blob = new Blob(['<h1>こんにちは！</h1>'], { type: 'text/html' });
    const item = new ClipboardItem({ 'text/html': blob });
    await navigator.clipboard.write([item]);
    console.log('データがクリップボードにコピーされました');
  } catch (err) {
    console.error('書き込みに失敗しました:', err);
  }
}

writeClipboardData();

特徴

  • 引数: ClipboardItem オブジェクトの配列。
  • 戻り値: 書き込みが成功したかを示す Promise。
  • 権限: クリップボード書き込み権限が必要。
  • 使用例: HTMLや画像データをコピーする機能。

注意点

  1. ブラウザの互換性:

    • navigator.clipboard はモダンブラウザ（Chrome、Edge、Firefox、Safari など）でサポートされていますが、古いブラウザでは動作しません。
    • 特に read() と write() はサポートが限定的な場合があります。

  2. セキュリティと権限:

    • クリップボード操作にはユーザーの許可が必要です（通常、HTTPS 環境で動作）。
    • ユーザーのジェスチャー（クリックなど）が必要な場合が多い。
    • 権限をリクエストするには、Permissions API（navigator.permissions）を使用できます：
      const permission = await navigator.permissions.query({ name: 'clipboard-write' });
console.log(permission.state); // "granted", "denied", "prompt"

  3. 非同期処理:

    • すべてのメソッドは Promise を返すため、async/await または .then() を使用して処理します。

  4. 代替手段:

    • navigator.clipboard が使えない場合、従来の document.execCommand('copy') や document.execCommand('paste') をフォールバックとして使用可能（ただし非推奨）。

実際の使用例

以下は、ボタンを押すとテキストをクリップボードにコピーし、別のボタンでクリップボードの内容を読み取るサンプルです：

<!DOCTYPE html>
<html>
<body>
  <button onclick="copyText()">テキストをコピー</button>
  <button onclick="readText()">クリップボードを読み取る</button>
  <p id="output"></p>

  <script>
    async function copyText() {
      try {
        await navigator.clipboard.writeText('サンプルテキスト');
        document.getElementById('output').textContent = 'コピー成功！';
      } catch (err) {
        document.getElementById('output').textContent = 'コピー失敗: ' + err;
      }
    }

    async function readText() {
      try {
        const text = await navigator.clipboard.readText();
        document.getElementById('output').textContent = 'クリップボードの内容: ' + text;
      } catch (err) {
        document.getElementById('output').textContent = '読み取り失敗: ' + err;
      }
    }
  </script>
</body>
</html>

まとめ

  • readText(): クリップボードのテキストを読み取る。
  • writeText(): テキストをクリップボードに書き込む。
  • read(): テキストや画像などのデータを読み取る。
  • write(): テキストや画像などのデータを書き込む。
  • セキュリティや権限に注意し、HTTPS 環境で使用する。
  • 非同期処理（async/await）を活用して実装する。