クリップボードにコピーをjavascriptで実現する【clipboard.js】

コピペする事って日常頻繁にある動作だと思うのですが、結構文字の選択って面倒だったりします。
そこで、クリックするだけでクリップボードにコピーが出来る方法が無いか調べてみたところ、javascriptを使えば実現できるという事が分かりました。

GitHub

実際にGitHubではテキストボックス横のボタンを押すとURLがクリップボードにコピー出来ます。
これをどうやって実現しているのか調べてみたのですが、GitHubの場合は、zeroclipboardというライブラリを使って実現しているようです。

このzeroclipboard、内部的にFLASHを使ってクリップボードにコピーする機能が実現されているようで、当然の事ながらFlashをサポートしていないiOSなどでは使用不可となっています。

今時FLASHというのもなんだかなぁという印象があり、探してみるとFLASHを使わずクリップボードにコピーできるスクリプトがありました。それが今回紹介する「clipboard.js」です。

187_02

こちらは、サイトタイトルに「Copy to clipboard without Flash」と書いてあるとおり、FLASHを使わずexecCommandというAPIを使ってコピーを実現しています。ただ、問題点が1つあり、SafariがexecCommandに対応していないため使えません(結局iOSは使えないという…)。

clipboard.jsの使い方

スクリプトは以下のURLからダウンロードしてサイトに配置するか、いくつかのCDNにもホストされているのでそちらを使っても良いかもしれません。

まずはclipboard.jsを読み込みます

<script src="clipboard.min.js"></script>

// CDNにホストされているものを読み込む場合
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.8/clipboard.min.js"></script>

clipboard.jsを読み込みます。

クリップボードにコピーしたいテキストをdata属性を使って設定

<button class="btn" data-clipboard-text="コピーしたいテキスト">
クリップボードにコピー
</button>

例えばボタンを押した時に何かテキストをクリップボードにコピーしたい場合は上記の様にdata-clipboard-textの中にテキストを設定します。

最後にインスタンス生成と、class(もしくはID)の指定をすれば完了

<script>
var clipboard = new Clipboard('.btn');
</script>

最後にclipboardのインスタンスを生成しclass(もしくはID)を指定すればOKです。
これだけで実現できるので非常に簡単です。

input要素などフォームの内容をコピーしたい場合

先ほどのGitHubの様に、input要素内のテキストをコピーしたい場合もあると思います。その時に使えるのが下記のコードです。

<!-- コピーしたい対象 -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<!-- ボタン -->
<button class="btn" data-clipboard-target="#foo">
クリップボードにコピー
</button>

上記の場合、data-clipboard-targetに指定されている「Foo」というIDのvalue要素の内容がクリップボードにコピーされます。

クリップボードにコピーが完了、もしくは失敗した時にメッセージを出したい場合

var clipboard = new Clipboard('.btn');

clipboard.on('success', function(e) {
    alert("クリップボードにコピーしました。");
    e.clearSelection();
});

clipboard.on('error', function(e) {
    alert("コピーにしました…");
});

クリップボードにコピーした時、メッセージを出してあげるとよりユーザーに優しいですね。
onを使い、成功時(success)と失敗時(error)にアラートを出すようにしたのが上記です。(なお、アラートは使い過ぎるとうるさいので、違う表現にした方がよりスマートだと思います)

簡単に導入できるのが嬉しい

唯一Safariで使えないというのが難点ですが、FLASHを使わずにクリップボードにコピーする機能を簡単に実現でき、ライブラリ自体も非常に軽量なので導入しやすいのでオススメです。