takato（@n8takato）です！
webサイト上にあるテキストや画像をコピーさせない方法を知りたい
この記事では上記の課題を解決します。
web制作をしていると、「サイト上にある画像をコピーされない様に設定してほしい」と言われる事がたまにあります。
この間も言われたので、備忘録という意味も兼ねて記事にしました。
画像やテキストをコピー出来ないように設定したい方は読んでみてください。
この記事でわかること
- 画像やテキストをコピー出来ない様にする方法
画像やテキストをコピー出来ないように設定する方法
webサイト上にある画像やテキストをコピーさせない方法を紹介します。
画像とテキストで方法が異なるので、それぞれ説明します。
画像をコピーさせない方法
画像のコピーを防ぐには、画像上で右クリック出来ないように設定します。
画像の上で右クリックして保存しますよね。右クリック出来ない様に設定すれば画像のコピーを防ぐ事ができます。
JavaScriptで出来る
下記のコードを記入すると、画像上で右クリックが出来なくなります。
<script>
$(function() {
$('img').on('contextmenu oncopy', function() {
return false;
});
$('img').on('dragstart', function (e) {
e.stopPropagation();
e.preventDefault();
});
});
</script>コードの記入場所
上記のコードは、HTMLファイルの<body>内に入力します。
<body>の一番下にscriptタグごと貼り付けてください。
画像の上で右クリックが出来ないか確認
上記コードを貼り付けたら、サイト上の画像で確認してみてください。
右クリック出来ない様になっていたら完成です。
テキストをコピーさせない方法
続いて、テキストをコピー出来ない様に設定する方法を紹介します。
テキストのコピーガードはcssを使います。
cssでコードを入力
下記cssコードでテキストのコピーガードを実装出来ます。
body {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}全体の文字をコピー出来ないように設定しています。
一部分の文字だけに変更したい場合は、クラス部分を変更してください。
テキスト上で選択出来ないか確認
サイト上でテキストを選択出来るか確認してみてください。
選択出来なければ実装完了です。
なぜコピー出来ないように対応する必要があるのか？
画像やテキストをコピー出来ない様にする方法を紹介しました。
でも、なぜコピー出来ない様に実装する必要があるのでしょうか？
下記の内容が考えられます。
- 画像の無断使用を防止するため
- コピーサイトの作成を防止するため
画像の無断使用を防止するため
保有する画像を無断で使用されたくない場合にコピーガードを使います。
- 自社商品の画像
- 自社の成果物の画像
これらの画像をサイト上に載せる場合、コピー出来ない様にする要望を頂くことがあります。
カメラマンに依頼して綺麗に撮影した画像を簡単にコピーされたくないという気持ちがある様です。
コピーサイトの作成を防止するため
テキストのコピーガードはコピーサイト作成の防止に繋がります。
コピーサイトとは？
悪質なSEOを目的としたサイト。SEOの評価を下げたいサイトの文章をコピーして、同じ文章の別サイトを作成する。Googleに類似性の高いサイトと認識させ、サイト全体の評価を下げさせること。
競合サイトの評価を落とす際に行うことが多いです。
コピーサイトを作成する際は、コピー元サイトのテキストをコピペして作成します。
テキストをコピーガードすることで、コピーサイトを作成するハードルを高めることが出来ます。
実際にクライアントから要望されたことがある
実際にコピーガードの要望を言われたことがあります。
実際に言われた要望
完成した商業ビルの画像を一般の人に使わせたくないので、コピー出来ない様に設定してほしい。
そこから内容を掘り下げ、「画像上で右クリック出来ない様にする」と定義して実装しました。
お客様次第な部分がある
こういう内容は必ず対応しなきゃいけないものではありません。
お客様に要望されたら対応するで基本OKです。
ただ、気にするお客様が一定数いるので、相談されたら対応できる様にしておきましょう。
スクショすればコピー出来てしまう？
既に気づいている人もいると思いますが、コピーガードは完全なものではありません。
コピーガードしても、スクショされたら画像のコピーが出来てしまいます。また、テキストも手入力されたらコピー出来てしまいます。
そのため、完全にコピーされない方法は無いことをクライアントに伝える必要があります。
とはいえ、右クリックやテキストの選択防止をするだけでもコピー作成率は低下します。なので、完璧ではないことを伝えた上でこれらの対応をすることで、クライアントの安心感が少し上がると思います。
完璧にコピーを防止出来ると伝えてしまうと、後にトラブルが発生する恐れがあります。
事前に伝えるようにしてください。
【最後に】クライアントによって対応する必要がある
最後にまとめです。
画像のコピーガード
- 画像はJavaScriptで右クリックを防止することが出来る。
テキストのコピーガード
- テキストはcssで選択を防止することが出来る。
コピーガードの注意点
コピーガードはコピーを完璧に防ぐことが出来る訳では無い。ただ、コピーガードを実装することでコピー率を減少することが出来る。実装する場合はクライアントに事前に説明することが大事。
以上がまとめです。
コピーガードは実装がとても簡単です。そのため、こちらから提案するのも良いかもしれませんね。クライアントからの信頼を少し獲得出来るかもしれません。
今日はこの辺りで終わります。コーディングに関する記事はこれからも書いていきます。是非読んでください。