[HTML] コードブロックにコピーボタンを設置する

---

目次[非表示]

• 1.【コピー用のボタンを配置したい】
• 2.【サンプルコード】
• 3.【解説】

【コピー用のボタンを配置したい】

当ブログでは、様々なサンプルコードを紹介するケースがたびたびあります。
そこで、コードをワンタッチでコピーできるほうが便利だと思い、コピー用のボタンを設置しました。

下のサンプルコードを使うと、こんな感じ↓になります。

【サンプルコード】

<style>
     <!-- preタグの書式 -->
    .copy-pre {
        position: relative; <!-- absoluteに対する親要素 -->
    }
     <!-- コピーボタンの書式 -->
    .copy-button {
        position: absolute; <!-- コピーボタンを絶対位置に配置 -->
        right: 10px; top: 10px; <!-- 右上 -->
        cursor: pointer;
        color: black; <!-- 色や形はご自由に -->
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 5px;
    }
</style>

<!-- 1つ目のコードブロック -->
<pre class="copy-pre"><code id="code1">#include <stdio.h>

main()
{
  printf("Hello World\n");
}</code><button class="copy-button" onclick="copyToClipboard('code1', this)">コピー</button>
</pre>

<!-- 2つ目のコードブロック -->
<pre class="copy-pre"><code id="code2">class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, world.");
    }
}</code><button class="copy-button" onclick="copyToClipboard('code2', this)">コピー</button>
</pre>

<!-- 3つ目のコードブロック -->
<pre class="copy-pre"><code id="code3">&lt;div&gt;
  Hello, world.
&lt;/div&gt;</code><button class="copy-button" onclick="copyToClipboard('code3', this)">コピー</button>
</pre>

<!-- コピーボタン用スクリプト -->
<script>
    function copyToClipboard(codeId, button) {
        const codeElement = document.getElementById(codeId);
        const textToCopy = codeElement.innerText;

        navigator.clipboard.writeText(textToCopy).then(() => {
            // ボタンの文字列を「完了!」に変更
            button.innerText = '完了!';
            // 1秒後に元の文字列に戻す
            setTimeout(() => {
                button.innerText = 'コピー';
            }, 1000);
        }).catch(err => {
            console.error('コピーに失敗しました: ', err);
        });
    }
</script>

【解説】

■書式
次の２つは必須です。その他は任意のものでよいでしょう。
preタグ　position: relative;
ボタン　position: absolute;
これによって、ボタンをpre内の特定の位置に配置することができます。

■ID
各codeタグにIDを設定します。
そして、各ボタンの関数copyToClipboardの引数にIDを指定します。
これによって、ボタンごとのコピー対象範囲を定義します。

■スクリプト
関数copyToClipboardの動作を定義します。
ボタンから渡されたIDを参照して、codeタグの内容を読み取ります。
また、コピー処理の完了を示すために、ボタンの文字列を一時的に変更する処理を入れました。
ちなみに、codeタグ内の「&lt;」などの特殊文字も、ちゃんと表示されるとおりに「<」でコピーされます。