サンプルページ

今回のプログラムでは以下の機能を実装しました。

• 文字や画像を選択させない
• 右クリックででてくるコンテキストメニューを表示しない
• Ctrl+A,Ctrl+Cによるコピーをさせない
• 画像には透明画像のカバーをつけて直接選択できないようにする

入力系パーツに影響がないようにしたり、ショートカットキーを使ったコピーをさせないようにしたり、いろいろ組み込んでみました。IE6とIE7で「display:inline-block」が効かないためある条件でレイアウト崩れが起きるけど、来月でXPのサポート切れるからひとまず放置してます。いい方法あったら教えてください。

サンプルページ

ダウンロード

cpguard.zip

フォルダ構成は以下のとおり

• cpguard.css：デザインファイル
• cpguard.js：JavaScriptファイル
• image.gif：サンプルで使用している画像
• spacer.gif：画像カバー用の透明GIF
• spacer.png：デバッグ用画像カバー半透明PNG

jQuery本体の読み込み（CDN）

今回のプログラムはjQueryを使用しているので、jQuery本体(CDN)を読み込みます。

<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.0.0.js" type="text/javascript"></script>
<!--<![endif]-->

CSSの読み込み

コピー禁止用のCSSファイルを読み込みます。
※「cpguard.css」のディレクトリを変更した場合はパスを書き換えてください

<link href="js/cpguard.css" rel="stylesheet" type="text/css" />

CSSの中身は主に選択禁止用プロパティの指定。またJavaScriptでコピー禁止させるので、JavaScriptが無効になっていたらコピー禁止対象を非表示にします。

@charser 'utf-8';
.body {
  user-select: none; /* 選択制御 */
  -moz-user-select: none; /* Firefox */
  -webkit-user-select: none; /* Safari、Chromeなど */
  -ms-user-select: none; /* IE10から */
  cursor: default;
}
.cpguard {
  display: none;
}

JavaScriptの読み込み

コピー禁止用のJavaScriptプログラムを読み込みます。
※「cpguard.js」のディレクトリを変更した場合はパスを書き換えてください

<script id="cpguard" src="js/cpguard.js" type="text/javascript"></script>

コピー禁止用のプログラムの内部はこんな感じ。もうちょっといい感じのプログラムがあったら教えてください。

$(function(){
  $('.cpguard').removeClass('cpguard');//JS有効時表示
  $('body').on('contextmenu selectstart copy cut', false);//右クリックメニュー、選択、コピー、カット禁止
  $('p:not(p:has(:input))').mousedown(function(){return false;});
  //入力パーツ除く段落内マウスボタン押下時イベント却下

  //画像保護
  //画像カバーパス取得
  var src = $('#cpguard').attr('src');
  var srcArray = src.split('/');
  srcArray[srcArray.length-1] = 'spacer.gif';//「spacer.png」にするとカバー画像がデバッグ用半透明赤画像に
  src = srcArray.join('/')
  //画像カバー装着
  $('img').wrap('<div style="position:relative;display:inline-block;" />').parent("div")
  .append('<img class="spacer" src="' + src + '" alt="*" />');
  $('img.spacer').bind('load',function(){
    $(this).css({
      'position':'absolute',
      'top':0,
      'left':0,
      'width':$(this).prev().width(),
      'height':$(this).prev().height()
    })
  });

  // ctrl+a,ctrl+c 禁止呼び出し
  $(document).keydown(key_down_event);
  $(document).keyup(key_up_event);

});
// ctrl+a,ctrl+c 禁止関数
var ctrl_key = false; // ctrlキーが押されてるか判断する変数
function key_down_event(event) {
  console.log(event.keyCode);//キーコードをコンソールに表示（デバッグ用）
  if (event.keyCode == 224) {//ctrlキー取得(224)
    ctrl_key = true;
  }
  if (ctrl_key && (event.keyCode == 65 || event.keyCode == 67)) {
    //ctrl + aキー(65) cキー(67)押下時
    return false;//キー操作無効
  }
  return true;
}
function key_up_event(event) {
  //ctrlキーアップ時、判定を戻す
  if (event.keyCode == 224) {
    ctrl_key = false;
  };
}

HTMLにclass属性を記述

コピー禁止したい要素に「class="cpguard"」を記述します。JavaScriptが無効になっていると対象要素が非表示になります。

<div class="cpguard">
：
</div>