【JavaScript】クリップボードにコピーする方法｜Clipboard API・writeText・フォールバック・コピー成功通知・HTTPS 制限まで解説

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    console.log("コピーしました:", text);
  } catch (err) {
    console.error("コピーに失敗しました:", err);
  }
}

// ボタンクリックでコピー
document.getElementById("copyBtn").addEventListener("click", () => {
  copyToClipboard("コピーするテキスト");
});

document.getElementById("copyBtn").addEventListener("click", async () => {
  const text = document.getElementById("inputField").value;
  await navigator.clipboard.writeText(text);
});

document.getElementById("copyBtn").addEventListener("click", async () => {
  const text = document.getElementById("codeBlock").textContent;
  await navigator.clipboard.writeText(text);
});

function fallbackCopyText(text) {
  const textarea = document.createElement("textarea");
  textarea.value = text;

  // 画面外に配置（ちらつき防止）
  textarea.style.position = "fixed";
  textarea.style.left = "-9999px";
  textarea.style.top = "-9999px";

  document.body.appendChild(textarea);
  textarea.select();

  try {
    document.execCommand("copy");
    console.log("コピーしました（fallback）");
  } catch (err) {
    console.error("コピーに失敗しました:", err);
  }

  document.body.removeChild(textarea);
}

async function copyText(text) {
  if (navigator.clipboard && window.isSecureContext) {
    // Clipboard API が使える環境
    await navigator.clipboard.writeText(text);
  } else {
    // フォールバック
    fallbackCopyText(text);
  }
}

const copyBtn = document.getElementById("copyBtn");

copyBtn.addEventListener("click", async () => {
  const text = document.getElementById("code").textContent;

  try {
    await navigator.clipboard.writeText(text);

    // ボタンテキストを変更
    const original = copyBtn.textContent;
    copyBtn.textContent = "コピーしました！";
    copyBtn.disabled = true;

    // 2秒後に元に戻す
    setTimeout(() => {
      copyBtn.textContent = original;
      copyBtn.disabled = false;
    }, 2000);
  } catch (err) {
    copyBtn.textContent = "コピー失敗";
  }
});

function showToast(message, duration = 2000) {
  const toast = document.createElement("div");
  toast.className = "toast";
  toast.textContent = message;
  document.body.appendChild(toast);

  // フェードインのため少し遅延
  requestAnimationFrame(() => toast.classList.add("show"));

  setTimeout(() => {
    toast.classList.remove("show");
    toast.addEventListener("transitionend", () => toast.remove());
  }, duration);
}

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #333;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

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

async function copyHTML(htmlString) {
  const blob = new Blob([htmlString], { type: "text/html" });
  const item = new ClipboardItem({ "text/html": blob });
  await navigator.clipboard.write([item]);
}

// 太字テキストとしてコピー
copyHTML("<strong>重要なお知らせ</strong>");
// → Word や Gmail に貼り付けると太字で表示される

document.querySelectorAll("pre").forEach(pre => {
  const btn = document.createElement("button");
  btn.className = "copy-btn";
  btn.textContent = "コピー";

  btn.addEventListener("click", async () => {
    await navigator.clipboard.writeText(pre.textContent);
    btn.textContent = "コピー済み";
    setTimeout(() => btn.textContent = "コピー", 2000);
  });

  // pre の親要素に相対配置を設定してボタンを右上に配置
  pre.style.position = "relative";
  btn.style.cssText = "position:absolute;top:8px;right:8px;";
  pre.appendChild(btn);
});

document.getElementById("shareBtn").addEventListener("click", async () => {
  await navigator.clipboard.writeText(window.location.href);
  showToast("URLをコピーしました");
});

<div class="coupon">
  <span id="couponCode">SAVE20OFF</span>
  <button id="copyCoupon">コピー</button>
</div>

document.getElementById("copyCoupon").addEventListener("click", async () => {
  const code = document.getElementById("couponCode").textContent;
  await navigator.clipboard.writeText(code);

  const btn = document.getElementById("copyCoupon");
  btn.textContent = "コピー済み ✓";
  setTimeout(() => btn.textContent = "コピー", 2000);
});