jQuery用 Live Clipboard プラグイン

jquery ajax

その昔（３年以上前）Microsoft がLive Clipboardというのを発表していた。これに対応したサイトでは、Webアプリのデータを構造化した状態でコピー＆ペーストしてアプリケーション間で持ち回ったり、クライアントソフトにコピーできたりする。なかなかおもしろかったが、その後どうなったのか知らない。なので思い出しついでにjQuery用のLive Clipboardもどきをつくった。

ソースコード

http://code.google.com/p/liveclipboard-jquery/

サンプル

http://liveclipboard-jquery.googlecode.com/svn/trunk/videosearch.html

Google動画検索結果をマウスで選択し、右クリックメニューから検索結果をクリップボードにコピーできる。
スプレッドシートに Ctrl(MacではCommand) + V でペーストすると、選択した動画の検索結果のデータがクリップボード内に保存されているのがわかる。

解説

アプリケーション間でコピーペーストを実現しようとすると、WebアプリからJavaScriptでクリップボードにアクセスすることができない（IEではできるようだがデフォルトで警告が出る）ため、普通はコピーペーストが自由にできない。Flashを経由して使うという手もあるが、Flash 10 以降でセキュリティ制約に引っかかったり、回避しようとするとクリップボードアクセスする部品をFlashで作らなきゃいけなかったりしてちょっと使い勝手がよくない。

この Live Clipboard の種を明かすと、コピー／ペースト操作を仕込みたい要素に対して、textarea 要素を透明状態で上に重ね合わせて、右クリックやキーボードショートカットをフックしている。やり方はhack的で微妙だがクロスブラウザ環境での動作はそれなりに保証できる。

使い方

対象の要素に対して、クリップボードへのアクセスを処理する関数を登録する。

例：

$('.clippable').clipboard({

  /* コピーする値を文字列としてクリップボードへ返す */
  copy : function() { 
    // return $(this).text();
  },

  /* クリップボードから文字列を受けとって処理する */
  paste : function(data) { 
    // $(this).text(data);
  },

  /* 削除コマンドを受け取る（cut はcopy + del） */
  del : function() { 
    // $(this).remove();
  }

});

以降、要素を右クリックすると、ブラウザのコマンドメニューが現れて、コピー／カット／ペースト／削除などの操作ができる。paste および del を実装しない場合はコピーのみ可能になる。

対象要素をクリックした状態で、ショートカットキー（Ctrl + CXV, Delete）にも対応。

absolute 指定で重ねているため、要素の位置が変化したり消滅したりする場合は、適宜 $.trackClipboards() を呼び出して的確に重ね合わせてやる必要あり。

その他

参考までに、ドラッグドロップへの対応の話。Ext JSでやってる。イベントを透過させるテクニックはだいたい同じか。

http://www.vinylfox.com/forwarding-mouse-events-through-layers/