酒徳(クジラ飛行机)です。以前、ラボブログにJavaScriptでクリップボードを使う(IE/Firefox) という記事を書きました。これは、Flash Player の機能を利用して、JavaScript でクリップボードを操作するというものでした。

ところが、Flash Player 10 になって、セキュリティ制約が強化されたため、この方法でテキストをコピーすることができなくなってしまいました。そこで、このセキュリティ制約を回避してクリップボードを扱う方法と、簡単に「コピー」ができるライブラリを公開します。

まず、Flash Player 10 のセキュリティ制約について紹介します。具体的に言うと、クリップボードにテキストをコピーするメソッド「System.setClipboard()」の使用が制限されるようになってしまいました。以前はこのメソッドを任意のタイミングで呼び出すことができましたが、Flash Player 10 からはマウスクリック時のみ実行することができるように変更されました。

(参考) Flash Player 10の変更点

改めて、調べてみるとブログ貼り付けようのコードを提供しているサイトや、JavaScriptのコピーライブラリなど見ましたが、いろいろなところで、古い「コピー」ボタンが動かなくなっています。

そこで考えられる考えられる対処策は、コピーボタン自体を Flash にすることです。

既に、テキストをコピーできるライブラリ「zeroclipboard」がありますが、これを調べてみると、予想通り、ボタンを Flash で作ったものでした。

その後、Twitter などブログ貼り付けコードが他のサイトでどのように対処されているか見てみると、ボタンだけを Flash にするよりも、コピー用のテキストボックス自体を Flash にしているところが多かったです。

そこで、誰でも自由に使えるライブラリとして、「external_copy_text」を公開します。

copy-textarea posted by (C)クジラ飛行机

このライブラリを使うと、以下のように比較的簡単なコードで、テキストをコピーすることができます。

<!-- テキストボックスを表示する div タグ -->
<div id="external_text"></div>
<!-- 必ず必要なライブラリ -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="external_copy_text.js"></script>
<script type="text/javascript"><!--
// プログラム本体
external_copy_text.show("external_text", "ここにコピーしたい内容");
--></script>
<!-- テキストの内容を動的に書き換える場合 -->
<input type="button" value="change body"
  onclick="javascript:external_copy_text.setText('test test test')" />

後半で用意されているテキストの書き換えを行う場合には、いくつか注意するポイントがあります。というのも、動的な書き換えのために、ExteranalInterface を利用しているのですが、IE では、次のセキュリティ制約があるために、正しく ExternalInterface が動かない場合があるのです。

- object タグの id には必ず external という文字を入れる
- IE では form タグのなかに object タグが入っていると動かない

これらの条件をクリアしていれば書き換えも可能です。ライブラリには、Flash のソースファイルも入れてありますので、デザインを変えるなど、自由に使ってください。

- external_copy_text (JavaScriptからテキストを設定できるコピーボタン付きのテキストエリア)