AI向け説明 AI Description

`I-009` は `navigator.clipboard.writeText()` API を使用してテキストをコピーします。コピー成功時にボタンのスタイルを変更し、ツールチップを表示してユーザーにフィードバックを与えます。

`I-009` uses the `navigator.clipboard.writeText()` API. It provides visual feedback by changing button style and showing a tooltip upon successful copy.

調整可能パラメータ Adjustable Parameters

• --success-bg — 成功時の背景色Success background color
• --feedback-duration — フィードバック表示時間Feedback display duration

実装 Implementation

HTML + CSS + JS

<button class="copy-btn" onclick="copy('some text')">Copy</button>
<style>
:root { --success-bg: #dafbe1; }
.copy-btn.copied { background: var(--success-bg); }
</style>
<script>
async function copy(text) {
  try {
    await navigator.clipboard.writeText(text);
    const btn = document.querySelector('.copy-btn');
    btn.classList.add('copied');
    setTimeout(() => btn.classList.remove('copied'), 2000);
  } catch (err) {
    console.error('Failed to copy', err);
  }
}
</script>

React (JSX + CSS)

// react/I-009.jsx
import { useState } from 'react';
import './I-009.css';

export default function CopyButton({ text }) {
  const [copied, setCopied] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(text);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <button className={`copy-btn ${copied ? 'copied' : ''}`} onClick={handleCopy}>
      {copied ? 'Copied!' : 'Copy'}
    </button>
  );
}

/* react/I-009.css */
/* I-009: React styles */
.copy-btn {
  background: #f5f7ff;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #5c6184;
  transition: all 0.2s;
  position: relative;
}

.copy-btn:hover {
  background: #e0e4f0;
  color: #1d2242;
}

.copy-btn::after {
  content: 'Copied!';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #1d2242;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s;
}

.copy-btn.copied::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.copy-btn.copied {
  background: #dafbe1;
  color: #1a7f37;
}