Clipboard APIを使ってボタンクリック時にテキストをクリップボードにコピーする方法

2024-04-02

jQuery、HTML、CSSを用いた「ボタンをクリックしてクリップボードにコピーする」機能の実装

準備

以下のファイルを準備します。

index.html
style.css
script.js

HTML

以下のコードを index.html に記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリップボードコピー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>コピーしたいテキスト</h1>
    <p id="copy-target">ここにコピーしたいテキストを入力します</p>
    <button id="copy-button">コピー</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

<h1> タグ: ページタイトル
#copy-target 要素: コピーしたいテキストを記述する要素
#copy-button 要素: コピーボタン

CSS

body {
  font-family: sans-serif;
}

.container {
  width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
}

#copy-target {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

#copy-button {
  padding: 5px 10px;
  border: 1px solid #000;
  cursor: pointer;
}

上記コードは、ボタンやテキストボックスのスタイルを設定しています。

JavaScript

$(function() {
  $('#copy-button').click(function() {
    const copyText = $('#copy-target').text();
    navigator.clipboard.writeText(copyText).then(() => {
      alert('コピーしました！');
    });
  });
});

上記コードは、以下の処理を行います。
1. #copy-button 要素がクリックされたら、#copy-target 要素内のテキストを取得
2. navigator.clipboard.writeText メソッドを用いて、取得したテキストをクリップボードにコピー
3. コピー成功時にアラートを表示

実行

ブラウザで index.html を開き、「コピー」ボタンをクリックすると、#copy-target 要素内のテキストがクリップボードにコピーされます。

補足

上記コードは、ブラウザが Clipboard API に対応している必要があります。
コピー対象のテキストを動的に生成する場合は、#copy-target 要素の内容を更新する必要があります。
コピー完了時にアラートではなく、他の処理を実行することも可能です。

まとめ

jQuery、HTML、CSSを用いて、「ボタンをクリックしてクリップボードにコピーする」機能を簡単に実装できます。上記の解説を参考に、ぜひ試してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリップボードコピー</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>コピーしたいテキスト</h1>
    <p id="copy-target">ここにコピーしたいテキストを入力します</p>
    <button id="copy-button">コピー</button>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  font-family: sans-serif;
}

.container {
  width: 500px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
}

#copy-target {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
}

#copy-button {
  padding: 5px 10px;
  border: 1px solid #000;
  cursor: pointer;
}

$(function() {
  $('#copy-button').click(function() {
    const copyText = $('#copy-target').text();
    navigator.clipboard.writeText(copyText).then(() => {
      alert('コピーしました！');
    });
  });
});

応用例

商品ページのURLをコピー
クーポンコードをコピー
住所をコピー
メールアドレスをコピー

上記のように、様々な場面でこの機能を活用できます。

ボタンクリックでクリップボードにコピーする他の方法

JavaScriptのexecCommand()を使う

以下のコードは、execCommand メソッドを使って、ボタンクリック時に選択範囲をクリップボードにコピーする例です。

<input type="text" id="copy-target" value="ここにコピーしたいテキストを入力します">
<button id="copy-button">コピー</button>

<script>
const copyButton = document.getElementById('copy-button');
const copyTarget = document.getElementById('copy-target');

copyButton.addEventListener('click', () => {
  copyTarget.select();
  document.execCommand('copy');
  alert('コピーしました！');
});
</script>

上記コードは、以下の処理を行います。
1. #copy-target 要素を選択

Clipboard APIを使う

<button id="copy-button">コピー</button>

<script>
const copyButton = document.getElementById('copy-button');

copyButton.addEventListener('click', async () => {
  const copyText = 'ここにコピーしたいテキストを入力します';
  await navigator.clipboard.writeText(copyText);
  alert('コピーしました！');
});
</script>

ライブラリを使う

Clipboard.js などのライブラリを使うと、より簡単にクリップボードコピー機能を実装できます。

<button id="copy-button">コピー</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

<script>
const copyButton = new ClipboardJS('#copy-button');

copyButton.on('success', () => {
  alert('コピーしました！');
});
</script>