様々なサイトを見ていると、右クリックできないサイトを見かけることがあります。
右クリックを禁止にされると、ページ内コンテンツ(文章や画像)をコピーできなくなってしまい、人によっては不便に感じるかもしれません。
ですが、この不便な仕様はコンテンツをコピーされてパクられてしまうことを予防するために行われているものであり、ユーザーを困らせるための取り組みではありません。
右クリックメニューを禁止したことがないサイト運営者からすると、
- どうやって右クリックを禁止しているのか
- 禁止するのは初心者でもできるのか
といったことが気になるでしょう。
そして、禁止された右クリックを解除する方法が気になる方もいるはずです。
この記事では右クリックを禁止する方法と解除する方法の両方を紹介していますので、参考にしてみてください。
右クリック禁止にする方法
まずは、右クリックを禁止にする方法です。
右クリックメニューを表示しない設定はどうやっているのかという話ですが、これはJavaScriptを使用しています。
やり方は簡単で、ページ内のどこかに以下のスクリプトを差し込むだけです。
document.oncontextmenu = function () {return false;}
HTMLページ上に書き込む場合はscriptタグで囲むことを忘れないようにしてください。
これで右クリックメニューが開かれなくなり、右クリックでのコピーを防止できます。一度自分のサイトにも実装してみて、右クリックができなくなっているかどうか確認してみると良いでしょう。
できるだけ右クリック禁止を解除されないようにする
詳しくは後述しますが、JavaScript による右クリックメニュー禁止処理は簡単に解除できます。
ですので、少しでも解除を難しくするのであれば、以下の2行も追加しましょう。
document.getElementsByTagName('html')[0].oncontextmenu = function () {return false;}
document.body.oncontextmenu = function () {return false;}
これら3つの右クリック無効化処理を用意しておくと、解除作業が3回も必要になるため、解除を諦める方が多くなるはずです。
また、解除方法を知っている人でも、「知ってる方法では解除できない処理を釣っ食っているのだろう」と考えるようになり、時間をかけてまで解除方法を見つけようとする人はなかなかいません。
解除されても右クリックできないようにする
一度解除されてしまえばどうしようもないと思うかもしれませんが、力技で右クリック禁止解除無効化することができます。
setInterval(function(){
document.oncontextmenu = function () {return false;}
}, 100);
上記コードは100ミリ秒ごとに右クリック禁止処理を実行しており、なおかつ無名関数であるため、関数が上書きされることも繰り返し処理が止められることもありません。
この方法は非常に強力で、対抗手段を知っている方はほとんどいないでしょう。知っていたとしてもこの処理を特定して解除することはほぼ不可能です。
右クリック解除を回避する数少ない手段なので小ネタとして覚えておくと良いかもしれません。
右クリック禁止だけではコピー対策は不完全
右クリックを禁止する目的のほとんどがコンテンツのコピー対策だと思われます。
ですが、コンテンツのコピーはショートカットキー「Ctrl+C」で出来ることを忘れていませんか？
確かに、右クリックメニューを無効化することで、右クリックを使ったコンテンツコピーは無効化できます。
ですが、Ctrl+Cキーでのコピー対策はできていません。
本題とは少しずれますが、必要な場合は以下のコピー禁止処理も追加するようにしましょう。
oncopy=”return false”;
こちらもJavaScriptを使っているので、JavaScriptファイルに書き込むか、HTMLに書き込む場合はscriptタグで囲むようにしましょう。
テキストのドラッグ選択も無効化する
何が何でもコピペされたくない場合は、CSSを使ってテキストドラッグ選択を無効化しましょう。
やり方は簡単で、HTMLのbody要素の先頭に好きな画像を埋め込みます。埋め込む画像は何でも構いません。
<img class="noise" src="https://cdn.aprico-media.com/production/imgs/images/000/043/317/original.png?1573525607"/>
その際、ほかの要素に使っていないid・classを設定しましょう。
その要素に対して以下のCSSを適用します。
.noise{
position:absolute;
width:100%;
height:100%;
opacity:0;
}
これだけで、テキストのドラッグ選択を無効化することが出来ます。以下にサンプルを載せていますので、試しにテキストをドラッグして選択しようとしてみてください。
なぜかテキスト選択が上手くいかないはずです。
何が何でもコピーされたくない場合はこの処理を加えてみると良いでしょう。
右クリック禁止を解除する方法
右クリック禁止を解除する方法はいくつか用意されています。右クリック禁止されて困るという場合は、以下の方法で回避するようにしましょう。
Chromeアドオンを使う
一番手っ取り早いのは、「Enable right click」というChromeアドオンを使うことです。
まずはアドオンページにアクセスしてブラウザに追加しましょう。
このアドオンを入れるだけで、ほとんどのサイトの右クリックメニューを復活させることができます。専門知識が全く必要ない上に非常に手軽ですので、とりあえずこのアドオンを入れておくと安心でしょう。
デベロッパーツールを使う
右クリック禁止処理はJavaScriptで行われていますが、ユーザー側も開いているページに対してJavaScriptを実行でき、右クリック禁止処理を上書きすることが出来ます。
ここに、以下の3行をコピーペーストしてエンターキーを押します。
document.oncontextmenu = function () {return true;}
document.getElementsByTagName('html')[0].oncontextmenu = function () {return true;}
document.body.oncontextmenu = function () {return true;}
これで、ほぼ全ての右クリック禁止処理を解除できるので、試しにやってみると良いでしょう。
サイトのJavaScriptを無効化する
この方法に対抗できる右クリック禁止処理はありません。
右クリック禁止はJavaScriptで行うため、ブラウザ側でJavaScriptを無効化してしまえば右クリック禁止処理を含む全てのJavaScript処理が無効化されます。
![Google Chromeの場合はURLバー左のアイコンをクリックしたら表示される[サイトの設定]](http://cdn2.aprico-media.com/production/imgs/images/000/043/381/original.png?1573575913)
![「JavaScript」を[許可]から[ブロック]に切り替え](http://cdn2.aprico-media.com/production/imgs/images/000/043/382/original.png?1573575915)
切り替えた後、先ほどのページを再読み込みしてください。何事もなかったかのように右クリックでメニューを開けるようになっています。
まとめ
時限処理やコンテンツの上に透明画像をかぶせてテキスト選択できないようにするなど様々な方法がありますが、完全に右クリックやコピペを無効化することは不可能です。
右クリック禁止の解除方法の紹介で触れたように、訪れたユーザーが意図的にJavaScriptを無効化した場合、JavaScriptによる右クリックメニューの無効化はできません。
HTML知識豊富な方なら透明画像の要素だけをデベロッパーツールを使って削除し、テキストを選択できるようにすることも可能です。
ですが、簡単な右クリック・コピー対策さえしておけば、ほとんどの方が右クリック・コピーをしなくなりますので、そこまで過敏になる必要はありません。
また、あえて右クリックなど何も禁止せず、コピーし放題する方法もあります。
右クリックやコピーを禁止するとユーザーエクスペリエンス(UX)が低下するため、Google アルゴリズム上でのサイト評価が落ちてしまう可能性があります。
ですので、何か特別な理由がない限り、右プリックは禁止しないほうがいいかもしれません。