ウェブサイトのコンテンツ保護は、クリエイターやウェブ開発者にとって永遠の課題です。特に画像やテキストの無断使用を防ぐため、技術的な対策が求められています。今回はJavaScriptのoncontextmenu、onselectstart、onmousedownを使ってページ上で右クリックと画像のドラッグ（保存）を禁止にする方法をご紹介します。
CSSによる基本的な設定
まずはCSSでページの基本的なスタイルを設定します。この段階では、視覚的な要素を整えることに重点を置きます。以下のコードは、サイトの基本的なフォントサイズやヘッダーのスタイルを設定しています。
<style type="text/css">
body{
text-align: center;
font-size: 16px;
}
h1{
text-align: center;
font-size: 32px;
line-height: 1.6em;
padding: 30px 0;
}
</style>
HTMLによる画像の保護設定
次に、HTMLを用いて画像のドラッグを禁止します。ここでは、ダミー画像dummy1.jpgを使用し、その画像がドラッグ禁止であることをユーザーに通知します。
<h1>このページでは右クリックと以下の画像のドラッグも禁止にしてます。<br>試しに右クリックと画像のドラッグをやってみてください。</h1>
<div><img src="dummy1.jpg" alt="右クリック＋画像ドラッグ禁止"></div>
JavaScriptによる操作禁止の実装
ここが核心部分です。JavaScriptを利用して、ページ上での右クリックと画像のドラッグ（保存）を禁止します。oncontextmenu, onselectstart, onmousedown イベントを用いて、これらの操作を無効化することができます。
<script type="text/javascript">
//右クリック禁止
document.oncontextmenu = function(){ return false; };
document.body.oncontextmenu = "return false;"
//ドラッグ禁止
document.onselectstart = function(){ return false; };
document.onmousedown = function(){ return false; };
document.body.onselectstart = "return false;"
document.body.onmousedown = "return false;"
</script>
oncontextmenu、onselectstart、onmousedownを使って右クリックと画像のドラッグを禁止にしたデモページ
実際にこれらのコードがどのように機能するか、以下のデモページで体験することができます。このデモは、上記のコードを活用して作成されており、実際のウェブサイトでの応用をイメージしやすくなっています。
oncontextmenu、onselectstart、onmousedownを使って右クリックと画像のドラッグを禁止にしたデモページ
まとめ
ウェブページの保護は、著作権を守るために不可欠です。今回紹介したJavaScriptを用いた方法は、簡単かつ効果的にページの保護を図ることができます。しかし、完全な保護は不可能であることを念頭に置き、常に新しい保護方法を模索することが重要です。
2024/09/12追記
画像のドラッグ保存＆右クリック禁止の設定方法は以下の記事の記述や方法で対応した方がより良いので、以下を参考にしてください。
Webページの画像を守る！JavaScriptとCSSで右クリック＆ドラッグ保存を完全ガードする方法
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
