サンプルデモ
clipboard.jsを利用して作成したウェブサービスを紹介します。各絵文字をクリックすると、それだけでコピーすることができます。クリック後にペーストをして、実際にコピーできているかを確認してみて下さいね。
JavaScriptでコピーをする方法(clipboard.jsの使い方)
この記事は、Advent Calendar、「らいとなデブ SYNCER」の4日目の記事です。利用者が面倒な操作をしなくても、JavaScriptを使って自動的にコピーやペースト、カットをしてあげた方が親切な場合があります。そんな時に便利なライブラリ、clipboard.jsを紹介します。2015年12月現在、Safariは対応していません。
ライブラリの入手
clipboard.jsはGithub上でダウンロードすることができます。まずはライブラリを入手しましょう。
ダウンロードしたclipboard.js-master.zipを解凍して下さい。ファイルが多数含まれていますが、利用するのは、下記ファイルの内1つだけです。内容自体は変わりませんが、min.jsの方は、改行や空白が取り除かれた軽量版になったいます。
clipboard.js-master.zip
- clipboard.js-master
- dist
- clipboard.js
- clipboard.min.js
- dist
プログラミング
それでは早速、clipboard.jsを使って、JavaScriptを通したコピーやペーストを実現してみましょう。
ファイルの読み込み
まずはヘッダー内で、ダウンロードしたライブラリファイルを読み込んで下さい。
HTML
<head>
<!-- ライブラリの読み込み -->
<script src="./clipboard.js"></script>
</head>コンテンツの配置
続いてはコンテンツを配置します。例えば、「クリックしてコピー」という文字をクリックした時に、自動的にコピーされるようにするには、次のように配置しましょう。data-clipboard-text属性に、コピーさせたい文字列を指定して下さい。また、後ほど、操作するための印として、共通して任意の名前のclass属性値(ここではcopy)を指定しておいて下さいね。
HTML
<p class="copy" data-clipboard-text="今日はいい天気ですね">クリックしてコピー</p>
<p class="copy" data-clipboard-text="今日は悪い天気ですね">クリックしてコピー</p>ライブラリの起動
仕上げです。引数に、コピーのイベントを設定したいエレメントが持つclass属性値(先ほどはcopyと指定)を引数にして、インスタンスを作成して下さい。具体的には次の通りです。これだけで、指定したclass属性値を持つ全ての要素において、クリックしてコピーすることができるようになりました。試してみて下さいね。
HTML
<body>
...
<script>
// [clipboard.js]のインスタンスを作成
// [.cp]の要素に機能を実装する
var cp = new Clipboard( ".copy" ) ;
</script>
</body>コピー時のアクション
コピーを実行した時に、「コピーしました」などの案内を出したい場合は、インスタンス作成後にon()メソッドを使ってコールバック関数を設定しましょう。第1引数には成功時か失敗時かを示す識別子、第2引数には実行する関数を指定します。具体的には次の通りです。
JavaScript
// [clipboard.js]のインスタンスを作成
// [.cp]の要素に機能を実装する
var cp = new Clipboard( ".copy" ) ;
// コピーした時にアラートを表示する (成功時)
cp.on( "success", function(e) {
alert( "成功しました!!" ) ;
} ) ;
// コピーした時にアラートを表示する (失敗時)
cp.on( "error", function(e) {
alert( "失敗しました…" ) ;
} ) ;コールバック関数は、1つの引数を受け取ります。引数の内容は、アクションの識別子(copy、またはcut)、コピー対象のテキスト、対象のエレメントの3要素です。例えば、「〜というテキストを〜しました」とアラート表示するには次の通りです。
JavaScript
// コピーした時にアラートを表示する (成功時)
cp.on( "success", function(e) {
// e.action : アクションの種類 (copy、cut)
// e.text : コピー対象のテキスト
// e.trigger : 対象のエレメント
alert( e.text + "の" + e.action + "に成功しました!!" ) ;
} ) ;フォームの内容をコピー、カットする
textarea要素などのフォームの内容をコピー、カットさせることもできます。まずは、任意のid属性値を付けたフォームを用意して下さい。ここではcopy-or-cutとしています。
HTML
<textarea id="copy-or-cut">このテキストがコピーorカットされます。</textarea>特定のフォームの内容をコピー、またはカットさせるには、data-clipboard-targetという属性に対象のid属性値を指定したボタンを配置して下さい。具体的には次の通りです。これで「id属性値がcopy-or-cutの要素のフォーム内容をコピーする」という指定となります。clipboard.jsの起動方法は、変わりません。
HTML
<p class="copy" data-clipboard-target="#copy-or-cut">クリックしてコピー</p>カットしたい場合は、さらにdata-clipboard-actionという属性に、cutという値を指定して下さい。これは、「コピーではなく、カットを実行する」という指定になります。実際に、実装されているのか確認してみましょう。
HTML
<p class="copy" data-clipboard-target="#copy-or-cut" data-clipboard-action="cut">クリックしてカット</p>ダウンロード
この記事で紹介してきたデモファイルを配布しています。clipboard.js自体は、別途、GitHubからダウンロードして下さいね。
ファイル一覧
- SYNCER000711
- clipboard-01.html Download
- clipboard.js
- clipboard-02.html Download
- clipboard-02-fire.js Download
- clipboard-03.html Download
- clipboard-03-fire.js Download
- clipboard-04.html Download
- readme.txt Download
ファイル名をクリックすると内容を確認できます。「Download Zip」をクリックするとファイル一式をダウンロードできます。
ご利用の際は、付属のREADMEファイル(readme.txt)をご確認下さい。
clipboard.jsはzipファイルの中に含まれていません。