← カテゴリ一覧に戻る

クリップボードへのコピー

navigator.clipboard.writeText readText

Clipboard APIを使ってテキストをクリップボードへコピーします。モダンで安全な方法です。

デモ：コピー機能

よくある「コピーボタン」パターン：

コマンドnpm install @anthropic-ai/sdk
URLhttps://example.com/api/v1/users
コードconst greet = (name) => `Hello, ${name}!`;

コード例

js
// ✅ モダンなClipboard API（推奨）
async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    showToast('コピーしました！');
  } catch (err) {
    console.error('コピー失敗:', err);
    // フォールバック（旧ブラウザ対応）
    fallbackCopy(text);
  }
}

// クリップボードの読み取り（許可が必要）
async function readFromClipboard() {
  try {
    const text = await navigator.clipboard.readText();
    return text;
  } catch (err) {
    console.error('読み取り失敗:', err);
  }
}

// 画像のコピー（ClipboardItem）
async function copyImage(imageBlob) {
  await navigator.clipboard.write([
    new ClipboardItem({ 'image/png': imageBlob })
  ]);
}

// 旧ブラウザのフォールバック
function fallbackCopy(text) {
  const textarea = document.createElement('textarea');
  textarea.value = text;
  textarea.style.position = 'fixed';
  textarea.style.opacity = '0';
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand('copy'); // ⚠️ 非推奨
  document.body.removeChild(textarea);
}

// セキュリティ注意：readText は HTTPS + ユーザー操作 + 許可が必要

比較：Clipboard API vs execCommand

観点Clipboard API（推奨）execCommand('copy')（非推奨）
非同期✅ Promise❌ 同期
画像・リッチテキスト✅ ClipboardItemで対応❌ テキストのみ
HTTPS必須✅（セキュア）❌ HTTP可（危険）
廃止予定—⚠️ 非推奨（仕様から削除予定）

🤖 AIプロンプトテンプレート

以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。

- navigator.clipboard.writeText/readTextを使ったクリップボード操作のサンプルを示す
- テキストをクリップボードにコピーするボタンUIのサンプルを含める
- クリップボードからテキストを読み取る（ペースト）機能の例を含める
- clipboard-writeとclipboard-read権限の確認・リクエスト処理を示す
- コピー成功・失敗のフィードバックUIのサンプルを含める
- コメントは日本語で記述する

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo