【jQuery】clipboard.jsライブラリの使い方を解説します

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在4社経験している、11年目エンジニアです。

この記事ではjQueryのライブラリclipboard.jsの使い方を解説します。
ダウンロードするやり方は、こちらの記事をご参考ください。

【jQuery】clipboard.jsライブラリをダウンロードするやり方を解説します

前提条件：実行環境について
clipboard.jsライブラリの使い方を解説
クリップボードにコピーするサンプルプログラム
1. HTMLサンプルプログラム
2. JavaScriptサンプルプログラム
実行結果
まとめ：clipboard.jsライブラリを使ってみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows10

clipboard.jsライブラリの使い方を解説

clipboard.jsライブラリの使い方を解説します。

クリップボードにコピーするのに最低限JavaScriptに書くべきものは

new ClipboardJS(【セレクタ】);

1	new ClipboardJS(【セレクタ】);

です。
セレクタに指定した要素に紐づく値をクリップボードにコピーすることができます。

セレクタについては、こちらの記事をご参考ください。

【jQuery】セレクタについて解説します

クリップボードにコピーするテキストを直接指定したい場合は、data-clipboard-text属性を使います。
HTMLで

<p id=【JavaScriptで指定したセレクタ】 data-clipboard-text=【値】></p>

1	<p id=【JavaScriptで指定したセレクタ】 data-clipboard-text=【値】></p>

というように指定すれば、上記の要素をクリックしたときdata-clipboard-text属性の値がクリップボードにコピーされます。
詳しくは、こちらの記事をご参考ください。

【jQuery】data-clipboard-text属性について解説します

指定したセレクタに紐づく要素の値をクリップボードにコピーしたい場合は、data-clipboard-target属性を使います。

<p id=【ターゲットセレクタ】>テスト</p>
<button id=【JavaScriptで指定したセレクタ】 data-clipboard-target=【ターゲットセレクタ】>ボタン</button>

1 2	<p id=【ターゲットセレクタ】>テスト</p> <button id=【JavaScriptで指定したセレクタ】 data-clipboard-target=【ターゲットセレクタ】>ボタン</button>

とすれば、ボタンを押したときにdata-clipboard-target属性に指定したセレクタの要素に紐づく値を取得することができます。
詳しくは、こちらの記事をご参考ください。

【jQuery】data-clipboard-target属性について解説します

クリップボードにコピーするための最低限必要な実装は以上です。
ですが、これのみだと完了したかどうかが分かりません。
コピー完了後にアラートなど、完了したことを分かるようにするためには

success
error

というイベントを追加します。
サンプルは以下です。

var clipboard = new ClipboardJS('セレクタ');
clipboard.on('success', function(e) {
    // コピー成功時に行う処理
});
clipboard.on('error', function(e) {
    // コピー失敗時に行う処理
});

var clipboard = new ClipboardJS('セレクタ');

clipboard.on('success', function(e) {

// コピー成功時に行う処理

});

clipboard.on('error', function(e) {

// コピー失敗時に行う処理

});

とすると、コピーに成功した場合はsuccessに書いた処理が、失敗したらerrorに書いた処理が行われます。

では、次の章で実際に使ってみます。

クリップボードにコピーするサンプルプログラム

サンプルプログラムでは

HTML
clipboard.jsライブラリ
JavaScript

の計3つを使います。

解説で使うサンプルプログラムのディレクトリ構造は以下のようになっています。
クリップボードにコピーするサンプルプログラム

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <title>クリップボードにコピー</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <h3>ラベルをクリックするとコピー</h3>
        <p id="sampleTextCopy" data-clipboard-text="テキストをコピー">クリックするとコピー</p>
        <h3>ボタンを押すとコピー</h3>
        <p id="sampleTarget">ターゲット</p>
		<button id="btnClipboard" data-clipboard-target="#sampleTarget">ボタンを押すとコピー</button>

        <script src="./js/clipboard.min.js"></script>
        <script src="./js/sample_javascript.js"></script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>クリップボードにコピー</title>

</head>

<body>

<h3>ラベルをクリックするとコピー</h3>

<p id="sampleTextCopy" data-clipboard-text="テキストをコピー">クリックするとコピー</p>

<h3>ボタンを押すとコピー</h3>

<p id="sampleTarget">ターゲット</p>

<button id="btnClipboard" data-clipboard-target="#sampleTarget">ボタンを押すとコピー</button>

</body>

</html>

HTML側でclipboard.jsを読み込む注意点として、必ず使いたいJavaScriptより前にclipboard.jsを読み込むことです。
HTMLは最初から順々に読まれます。
先に読み込まないと、クリップボードにコピーすることができないのでご注意ください。

JavaScriptサンプルプログラム

// ラベルをクリックするとコピー
var sampleTextCopy = new ClipboardJS('#sampleTextCopy');
sampleTextCopy.on('success', function(e) {
    alert(e.text + 'のコピーに成功しました。');
});
sampleTextCopy.on('error', function(e) {
    alert("コピーに失敗しました。");
});

// ボタンを押すとコピー
var btnClipboard = new ClipboardJS('#btnClipboard');
btnClipboard.on('success', function(e) {
    alert(e.text + 'のコピーに成功しました。');
});
btnClipboard.on('error', function(e) {
    alert("コピーに失敗しました。");
});

// ラベルをクリックするとコピー

var sampleTextCopy = new ClipboardJS('#sampleTextCopy');

sampleTextCopy.on('success', function(e) {

alert(e.text + 'のコピーに成功しました。');

});

sampleTextCopy.on('error', function(e) {

alert("コピーに失敗しました。");

});

// ボタンを押すとコピー

var btnClipboard = new ClipboardJS('#btnClipboard');

btnClipboard.on('success', function(e) {

alert(e.text + 'のコピーに成功しました。');

});

btnClipboard.on('error', function(e) {

alert("コピーに失敗しました。");

});

実行結果

作成したHTMLをブラウザで開き、【クリックするとコピー】を押します。
clipboard.jsの実行確認

【data-clipboard-text】に指定した値が取得できていることを確認できました。
clipboard.jsの実行確認
本当にクリップボードにコピーできたか確認するためテキストに貼り付けます。
クリップボードにコピーできていることを確認できました。

【ボタンを押すとコピー】を押します。
clipboard.jsの実行確認
【data-clipboard-target】に指定したセレクタに紐づく値が取得できていることを確認できました。

本当にクリップボードにコピーできたか確認するためテキストに貼り付けます。
こちらもクリップボードにコピーできていることを確認できました。
clipboard.jsの実行確認

まとめ：clipboard.jsライブラリを使ってみよう

以上がclipboard.jsライブラリについての解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ