JavaScriptでクリップボードの内容を読み取る際、`clipboard.readText()`メソッドを使用する方法を解説します。このメソッドを使えば、ユーザーのクリップボードからテキストを取得できます。

クリップボード読み取りの基本

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

セキュリティに関する注意点

クリップボードの読み取りには、以下のセキュリティ制限があります：

  • HTTPSまたはローカルホスト環境でのみ動作
  • ユーザーの許可が必要
  • アクティブなタブでのみ実行可能

実装例

// ボタンクリックでクリップボード読み取り
const button = document.querySelector('#readButton');
button.addEventListener('click', async () => {
  try {
    const clipboardText = await navigator.clipboard.readText();
    document.querySelector('#result').textContent = clipboardText;
  } catch (err) {
    alert('クリップボードの読み取りができません');
  }
});
<button id="readButton">クリップボード読み取り</button>
<div id="result"></div>

ブラウザ対応状況

  • Chrome 66以降
  • Firefox 63以降
  • Safari 13.1以降
  • Edge 79以降

よくあるエラーと解決策

1. `SecurityError`

- 原因：HTTPSでない環境での実行

- 解決策：HTTPSに移行する

2. `NotAllowedError`

- 原因：ユーザー許可がない

- 解決策：ユーザーに許可を求める

3. `TypeError`

- 原因：非対応ブラウザでの実行

- 解決策：フォールバック処理の実装

代替手段

古いブラウザをサポートする必要がある場合は、`document.execCommand('paste')`を使用できます：

function legacyReadClipboard() {
  const input = document.createElement('input');
  document.body.appendChild(input);
  input.focus();
  document.execCommand('paste');
  const text = input.value;
  document.body.removeChild(input);
  return text;
}

まとめ

  • `clipboard.readText()`はモダンなクリップボード読み取り方法
  • セキュリティ制限に注意が必要
  • 非対応ブラウザには代替手段を用意

クリップボード操作は多くのWebアプリケーションで必要とされる機能です。適切な実装とエラーハンドリングを行うことで、ユーザー体験を向上させることができます。