スマホサイトで画像をコピーガードするには？

スマホサイトで画像をコピーガードするには？

Webページ上の画像は、Webに公開する以上閲覧者に保存されたり複製されるのは仕方のないことです。基本的にPCブラウザと同じ構造のスマートフォンブラウザで複製を完全に防止する対策法はありません。しかし、フィーチャーフォンでは画像の保護や転送をブロックすることが一般的に行われており、スマートフォンでも同様のことをしたいという事情もあると思います。

調べたところ、「dwImageProtector Plugin for jQuery」というjQueryプラグインで画像保存をブロックする方法がありました。スマートフォンはJavaScriptが動作しjQueryも使えるので、これを利用したプロテクト方法を紹介します。

関連記事：

目次

dwImageProtector Plugin for jQuery サンプルの動作

ページ内の各画像に同じ寸法のブランク画像を重ねるように配置し、右クリック（スマートフォンなら長タッチ）で保存できる画像をすべてブランク画像にするという方法です。PCではページ丸ごと保存できるので完全な方法ではありませんが、スマートフォンなら簡易的に画像を保護する方法として使えると思います。

dwImageProtector Plugin for jQuery

この方法で最初はうまくできたと思いました。しかし、サンプルコード通りの方法では十分ではありませんでした。端末を横に傾けると元の画像が保存できてしまうのです。

なぜうまくいかなかったか、サンプルをお見せします（ブランク画像は本来1ピクセル四方の透過画像ですが、わかりやすく見せるために黒い画像にしています）。ページ表示時は、保護したい各画像の上にブランク画像が重なり、どの画像もブランク画像でしか保存できません。プロテクトは成功です。

 

端末を横に傾け、縦長から横長に画面を切り替えてみます。すると、右寄せしていた画像がブランク画像の下から姿を現し、保存ができるようになってしまいました。

このサンプルはwindow.onload時に絶対位置でブランク画像を表示したきり位置がそのままなので、スマートフォンで縦横を切り替えたり、PCでウィンドウの大きさを変えることで元の画像の位置が変わると、ブランク画像の位置がずれてしまうのです。

改良を入れたdwImageProtector Plugin for jQuery

そこで、コードを少しだけ変更して縦横切替時にも対応できるようにしました。改良のポイントは以下の２点です。

  1. window.loadイベントに加え、window.resizeイベント時にもブランク画像表示処理（protectImage関数）を呼ぶ（呼び出し側コード：8～10行目）
  2. protectImage関数内に、既に表示しているブランク画像を消す処理を追加（protectImage関数コード：4行目）
  3. ブランク画像だけを消せるように、ブランク画像のエレメントにname属性を追加しておく（protectImage関数コード：18行目）

（呼び出し側）

<script type="text/javascript">
<!--//
$(window).bind('load', function() {
	$('img').protectImage();
});

//ポイント1：resizeイベントでも関数をコール
$(window).bind('resize', function() {
	$('img').protectImage();
});

//-->
</script>

（protectImage関数）

jQuery.fn.protectImage = function(settings) {

	//ポイント2：name="blank"なimgを消す
	$("img[name=blank]").remove();

	settings = jQuery.extend({
		image: 'blank.gif',
		zIndex: 10
	}, settings);
	return this.each(function() {
		var position = $(this).position();
		var height = $(this).height();
		var width = $(this).width();
		$('<img />').attr({
			width: width,
			height: height,
			src: settings.image,
			name : "blank"　//ポイント3：name属性の追加
		}).css({
			top: position.top,
			left: position.left,
			position: 'absolute',
			zIndex: settings.zIndex
		}).appendTo('body')
	});
};

結果表示

このように、縦で表示してから横向きに変えても（再び縦に戻しても）、ブランク画像がずれないようになりました。また、PCブラウザでのブラウザサイズ変更にも対応できます。

image4

まとめ

WEB上に公開する以上、画像を保存されるのは仕方がないという見方もありますが、フィーチャーフォンでは当たり前とされる画像の保護がスマートフォンの普及によってできなくなってしまうという懸念も一方ではあるようです。スマートフォンはjQueryが使え、非常に簡単に対応できますので、対策が必要になったときに役立ってくれればと思います。

関連記事：

Page Top