クリップボードコピーボタン
このボタンは、コードブロックの中身をワンクリックでコピーするユーティリティです。仕組みはシンプルで、ボタンの data-target 属性で対象要素の id を指定し、クリック時に navigator.clipboard.writeText() でその要素のテキストをクリップボードへ書き込みます。
解説
このボタンは、コードブロックの中身をワンクリックでコピーするユーティリティです。仕組みはシンプルで、ボタンの data-target 属性で対象要素の id を指定し、クリック時に navigator.clipboard.writeText() でその要素のテキストをクリップボードへ書き込みます。コピー後はボタンに is-copied クラスを付け、ラベルを「コピー済」に、アイコンをチェックマークに切り替えて、操作が成功したことを視覚的に伝えます。
使う場面
- 技術ブログやドキュメントで、インストールコマンドや設定例を読者にコピーさせたいとき
- API キーや招待コードなど、手入力ミスを避けたい文字列を渡すとき
- SNS シェア用のハッシュタグや定型文をまとめて配布するとき
色やアイコンの変更は CSS の .copy-block__btn 周りで完結します。navigator.clipboard は HTTPS か localhost でのみ動作するため、本番はSSL環境が前提です。アクセシビリティ面では aria-label を付けてアイコンだけのボタンでも読み上げられるようにしています。コピー成功後に元の表示へ戻したい場合は、setTimeout で is-copied クラスを外す処理を足すと親切です。
よくある質問
ローカルで動くのに公開サイトでコピーできません
navigator.clipboard はセキュアな文脈、つまり HTTPS か localhost でしか動きません。http のままの本番環境では使えないため、SSL を有効にしてください。古いブラウザ向けには document.execCommand を使ったフォールバックを足す方法もあります。
複数のコードブロックに同じボタンを使えますか
使えます。コピー対象の要素ごとに別の id を振り、各ボタンの data-target にその id を指定すれば、1つのスクリプトで複数のブロックに対応できます。本コードは querySelectorAll で全ボタンに一括でイベントを登録しています。