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

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …

no image

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

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

no image

苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】

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

no image

Facebookページ コメント返信機能の設定をしてみた!

この記事は約 1 分で読めます。 Facebookページにコメントに対するコメントの返信、どのようにされてましたか? 私は都度相手の名前を入れて、誰に対する返信なのかを表示していました。 今回「返信機 …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …