JavaScriptでコピーをする方法(clipboard.jsの使い方)

この記事は、Advent Calendar、「らいとなデブ SYNCER」の4日目の記事です。利用者が面倒な操作をしなくても、JavaScriptを使って自動的にコピーやペースト、カットをしてあげた方が親切な場合があります。そんな時に便利なライブラリ、clipboard.jsを紹介します。2015年12月現在、Safariは対応していません。

サンプルデモ

clipboard.jsのデモページ
clipboard.jsのデモページ

clipboard.jsを利用して作成したウェブサービスを紹介します。各絵文字をクリックすると、それだけでコピーすることができます。クリック後にペーストをして、実際にコピーできているかを確認してみて下さいね。

ライブラリの入手

clipboard.jsはGithub上でダウンロードすることができます。まずはライブラリを入手しましょう。

ダウンロードしたclipboard.js-master.zipを解凍して下さい。ファイルが多数含まれていますが、利用するのは、下記ファイルの内1つだけです。内容自体は変わりませんが、min.jsの方は、改行や空白が取り除かれた軽量版になったいます。

clipboard.js-master.zip

  • clipboard.js-master
    • dist
      • clipboard.js
      • clipboard.min.js

プログラミング

それでは早速、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>

デモを見る (VIEW DEMO)

コピー時のアクション

コピーを実行した時に、「コピーしました」などの案内を出したい場合は、インスタンス作成後にon()メソッドを使ってコールバック関数を設定しましょう。第1引数には成功時か失敗時かを示す識別子、第2引数には実行する関数を指定します。具体的には次の通りです。

JavaScript

// [clipboard.js]のインスタンスを作成
// [.cp]の要素に機能を実装する
var cp = new Clipboard( ".copy" ) ;

// コピーした時にアラートを表示する (成功時)
cp.on( "success", function(e) {
	alert( "成功しました!!" ) ;
} ) ;

// コピーした時にアラートを表示する (失敗時)
cp.on( "error", function(e) {
	alert( "失敗しました…" ) ;
} ) ;

デモを見る (VIEW DEMO)

コールバック関数は、1つの引数を受け取ります。引数の内容は、アクションの識別子(copy、またはcut)、コピー対象のテキスト、対象のエレメントの3要素です。例えば、「〜というテキストを〜しました」とアラート表示するには次の通りです。

JavaScript

// コピーした時にアラートを表示する (成功時)
cp.on( "success", function(e) {

	// e.action : アクションの種類 (copy、cut)
	// e.text : コピー対象のテキスト
	// e.trigger : 対象のエレメント

	alert( e.text + "の" + e.action + "に成功しました!!" ) ;
} ) ;

デモを見る (VIEW DEMO)

フォームの内容をコピー、カットする

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>

デモを見る (VIEW DEMO)

ダウンロード

この記事で紹介してきたデモファイルを配布しています。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ファイルの中に含まれていません。

Download Zip