【jQuery】プラグインclipboard.jsの使い方を解説します

プログラム

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

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

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

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

OS Windows10

プラグインclipboard.jsの使い方を解説

プラグインclipboard.jsの使い方を解説します。

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

です。
セレクタに指定した要素に紐づく値をクリップボードにコピーすることができます。
セレクタについては、こちらの記事をご参考ください。

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

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

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

とすれば、【data-clipboard-target】に指定したセレクタの要素に紐づく値を取得することができます。

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

  • success
  • error

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

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

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

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

サンプルプログラムでは

  • HTML
  • clipboard.jsライブラリ
  • JavaScript

の計3つを使います。

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

HTMLサンプルプログラム

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

JavaScriptサンプルプログラム

実行結果

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

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

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

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

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

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

あなたのご参考になったのなら、とても嬉しいです(*´▽`*)
ではでは~(・ω・)ノシ

コメント

タイトルとURLをコピーしました