クリップボードコピーボタン
このコピーボタンは、コードブロックの内容をワンクリックでクリップボードへ写すユーティリティです。 copyCode 関数が対象要素の textContent を読み取り、 navigator.clipboard.writeText でコピーします。
解説
このコピーボタンは、コードブロックの内容をワンクリックでクリップボードへ写すユーティリティです。copyCode 関数が対象要素の textContent を読み取り、navigator.clipboard.writeText でコピーします。成功すると then の中でボタンの文言を「コピー済み！」に変え、is-copied クラスを付けて見た目を変化させ、2秒後に元へ戻します。これにより、ユーザーは確かにコピーできたことを目で確認できます。ダークなコードブロックの右上にボタンを配置した、よくある開発者向けの配色です。
使う場面
- 技術ブログやドキュメントのコードサンプル
- クーポンコードや紹介コードの提示
- API キーや設定値のコピー欄
コピー対象は id="code-content" の要素なので、表示するコードを差し替えるだけで使えます。成功時の文言や戻すまでの時間（2000）は自由に調整可能です。navigator.clipboard は安全な接続（HTTPS または localhost）でのみ動作する点に注意してください。古いブラウザ向けに保険を残すなら、失敗時のフォールバックを catch で用意すると安心です。
よくある質問
コピーボタンがローカルで動きません。
navigator.clipboardはセキュリティ上、HTTPSまたはlocalhost環境でのみ動作します。file://で直接開いた場合やHTTP接続では使えないことがあります。ローカル確認の際はlocalhostのサーバー経由で開いてください。
コピーした後のメッセージ表示を長くできますか？
できます。JavaScriptのsetTimeoutに指定した2000という数値がミリ秒単位で、コピー済み表示を戻すまでの時間です。3000にすれば3秒間「コピー済み」のままになります。