jsでクリップボードにコピーが出来るか判定する

規模の大小に関わらず、どんなウェブサイトにも文字列をコピーできる機能があると便利だ。例えばRSSフィードのURLをコピーできるボタンがあれば、それだけでサイトを購読してくれる人が増えるかもしれない。チョットした親切が怠惰なユーザにはありがたいものだ。

一昔前までクリップボードにコピーするにはflash(zeroclipboard)を使うのが一般的だった。現在ではflash離れとブラウザの進歩によって、clipboard.jsなどを使ってブラウザのAPIからクリップボードを利用することも多い。ところが一部のブラウザ（というか主にsafari)はクリップボードにコピーする為の一部APIをサポートしていないため、コピー機能が利用できない。

ユーザが「コピーボタン」をクリックしたのに実際はコピーされてないというのは要らぬ混乱を生むし、ユーザアクションの後にエラーメッセージを表示する、というのも残念の一言だ。クリップボードにコピーできないブラウザを利用している場合は初めから「コピーボタン」を利用できないようにするのがスマートな設計だろう。

そこで、ブラウザがクリップボードにコピーできるかどうかを検出する方法を調べてみた。

jsからクリップボードにコピーするには、コピーしたい文字列等を選択状態にし、ブラウザのコピーコマンドを実行するという手順になる。具体的にはdocument.createRangeなどからrangeを作り、selectionにrangeを追加、document.execCommand(‘copy’)で選択部分をコピーする。

つまり、これらのメソッドが利用できるか調べれば良さそうだが、document.execCommandは単にプロパティを調べるだけではなくて、document.queryCommandSupported(‘copy’)でコピーコマンドがサポートされているかを調べる必要がある。

if('getSelection' in window &&
	'createRange' in document &&
	'execCommand' in document &&
	'queryCommandSupported' in document &&
	document.queryCommandSupported('copy')){
	//多分コピーできる
}else{
	//多分コピー出来ない？
}

こんな感じだろうか。

ところでMDNを眺めていると、execCommandやqueryCommandSupported、selectionはあまり信用できない。最新バージョンのブラウザなら問題ないようだが、古いものを使っている場合、なんとも不安定な印象をうける。なんだかなあ。