Webのコンテンツをコピーしたり、逆にペーストすると言ったことはよくあるかと思います。そんな時、URLであれば自動的にリンク展開したり、画像や動画を埋め込み表示にできたりするとUXがとても良くなるはずです。 そんな操作を実現してくれるのがClipboard Hookです。コピー、カット、ペーストと言ったクリックボード操作をイベントフックできるライブラリです。

Clipboard Hookの使い方

デモです。コピーしたタイミングでイベントが呼ばれているのが分かります。

ペーストも同様です。

面白いのはJavaScriptで操作できる点で、貼り付ける場所や内容によってテキスト以外の情報を追加できるということでしょう。

Clipboard Hookのデモでは文字だけでなく色情報も組み合わせてコピーできるようになっています。そして貼り付けるときにはその情報によって描画する内容を変えています。Webアプリケーションで活躍しそうですね。

Clipboard HookはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

stomita/clipboard-hook: Add hook mechanism on native clipboard cupt/copy/paste event