こんにちは、システム・アローポーションの武田です。
今日は、お客様からご依頼頂いたホームページ制作の中であった問題点の解決方法を一つご紹介いたします。
経緯としてはお客様から、ホームページに学生様が写った画像を使用するので、画像の保存をできないようにして欲しいというご依頼からでした。
タイトルに「スマートフォンのスクロール対応」とつけたのは、インターネット上で紹介されていた方法を試すと、スマートフォンのスクロール操作の際に対象の画像に触れるとスクロールができなくなってしまうからです。今回はそんな解決方法をご紹介いたします。

(アラートを表示させつつタッチスクロールにも対応します)
今回の「画像を保存させない」の着地点として、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…タッチ中に電話がかかってきた場合などに発生するイベント。
以上が、弊社で実際に対応した際の解決方法です。
この情報が少しでも、参考になれば幸いです。
最近の投稿
カテゴリー
- Dynamics
- Exif
- Googleフォト
- ITツール
- IT導入支援事業者
- IT補助金
- News
- OS
- PCセットアップ
- SEO
- Windows10
- WordPress
- アクセシビリティ
- ウィルスメール対策
- コラム
- セキュリティ
- セキュリティシステム
- トラブル対応
- ホームページ作成
- ホームページ制作
- ホームページ関連
- モバイルファースト
- リハビリ実績管理
- レスポンシブ
- 中小企業庁
- 信用金庫
- 写真データ保存
- 医療
- 医療システム
- 商品
- 商品案内
- 商工会
- 地域包括ケアシステム
- 小規模事業者持続化補助金
- 展示会
- 新商品
- 望星丸
- 東海大学
- 気象
- 災害対策
- 登山
- 看護必要度
- 船舶
- 補助金
- 製品情報
- 遭難救助
- 開発情報
- 電子カルテ