Webの記録

スマホサイトの画像コピーガード対策

投稿日:2015年1月6日 更新日:

この記事は約 2 分で読めます。

android_mini
スマホ向けのサイト制作の機会が増えました。
PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。
画面の長押しすると、画像を保存することができます。
しかし今回は、画面の長押しを制御することで対策をしてみました。


iPhoneで画面の長押しを制御

以下の一文でiPhoneでは、画面の長押しを制御できるようですが

-webkit-touch-callout: none;

何故か・・・私が試したiPadでは、画面の長押しが出来てしまったので・・・cssを以下のようにしてみました。
すると、iPhone・iPadでの画面長押しができなくなり、画像のコピーができなくなりました。

html {
user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-webkit-user-select:none;
-khtml-user-select:none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-webkit-touch-callout: none;
}



しかしAndroidで試してみたところ・・・、画面の長押しの制御ができませんでした。
-webkit-touch-calloutの対応は、iOSだけのようですね。

Androidでも画面の長押しを制御

結局、画像を背景にしてみました。
・・・で、上に透明画像を被せてみて、終了!
昔書いた記事「透明画像を置いて画像をコピーガードする。」で、やった方法で・・・。


するとAndroidでもiPhoneでも、画面の長押しの制御ができました。


ここまで頑張ったけれど、キャプチャーをとられたら無意味だったりしますが、ひとまず長押し制御対策でした。。。

-Webの記録
-, , , ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

s3Slider.jsを使ってFlashのようなスライドショーにチャレンジ♪

この記事は約 1 分で読めます。今回も、画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 今回チャレンジしてみたのは、「s3Slider.js」を使ったFlashのよ …

no image

WordPress 「wp_head」を入れて上部に隙間ができた時

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作っていて、「wp_head();」を入れた途端・・・ブラウザ上部に28pxの隙間が出来る現象が起きました。 ブラウザによっては …

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …