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

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

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

関連記事

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

Creative Cloud デスクトップアプリケーションが「サインアウトしています」と表示し、サインインできないとき

この記事は約 1 分で読めます。 時々、Adobeのソフトは使える状態なのに、Creative Cloudにデスクトップアプリケーションにサインインできないことがあります。 私の場合は、「サインアウト …

no image

WordPress ローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法

この記事は約 2 分で読めます。 WordPressでサイト制作をする時。 XAMPPやMANPなどローカル環境で作ったサイトの記事を簡単に本番サイトへ移す方法をメモします。 ※Wordpressは既 …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …