一応巷にはそういうのを防止したり監視したりするプラグインがあるけど、なかなかかゆいところに手が届かないし、せっかくなので勉強のためにも普通にjavascriptでやってみます。
単純に「コピー」のアクションを監視しているだけだから、Wordpress以外でも普通のサイトで使えると思いますよ。
やりたい事:一定数以上の文字がコピーされたら、設定したテキストを挿入する。さらにGoogleアナリティクスでイベントを残す
まず、右クリック禁止とか選択不可とか、普通のユーザーも嫌がるようなのはしたくなかったのでコピペ自体はOKとしました。でもさすがに100文字とか200文字も選択するのは明らかに普通じゃないですよね!?ってことで文字数をチェックします。 さらにコピペしたテキストに、元のURLなんかを入れておきたいです。
そして念のためGoogleアナリティクスでイベントとして記録しましょう。IPアドレスも残して、よっぽど悪質なのがいたらアクセス拒否できるように……。(そんなの極めて稀だと思いますが)
全部実現するコードをheader.phpにjavascriptで書く
function escape_html_tag(str) {
return str.replace(/[&"<>]/g, function(match) {
return {
"&": "&",
'"': """,
"<": "<",
">": ">"
}[match];
});
}
function insertStr(str, index, insert) {
return str.slice(0, index) + insert + str.slice(index, str.length);
}
function addLink() {
var selection = window.getSelection();
var myNum = selection.toString().length;
if(myNum > 200){ //200文字以上なら監視対象
var copytext = insertStr(selection.toString(), 200, '<br />この作品の元ページは<?php echo home_url(); ?>です<br />') + '<br /><?php echo home_url(); ?>';
//200文字目と、一番最後の2か所にWordpressのサイトURLを入れてます。
var newdiv = document.createElement('div');
var range = selection.getRangeAt(0);
newdiv.style.position = 'absolute';
newdiv.style.left = '-99999px';
document.body.appendChild(newdiv);
newdiv.innerHTML = copytext;
selection.selectAllChildren(newdiv);
window.setTimeout(function () {
document.body.removeChild(newdiv);
selection.removeAllRanges();
selection.addRange(range);
}, 100);
ga('send', 'event', '<?php echo $_SERVER['REMOTE_ADDR']; ?>', myNum, escape_html_tag(selection.toString().substr(0,50)));
//Googleアナリティクスにイベントとして記録。カテゴリーにIPアドレス、アクションに文字数、ラベルに最初の50文字を記録。
}
}
document.addEventListener('copy', addLink);
とりあえずこのコードだと一度に200文字以上コピペする行為はチェックできます。途中(200文字目)と最後にPHPでWordpressのサイトURLを入れました。
Googleアナリティクスのイベントトラッキングで、PHPで取得したIPアドレスと、コピペした文字数、コピペ内容の最初の50文字を記録します。
サイトによっては監視する文字数を調節したり、200文字目の処理を削除したり、最後に入れる文字を変えたりするといいんじゃないでしょうか。
<参考サイト>
まとめ
やっぱり管理者や、善良な読者が使いづらくなるのは嫌だと思うので、こんな処理をご提案してみます。途中の文字列を乱数などにすればもっと強固になるかもしれませんね。