最速インターフェース研究会

Firefoxでテキストをクリップボードにコピーする方法

動作デモ
http://la.ma.la/misc/js/setclipboard_for_firefox.html

Firefox1.5 + FlashPlayer8.5で動作確認してます。Opera8.5では動いたがOpera9では動作せず。Safariは知らない。FlashPlayerのバージョンによっても何か違うのかもしれない。

元ネタ
http://a-h.parfe.jp/einfach/archives/2005/0706043145.html

IEではデフォルト設定でブラウザからクリップボードの読み書きができる、というのは割と有名な話ですが、Flashを使うとIE以外でもクリップボードにテキストをコピーすることができます。上書きのみで読み込みはできないようなので多少は安心です。(クリップボードが勝手に置き換わってしまう、という悪戯はできる)

で、このFlashを使ったクリップボード操作に使っているsetClipboard.swfというファイルは103bytesと大変小さいのですが、swfファイルをサーバーに設置するのが面倒くさいという人向けにdataスキームを使って単体で動くようにしよう、という話。

dataスキームというのは「data:なんとか」という形式のURIでファイル自体を表すことができます。Firefoxのブックマークにfaviconを埋め込んだり、CSSに直接画像を埋め込んだり、Greasemonkeyに画像を埋め込んだり、ブラウザ上でアイコン作成したりするのに使われています。

data URIを作成するには
Perlスクリプト、バイナリファイルも変換できる
http://software.hixie.ch/utilities/cgi/data/data

副産物、クライアントサイドで動くもの、テキストのみ
http://la.ma.la/misc/js/data.html

を使います。

----
で、最初にとりあえずローカルで動くものができたのだけどサーバーにアップしたら動かない。どうもFlashの側でインターネットゾーンとdataスキームでのセキュリティ上の区分があるようで、多分dataスキームはローカルファイルとして扱われているような気がする。

実験1 : setClipboard.swfをdataスキームに変換したもの、ローカルに保存すれば動く
http://la.ma.la/misc/js/setClipboard.html

実験2 : 同じ階層にsetClipboard.swfを設置、当然動く
http://la.ma.la/misc/js/setClipboard2.html

実験3 : 外部ドメインにsetClipboard.swfを設置
http://la.ma.la/misc/js/setClipboard3.html

実験3が成功したので、どっかしら適当なサーバーにsetClipboard.swfを置いておけばブックマークレットからも使える、ということにはなるのだけど、適当なサーバーにリファラが残るのがイヤだなあ、と思ったので何とかして単体ファイルで動かせるようにしたものが、これ。
ファイル単体で完結して動く。
http://la.ma.la/misc/js/setclipboard_for_firefox.html

「表示するとクリップボードを指定文字列で上書きするHTMLファイル」をdataスキームを使って動的生成し、それをIFRAMEに読み込む、という回りくどい方法を取っています。

dataスキーム動的生成に使ってるutf16to8とbase64encodeは高度なJavaScript技集から。
http://www.onicos.com/staff/iz/amuse/javascript/expert/

これでGreasemonkeyでクリップボードにコピーとか作れますね。最初の目的はGreasemonkeyでTSS Clipborad Player自動演奏でした。飽きたのであとはまかせた。

----
追記: 2005-01-10

Firefoxではbase64が組み込み関数(btoa,atob)で使えるようなのでFirefox専用で短くしてみた。わずか27行。Greasemonkey組み込みなど、ご自由にどうぞ。
http://la.ma.la/misc/js/setclipboard.txt

A quick preview will be rendered here when you click "Preview" button.