BLOGTIMES
2007/10/16

JavaScriptからクリップボードの中身を書き換える

 
このエントリーをはてなブックマークに追加

僕の業務のひとつにテキストファイルを整形してXMLファイルを作るという仕事があるんですが、チマチマ加工するのに嫌気が差したのであるフォーマットで入力すると、XMLに整形してくれるというちょっとしたウェブアプリを作って使い始めました。感じとしては画面上に大きなテキストエリアが2つあって、上のエリアに変換元のデータを入力して、変換ボタンを押すと下のエリアに結果が表示されるというシンプルなものです。

この仕組み自体は結構うまく動いていて、早速、担当のバイト君にも使ってもらったりして、ウェブアプリが他人と共用可能であるということの便利さを今更ながら再認識しているんですが、当初の回数よりは劇的に回数が減ったものの、やはりテキストエリアからコピーしてエディタに貼り付けという作業をひたすら繰り返さなくてはならないことに変わりはありません。ということで、なんとかブラウザの内容を自動的にクリップボードに転送できないかなと色々調べてみたところウノウラボの下記のエントリを見つけました。

ウノウラボ Unoh Labs: JavaScriptでクリップボードを使う(IE/Firefox)
unoh.github.com by unoh

今回は、JavaScriptでクリップボードを使うプログラムを作ってみます。IEとFirefoxで動く簡単なライブラリを作ってみましたので、参考にしてください。
IEだけで動かすのは、簡単なのですが、FireFoxではクリップボードを操作する方法がありません。そこで、FireFoxでも使えるようにFlashを使って工夫してみます。

IEオンリーのクリップボードのいじり方はたくさん出てきますが、これはFlashをかます事によってFirefoxに対応しているところがすばらしいです。いわれてみれば「あー、そんなのもあったなぁ」という感じですが、ちょっと僕にはこの発想はできそうにないです。

実際のコード

今回はテキストエリアの内容を取り込みたかったので下記のようにHTMLに記述しました。
テキストエリアをクリックするとテキストエリアの内容全文がクリップボードに取り込まれるようになります。

<script type="text/javascript" src="swfobject.js"></script> <script type="text/javascript" src="clipbrd.js"></script> <textarea id="output" cols="80" rows="10" onclick="this.focus(); this.select(); clipbrd.copyText(this.value);"> ここの内容がクリップボードにコピーされる </textarea>

※コピーされたことがわかりやすいように、クリックすると全文が選択されるようになっています。


    トラックバックについて
    Trackback URL:
    お気軽にどうぞ。トラックバック前にポリシーをお読みください。[policy]
    このエントリへのTrackbackにはこのURLが必要です→https://blog.cles.jp/item/2235
    Trackbacks
    このエントリにトラックバックはありません
    Comments
    愛のあるツッコミをお気軽にどうぞ。[policy]
    古いエントリについてはコメント制御しているため、即時に反映されないことがあります。
    コメントはありません
    Comments Form

    コメントは承認後の表示となります。
    OpenIDでログインすると、即時に公開されます。

    OpenID を使ってログインすることができます。

    Identity URL: Yahoo! JAPAN IDでログイン