JavaScript

JavaScriptライブラリclipboard.jsを使ったクリップボードコピーの実装方法

  /

今回は、Web開発者にとって非常に便利なライブラリ「clipboard.js」を使って、テキストをクリップボードにコピーする方法をご紹介します。
これは、ボタンをクリックするだけで簡単にテキストをクリップボードにコピーできるツールで、ユーザーの利便性を向上させるために非常に役立ちます。
この記事では、CSS、HTML、およびJavaScriptのコードサンプルを使って、具体的な実装方法を解説していきます。

Contents

CSSの設定

まず、ボタンやテキストエリアを見やすくするために、基本的なCSSスタイルを設定しましょう。
クリックするボタン（button）とコピーするテキストエリア（#dvtxt、input）のCSS記述です。
以下のコードを参考にしてください。スタイルは必要に応じてカスタマイズできます。

<style>
body{
	padding: 0;
	margin: 0;
  text-align: center;
  font-size: 16px;
}
h1{
	font-size:20px;
	line-height:1.6em;
	text-align:center;
	padding: 15px 0 25px 0;
}
#dvtxt{
  font-size: 18px;
}
input{
  padding: 8px;
  margin: 0 0 10px 0;
  width: 250px;
  margin: 0 auto;
}
button{
  margin: 15px;
  padding: 4px;
}
</style>

HTMLの構成

次に、HTMLでボタンとテキストエリアを設定します。ここでは、divタグとinputタグを使用し、それぞれのテキストをクリップボードにコピーするボタンを作成します。
クリックするボタン（button）とコピーするテキストエリア「id=”dvtxt”」「input」を用意します。テキストエリアにはクリップボードにコピーするテキストを記述してます。ボタン（button）には「data-clipboard-action=”テキストコピーやカット”」「 data-clipboard-target=”コピーするテキストエリア”」属性を記述します。
以下のコードを参照してください。

<h1>clipboard.jsを使ってクリップボードにテキストをコピーします。<br>以下の2つボタンをクリックするとボタンのターゲット先のテキストをクリックボードにコピーします。</h1>

<div id="dvtxt">divタグ内の文字</div>
<button
  class="btndiv"
  data-clipboard-action="copy"
  data-clipboard-target="#dvtxt"
>
  divタグの文字をコピー
</button>

<br>
<br>
<br>

<input id="inpttxt" type="text" value="テキストボックスの文字" /><br>
<button
  class="btninput"
  data-clipboard-action="copy"
  data-clipboard-target="#inpttxt"
>
  テキストボックスの文字をコピー
</button>

JavaScriptの設定

最後に、JavaScriptでclipboard.jsを読み込み、ボタンのクリックイベントに応じてテキストをコピーする処理を設定します。以下のコードを使用して、clipboard.jsを初期化し、コピーが成功または失敗したときの処理を記述します。
new ClipboardJS(‘クリックボタン’)を宣言し、clipboard_div.on(‘成or否’,function (e) { 処理 })を記述します。

<script src="clipboard.min.js"></script>
<script type="text/javascript">
      var clipboard_div = new ClipboardJS('.btndiv');

      clipboard_div.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

      clipboard_div.on('error', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });


      var clipboard_input = new ClipboardJS('.btninput');

      clipboard_input.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
      });

      clipboard_input.on('error', function (e) {
        console.log(e);
      });
</script>

clipboard.jsを使ってクリップボードにテキストをコピーするデモページ

実際に動作するデモページを用意しました。以下のリンクからアクセスしてみてください。

clipboard.jsを使ってクリップボードにテキストをコピーするデモページ

ソース元：clipboard.js

さらに詳しい情報や他の機能について知りたい場合は、公式サイトを参照してください。

clipboard.js

まとめ

以上が、clipboard.jsを使ってクリップボードにテキストをコピーする方法です。シンプルな実装でありながら、ユーザーエクスペリエンスを大幅に向上させることができます。ぜひ、あなたのプロジェクトでも活用してみてください。

　
※流用される場合は自己責任でお願いします。
　デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。

テキストコピー クリップボード clipboard.js
関連記事