クリップボードコピー（成功フィードバック付き）
ボタンを押すとコード片を一発でコピーし、ラベルを一時的にコピー済みへ変えて成功を知らせるUIです。コピーは標準の navigator.clipboard.writeText で行い、 data-copy 属性に入れた文字列をそのまま書き込みます。
解説
ボタンを押すとコード片を一発でコピーし、ラベルを一時的にコピー済みへ変えて成功を知らせるUIです。コピーは標準の navigator.clipboard.writeText で行い、data-copy 属性に入れた文字列をそのまま書き込みます。押した直後にボタンの文言と色を切り替え、約1.5秒後に元へ戻すことで、操作が成功したことが直感的に伝わります。
コマンド例の提示、APIキーや招待コードの配布、ドキュメントのインストール手順など、利用者に文字列をそのまま使ってほしい場面で重宝します。手入力のミスを防ぎ、操作の手間を一段減らせます。
カスタマイズと注意
- コピーする内容は
data-copyの値を書き換えるだけで変えられます。 - 成功時の色は
is-doneクラスの背景色で調整します。 - クリップボードAPIは安全な接続（HTTPS）または開発時の localhost で動作します。古い環境向けには代替手段を用意すると確実です。
よくある質問
コピーする文字列はどこで変えますか。
ボタンのdata-copy属性に入っている値を書き換えてください。表示用のコード部分とdata-copyの両方を同じ内容に揃えておくと混乱しません。
どの環境でも動きますか。
クリップボードAPIはHTTPS接続か開発時のlocalhostで動作します。HTTP接続の本番環境では動かないことがあるため、公開時はHTTPS化を確認してください。