クリップボードコピー（フィードバック付き）
ボタンを押すとコードをクリップボードへコピーし、成功した合図を見せるコピーボタンです。 navigator.clipboard.writeText() でテキストをコピーし、ボタンの文言を「コピーしました」に切り替えてアイコンをチェックに変え、一定時間後に元へ戻します。
解説
ボタンを押すとコードをクリップボードへコピーし、成功した合図を見せるコピーボタンです。navigator.clipboard.writeText() でテキストをコピーし、ボタンの文言を「コピーしました」に切り替えてアイコンをチェックに変え、一定時間後に元へ戻します。ラベルには aria-label を付けてあり、暗いコードブロック調の配色でターミナル風に見せています。フィードバックがあることで、押したのにコピーできたか分からない不安を解消できます。
向いている場面
- インストールコマンドや API キーを提示する技術ドキュメント
- クーポンコードや紹介コードを配布するページ
- 共有用 URL をワンタップで渡したい場面
コピー対象は ccf__code の中身を読み取るので、テキストを差し替えるだけで使い回せます。背景色やアクセントは CSS のクラスにまとまっています。navigator.clipboard は HTTPS など安全なコンテキストでのみ動くため、コピーに失敗した場合のフォールバックや、戻るまでの時間調整も合わせて検討すると堅牢です。
よくある質問
コピーする文字列を変えるにはどうしますか
ボタンが読み取るのはコード表示部分のテキストです。その中身を目的の文字列に書き換えれば、そのままコピー対象になります。複数置く場合はそれぞれの要素を参照するよう調整してください。
コピー機能が動かない環境はありますか
navigator.clipboard は HTTPS などの安全なコンテキストで動作します。file 形式で直接開いた場合や一部の古い環境では動かないことがあるため、その際のフォールバック処理を用意すると安心です。