【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】セレクタについて解説します

ClipboardJSで指定したセレクタの要素がHTMLで

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

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

と記載のある場合【data-clipboard-text】に指定されている値がクリップボードにコピーされます。

指定したセレクタの要素からほかの要素の値を取得することもできます。
その場合

<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】に指定したセレクタの要素に紐づく値を取得することができます。

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

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をブラウザで開き、【クリックするとコピー】を押します。

【data-clipboard-text】に指定した値が取得できていることを確認できました。

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

【ボタンを押すとコピー】を押します。

【data-clipboard-target】に指定したセレクタに紐づく値が取得できていることを確認できました。

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

まとめ：プラグインclipboard.jsを使ってみよう

以上がプラグインclipboard.jsについての解説でした！

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