Clipboard APIサポートの検出と使用方法

Clipboard API検出

モダンなClipboard APIは、古いdocument.execCommand('copy')アプローチに代わる、システムクリップボードの読み書き用の非同期インターフェースを提供します。

検出

const hasClipboard = !!navigator.clipboard;
const hasClipboardWrite = !!(
  navigator.clipboard && navigator.clipboard.writeText
);
const hasClipboardRead = !!(
  navigator.clipboard && navigator.clipboard.readText
);

クリップボードへの書き込み

async function copyText(text) {
  if (navigator.clipboard && navigator.clipboard.writeText) {
    await navigator.clipboard.writeText(text);
    return true;
  }
  // フォールバック
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  const success = document.execCommand('copy');
  document.body.removeChild(textarea);
  return success;
}

パーミッションとセキュリティ

• 書き込み: ユーザージェスチャーによってトリガーされた場合、通常パーミッションなしで許可
• 読み取り: Permissions APIを通じた明示的なユーザー許可が必要
• HTTPS: 非同期Clipboard APIに必要（HTTPではexecCommandにフォールバック）
• ユーザージェスチャー: ほとんどのブラウザでクリップボードアクセスに最近のユーザーインタラクション（クリック、キー入力）が必要
• クロスオリジンiframe: clipboard-writeとclipboard-readパーミッションポリシーが必要

リッチコンテンツ

ClipboardItem APIにより画像などのリッチコンテンツの書き込みが可能です：

const blob = new Blob([htmlContent], { type: 'text/html' });
const item = new ClipboardItem({ 'text/html': blob });
await navigator.clipboard.write([item]);