clipboard.jsをCDNでお手軽に使う方法と使い方のまとめ

CDNでサクサクっとclipboard.jsを使いたい、と思った時用のいい感じのまとめ。
久しぶりに使うと結構忘れちゃってるので自分用のメモとしても残してます。

公式サイト

CDN

公式CDNはありませんでした。
ただ公式サイトでサードパーティが用意したCDNへのリンクが貼られているので、それを使います。

コード

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

コピーに関連付けるクラス名

new ClipboardJS('.clip');

clipboardオブジェクトを生成する時の引数に、関連付けるCSSのクラス名を決めます。
上記の書き方だと、HTMLタグのclassに clip を含めた場合、clipboardの各機能が使えるタグとして認識されるようになります。

公式サンプルだと new ClipboardJS('.btn'); となっていますが、これだとBootstrapの.btnクラスと被るので僕は変更して使っています。

必要なスクリプト

以下のスクリプトを<script>タグ内に書いておきます。

コード

var clipboard = new ClipboardJS('.clip');

//成功した時のイベント
clipboard.on('success', function(e) {
    console.info('Action:', e.action);
    console.info('Text:', e.text);
    console.info('Trigger:', e.trigger);

    e.clearSelection();  //選択範囲解除
});

//エラー時のイベント
clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});

最低限必要なのは赤字の部分です。

console.info, console.error はデバッグツールのコンソールにログ出力したい場合は書いておきます。
不要なら削除します。

コピーを実行すると、コピー対象が範囲選択された状態になっています。
範囲選択を自動的に解除したい場合は e.clearSelection(); を記述しておきます。

使い方手順

CDNをロード
<script>タグ内に必要なスクリプトを記述。
コピーしたい要素に対してid、イベントを起こしたいボタンにclipクラス(new ClipboardJS時に決めたクラス名)を付ける。ここについて詳しくは下にある各機能の説明を参照してください。

各機能の説明

idを指定して要素をコピー

HTMLタグのclassにclip（new clipboard('クラス名') の時に設定したclass名）を指定し、data-clipboard-targetにコピーしたい要素を持つタグのidを指定することで、タグ内の要素がコピー対象になります。

コード

<div id="target-div">
    指定したid内の要素をクリップボードへコピーします。
</div>
<button class="clip" data-clipboard-target="#target-div">IDを指定してコピー</button>

ボタンを押すと赤字の部分がクリップボードへコピーされます。

フォーム要素をコピー

フォーム内の要素も同様にid指定でコピー対象にできます。

コード

<div><textarea id="target-form" style="width:60%; height:4rem;">フォームのテキストもコピーできます</textarea></div>
<button class="clip" data-clipboard-target="#target-form">フォームをコピー</button>

data-clipboard-actionに"cut"を指定することで切り取り動作にもできます。
data-clipboard-actionを省略した場合は"copy"動作になっています。

コード

<button class="clip" data-clipboard-action="cut" data-clipboard-target="#target-form">フォームを切り取り</button>

タグ属性に直接コピー内容を埋め込む

data-clipboard-textを使うことで、タグ内にコピーしたい内容を埋め込めます。

コード

<button class="clip" data-clipboard-text="埋め込まれたテキストです。">埋め込みをコピー</button>

動作サンプル（HTML）

サンプルコード。クリックで開きます

赤字がclipboard.jsのためのコードです。

clipboard-sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>clipboard.js HTMLサンプル</title>
</head>
<body>

<div>
  <h2 id="head-00">見出しH2</h2>
  <button class="clip" data-clipboard-target="#head-00">見出しをコピー</button>
</div>

<div style="margin-top:0.5rem;">
  <textarea id="area-00" style="width:80%; height:100px;">ここに書かれているものを切り取りします</textarea>
</div>
<div>
  <button class="clip" data-clipboard-target="#area-00" data-clipboard-action="cut">テキストエリアをコピー（切り取り）</button>
</div>

<div style="margin-top:0.5rem;">
  <button class="clip" data-clipboard-text="埋め込まれたテキスト">埋め込み要素をコピー</button>
</div>


<!-- clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
var clipboard = new ClipboardJS('.clip');

//成功した時の処理
clipboard.on('success', function (e) {
  console.info('Action:', e.action);
  console.info('Text:', e.text);
  console.info('Trigger:', e.trigger);

  //テキストが選択された状態になるので、解除する場合は下記のコードを書く
  e.clearSelection();
});
 
//エラーになった時の処理
clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});
</script>

</body>
</html>

動作サンプル（Bootstrap4）

サンプルコード。クリックで開きます

赤字がclipboard.jsのためのコード。
青字がBootstrap4のためのコードです。

clipboad-bootstrap4.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<title>clipboard.js + Bootstrap 4</title>
</head>
<body class="container">

<div class="row">
  <h2 id="head-00">見出しH2</h2>
  <div class="pl-4 align-self-center">
    <button class="clip btn btn-primary" data-clipboard-target="#head-00">見出しをコピー</button>
  </div>
</div>

<div class="row mt-2">
  <textarea id="area-00" style="width:80%; height:100px;">ここに書かれているものを切り取りします</textarea>
</div>
<div class="row mt-2">
  <button class="clip btn btn-primary" data-clipboard-target="#area-00" data-clipboard-action="cut">テキストエリアをコピー（切り取り）</button>
</div>

<div class="row mt-2">
  <button class="clip btn btn-info" data-clipboard-text="埋め込まれたテキスト">埋め込み要素をコピー</button>
</div>



<!-- Toast Bootstrapの通知機能 -->
<div id="toast-success" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="1000" style="position: absolute; top: 1rem; right: 1rem;">
  <div class="toast-header bg-info text-white">
  <strong class="mr-auto">Clipboard.js　　　　</strong>
  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="toast-body bg-info text-white">
    コピーしました！
  </div>
</div>

<div id="toast-fail" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="1000" style="position: absolute; top: 1rem; right: 1rem;">
  <div class="toast-header bg-danger text-white">
  <strong class="mr-auto">Clipboard.js　　　　</strong>
  <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
  </div>
  <div class="toast-body bg-danger text-white">
    エラーが発生しました。コピー失敗。
  </div>
</div>


<!-- JavaScriptを使用する場合 -->
<!-- jQuery、Popper.js、Bootstrap.jsの順番で読み込みます（下記はbundle版を使用） -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>

<!-- clipboard.js -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript">
var clipboard = new ClipboardJS('.clip');

//成功した時の処理
clipboard.on('success', function (e) {
  $('#toast-success').toast('show');

    //テキストが選択された状態になるので、解除する場合は下記のコードを書く
    e.clearSelection();
});
 
//エラーになった時の処理
clipboard.on('error', function (e) {
  $('#toast-fail').toast('show');
});
</script>

</body>
</html>