更新中。

ユーザーのコピペ、カットを自由に操作できる「Clipboard API」

OSに標準搭載されているクリップボードをJavaScriptで操作する方法を紹介します。この「Clipboard API」の使い道としては、ウェブサイトのコピペ対策が挙げられます。特にブログやSNSといった、ユーザーがテキストエリアに直接入力するようなサービスで活用できそうです。「Windows Word」でコピペ箇所を自動記録する仕様を見たことがあると思いますが、これと似た機能をウェブサイトにも実装することができるようになります。

コピー、ペースト、カットイベントを設定しよう

コピー/貼り付け/切り取りを実行してみてください。

各イベントの設定方法は様々ですが、サンプルではaddEventListenerを使っています。なお、before…イベントはブラウザによってはうまく動作しない場合がありますので、対応状況を確認してください。

クリップボードの文字列を操作しよう

以下のサンプルはユーザーが任意の文字列をコピーしようとしたとき、代わりに「Hello World!」という文字列をクリップボードに格納しています。これはコピペ対策として活用できそうです。

JSのcopyイベントはクリップボードに文字列がコピーされる直前に発火することを押さえた上で以下お読みください。
引数eに格納されているのはクリップボード情報です。コピーした文字列はe.clipboardDataに格納されるので、setData()でHello World!を格納しています。MIMETYPEが2つ設定されていますが、plainは通常の文字列で、htmlの方はその文字列のタグ情報まで格納します。例えば「Windows Word」やブログ作成ページのリッチテキストエディタにペーストしてみてください。赤太字のHello World!がペーストされたと思います。
最後にユーザーがコピーした文字列は4行目のpreventDefault()でキャンセルします。

参考

執筆者Writer

AnTytle

2014年頃にAnTytleを設立。当初はプログラミング記事を書いていたが、2016年にYouTubeチャンネルのゲーム動画がヒットし、以来ゲーム分野にピボットした。

コメントComment

ログインするとサムネや名前を表示できます。