JavaScript PR

JavaScript活用:画像のドラッグ保存&右クリック禁止の設定方法 – oncontextmenu、onselectstart、onmousedownを使った実践ガイド

記事内に商品プロモーションを含む場合があります

ウェブサイトのコンテンツ保護は、クリエイターやウェブ開発者にとって永遠の課題です。特に画像やテキストの無断使用を防ぐため、技術的な対策が求められています。今回は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を用いた方法は、簡単かつ効果的にページの保護を図ることができます。しかし、完全な保護は不可能であることを念頭に置き、常に新しい保護方法を模索することが重要です。

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。