こんにちは、システム・アローポーションの武田です。
今日は、お客様からご依頼頂いたホームページ制作の中であった問題点の解決方法を一つご紹介いたします。
経緯としてはお客様から、ホームページに学生様が写った画像を使用するので、画像の保存をできないようにして欲しいというご依頼からでした。
タイトルに「スマートフォンのスクロール対応」とつけたのは、インターネット上で紹介されていた方法を試すと、スマートフォンのスクロール操作の際に対象の画像に触れるとスクロールができなくなってしまうからです。今回はそんな解決方法をご紹介いたします。
（アラートを表示させつつタッチスクロールにも対応します）
今回の「画像を保存させない」の着地点として、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…タッチ中に電話がかかってきた場合などに発生するイベント。
以上が、弊社で実際に対応した際の解決方法です。
この情報が少しでも、参考になれば幸いです。