クリップボードコピーボタン
このパーツは、表示中のコードやコマンドを 1 クリックで端末のクリップボードへ写すコピーボタンです。左側の code 要素にテキストを置き、ボタン押下時に navigator.clipboard.writeText() で textContent をそのまま渡しています。
解説
このパーツは、表示中のコードやコマンドを 1 クリックで端末のクリップボードへ写すコピーボタンです。左側の code 要素にテキストを置き、ボタン押下時に navigator.clipboard.writeText() で textContent をそのまま渡しています。成功すると文言が「コピー済み！」に変わり、clipboard__btn--done クラスで色が緑に切り替わったあと、setTimeout で 2 秒後に元へ戻ります。コピー失敗時は catch でアラートを出すので、対応していない環境でも黙って止まりません。
使う場面
- インストールコマンドや API キーを案内する技術ドキュメント
- SNS シェア用のテキストや紹介コードを配るランディングページ
- 管理画面で発行した URL やトークンを利用者に渡すとき
カスタマイズはまず色から。ボタンの背景 #667eea と完了時の #10b981 をブランド色に置き換えれば馴染みます。コピー枠が狭いと長い文字列が省略されるので、text-overflow:ellipsis のままにするか折り返すかは内容で決めましょう。navigator.clipboard は HTTPS か localhost でしか動かない点と、完了表示は色だけでなく文言でも伝えている点が実用上の要です。
よくある質問
コピーする文字列はどこを書き換えればよいですか？
HTML の code 要素（id が code-text）の中身を差し替えるだけです。スクリプトはその textContent を読んでコピーするので、JavaScript 側を触る必要はありません。
ローカルのファイルを開いただけだとコピーできないのはなぜですか？
navigator.clipboard は安全なコンテキスト、つまり HTTPS か localhost でしか許可されていないためです。本番ではサーバー経由で配信すれば動作します。