公開日:2016年6月10日 更新日:2017年5月26日 ©

【ホームページ制作テクニック情報】画像保存させない方法(スマートフォンのスクロール対応)



こんにちは、システム・アローポーションの武田です。

今日は、お客様からご依頼頂いたホームページ制作の中であった問題点の解決方法を一つご紹介いたします。

経緯としてはお客様から、ホームページに学生様が写った画像を使用するので、画像の保存をできないようにして欲しいというご依頼からでした。

タイトルに「スマートフォンのスクロール対応」とつけたのは、インターネット上で紹介されていた方法を試すと、スマートフォンのスクロール操作の際に対象の画像に触れるとスクロールができなくなってしまうからです。今回はそんな解決方法をご紹介いたします。

hozonkinsismh

(アラートを表示させつつタッチスクロールにも対応します)

今回の「画像を保存させない」の着地点として、PCでは画像を右クリックさせない。iPhone、Androidでは画像を保存させず、アラートを出すことを着地点としており、スクリーンショットやURLパス指定でのダウンロードには対応はできませんが、「簡単には保存させないぞ」というスタンスに仕上げます。

制作条件としては、Jqueryを使用します。

①「style.css」のbodyに以下の7行を挿入します。

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

これにより、iPhoneやAndroid5.0以降(chromeブラウザ)では長押しメニューが表示されなくなります。

※Android5.0以前に搭載されている標準ブラウザには対応しません。(項目③にて対応)

 

②対象HTMLソースに以下のJqueryスクリプトを挿入します。

<script
src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script>
$(function(){
$(“img”).on(“contextmenu”,function(){
return false;
})
})
</script>

これにより、PCブラウザでの右クリックを禁止します。

 

③対象HTMLソースに以下のJqueryスクリプトを挿入します。

<script type=”text/javascript”>
$( document ).ready( function()
{
var interval = 600;

$( “img” ).bind( “touchstart”, function()
{
timer = setTimeout( function()
{
alert( “画像の保存はできません” );
}, interval );

function clearFunction()
{
clearTimeout( timer );
}

$( “img” ).bind( “touchend touchmove touchcancel”, clearFunction );
});
});
</script>

これにより、スマートフォンのブラウザで画像を長押しすると、「画像の保存はできません」のアラートが表示されます。

「var interval = 600;」は600msec以上長押しされたらという条件です。

また、Jqueryのタッチイベントを利用しています。

touchstart…タッチした時に発生するイベント。
touchmove…タッチしたまま動かした時に発生するイベント。
touchend…タッチした状態から離れた時に発生するイベント。
touchcancel…タッチ中に電話がかかってきた場合などに発生するイベント。

以上が、弊社で実際に対応した際の解決方法です。

この情報が少しでも、参考になれば幸いです。