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

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …

no image

Facebookで友達が始めたアプリのリクエストをブロックする方法

この記事は約 1 分で読めます。 Facebookで友達が何かのアプリを始めた時、関係のない自分にまでリクエストがくる事があります。 よく言われる「スパムアプリ」なんだけれど、最近特に多いのが「マイカ …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …