【javascript】クリップボードにコピーさせる方法

公開日：2014/06/16

更新日：2014/06/04

カテゴリー: javascript

javascriptやjQueryを使ってユーザーのブラウザのクリップボードにデータ（文字列や画像）をコピーさせたいのですが、クリップボードへのアクセスは重大なセキュリティ問題を引き起こすので、現状というかこれからも不可能なようです。

ここでは間接的な方法でクリップボードにデータをコピーさせる方法をまとめています。

javascript＋Flashでコピーさせる

以下に挙げる2つのプラグインを使えば、AdobeのFlashと連動してクリップボードに指定データをコピーさせることができます。

現状、この2つを使う方法がスマートかつ簡単ですが、Flashに対応していないブラウザ（iOSなど）だと機能しません。

clipboard APIを使用する

HTML5のclipboard APIを使えば、ユーザーのコピー操作をキャンセルして、代わりに指定した値（文字列）をクリップボードにコピーさせることができます。

clipboard APIとは？

その前にclipboard APIについてですが、

copy
cut
paste

のイベントが起きたとき、その機能が実行される前にイベントとして取れるようにするものです（イベントハンドラの中でクリップボードにアクセスできる）。

clipboard APIでコピーさせる

以下のclipboard APIを使ったスクリプトは、ユーザーがページ内の何かしらの部分をコピーすると、そのコピー操作をキャンセルし、代わりの文字列をクリップボードにコピーします。

//ユーザーがコピー操作を開始した時にイベント発生
document.oncopy = function(event){
	//通常のコピーイベントをキャンセル
	event.preventDefault();
	//clipboard APIで代替のデータをクリップボードにコピーする
	event.clipboardData.setData('text', 'コピー操作をキャンセルして代わりの文字列をコピーしました！');
};

この方法でクリップボードに任意のデータをコピーできますが、ユーザーのコピー操作が必須です（直接データをコピーしてもらった方が早いので、微妙な方法）。

また、FireFoxやGoogle Chrome、Operaは実行可能ですが、IE8では動きません（clipboard APIに対応していない）。