コピーボタン（クリップボード API）
navigator.clipboard.writeText() でテキストをクリップボードへコピーする実装。コピー成功時のチェック表示・フォールバック対応付き。
解説
ボタンを押すとテキストをクリップボードへ写し、成功するとチェックマークと「Copied!」表示に切り替わるコピーボタンです。コピー処理にはブラウザ標準の navigator.clipboard.writeText を使い、Promise が解決したら copied クラスを付けてボタンの色を緑に変え、一定時間後（ここでは 1.5 秒）に元のラベルへ戻します。コピー対象は data-text 属性に持たせているため、HTML を書き換えるだけで何をコピーするか差し替えられます。手作業の選択コピーが要らなくなり、入力ミスも防げます。
使うと便利な場面
- コードブロックやコマンドのワンクリックコピー
- クーポンコード・紹介コードの取得
- 電話番号・住所・口座番号などのコピー欄
コピーする文字列は data-text、成功色は .cp-btn.copied の background で変えられます。フィードバックの表示時間は setTimeout の値で調整します。注意点として、navigator.clipboard は https など安全なコンテキストでのみ動きます。古い環境を支える場合は失敗時のフォールバックや、文言だけ変えるエラー表示を用意すると安心です。アイコンはインライン SVG なので外部フォントに依存しません。
使用例・適したシーン
- コードブロック
- 電話番号・住所コピー
- クーポンコードの配布
よくある質問
コピーする内容はどう指定しますか
ボタンの data-text 属性にコピーしたい文字列を書きます。表示しているテキストと別の値もコピーできるため、見せる文言とコピー内容を分けたいときにも使えます。
動かない環境はありますか
navigator.clipboard は https などの安全なコンテキストでのみ動作します。http のローカル検証や一部の古いブラウザでは失敗することがあるため、本番は https で運用し、失敗時に案内を出すフォールバックを足すと安心です。