URLとタイトルをクリップボードにコピーする

ウェブサイトで特定の情報（例えば、記事のタイトルやURL）をクリップボードにコピーする機能は、ユーザーが情報を簡単に共有できるようにする便利な機能です。
今回はJavaScriptとHTMLを用いて実装します。

必要なツール
サンプルコード

必要なツール

HTML
JavaScript

サンプルコード

以下のコードは、記事のタイトルとURLをクリップボードにコピーするボタンを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>URLとタイトルをクリップボードにコピー</title>
</head>
<body>
    <h1 id="blog-title">ブログタイトル</h1>

    <!-- "コピー" ボタン -->
    <button onclick="copyToClipboard()">コピー</button>

    <!-- JavaScript部分 -->
    <script>
        function copyToClipboard() {
            const blogTitle = document.getElementById('blog-title').innerText;
            const url = window.location.href;
            const textToCopy = `タイトル: ${blogTitle}\nURL: ${url}`;

            // テキストエリアを作成
            var textarea = document.createElement("textarea");
            textarea.textContent = textToCopy;
            document.body.appendChild(textarea);

            // テキストエリアを選択
            textarea.select();

            try {
                // クリップボードにコピー
                document.execCommand("copy");
                alert('クリップボードにコピーしました');
            } catch (err) {
                console.error('クリップボードにコピーできませんでした', err);
            } finally {
                // テキストエリアを削除
                document.body.removeChild(textarea);
            }
        }
    </script>

</body>
</html>

このスクリプトは、ボタンがクリックされると、ブログのタイトルとURLを組み合わせた文字列をクリップボードにコピーします。
その後「クリップボードにコピーしました」というアラートメッセージを表示します。
クリップボードへのコピーが何らかの理由で失敗した場合、エラーメッセージがコンソールに出力されます。

以上がブログのタイトルとURLをクリップボードにコピーするための基本的な実装です。
この方法を用いることで、ユーザーはブログの記事を簡単に他人と共有できるようになります。