ピンチイン禁止の5つの方法 – JavaScriptでスマホ操作を制御

スマホ画面でのピンチイン操作を禁止する方法を示すイラストJS
この記事は約6分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、スマホのピンチイン操作を禁止する方法が分かり、自分のウェブサイトやアプリで簡単に実装できるようになります。

JavaScriptを使って、スマホ操作を制御し、より快適なユーザー体験を提供しましょう。

●ピンチイン禁止の基本

○ピンチインとは?

ピンチインとは、スマホやタブレットなどのタッチスクリーンで、二本の指を画面上で縮める動作のことを指します。

通常、ピンチイン操作は画面を縮小するために使われますが、ウェブページやアプリのデザインによっては、この操作を禁止したい場合があります。

○ピンチイン禁止のメリット

ピンチインを禁止することで、ウェブページやアプリのレイアウトが崩れるのを防いだり、ユーザーが誤って操作してしまうのを避けることができます。

また、特定の要素や機能にフォーカスさせたい場合にも、ピンチインを禁止することが効果的です。

●ピンチイン禁止の5つの方法

○サンプルコード1:touchstartイベントを利用

このコードでは、touchstartイベントを使ってピンチイン操作を禁止しています。

この例では、指が画面に触れた瞬間のタッチ数をチェックし、二本以上の指が触れた場合に操作をキャンセルしています。

document.addEventListener("touchstart", (e) => {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });

○サンプルコード2:touchmoveイベントを利用

このコードでは、touchmoveイベントを使ってピンチイン操作を禁止しています。

この例では、指が画面上を動いたときのタッチ数をチェックし、二本以上の指が動いた場合に操作をキャンセルしています。

document.addEventListener("touchmove", (e) => {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });

○サンプルコード3:gesturestartイベントを利用

このコードでは、gesturestartイベントを使ってピンチイン操作を禁止しています。

この例では、ピンチ操作が開始された瞬間にイベントをキャンセルし、ピンチイン操作が実行されないようにしています。

document.addEventListener("gesturestart", (e) => {
  e.preventDefault();
});

○サンプルコード4:CSSを使った禁止方法

このコードでは、CSSのtouch-actionプロパティを使ってピンチイン操作を禁止しています。

この例では、HTMLの<body>要素にtouch-actionプロパティを適用し、ピンチイン操作を無効にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      touch-action: pan-x pan-y;
    }
  </style>
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

○サンプルコード5:ライブラリを活用

このコードでは、ライブラリ「Hammer.js」を使ってピンチイン操作を禁止しています。

この例では、Hammer.jsを導入し、インスタンスを生成して、ピンチイン操作を無効にしています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
</head>
<body>
  <!-- コンテンツ -->

  <script>
    const body = document.body;
    const hammer = new Hammer(body);
    hammer.get('pinch').set({ enable: false });
  </script>
</body>
</html>

●注意点と対処法

  • イベントリスナーの第三引数に{ passive: false }を指定して、preventDefault()が正しく機能するようにしてください。
  • ブラウザやデバイスによっては、一部の方法が効果がない場合があります。
    複数の方法を組み合わせて使うことで、対応範囲を広げられます。

●応用例とサンプルコード

○応用例1:特定の要素だけピンチイン禁止

このコードでは、特定の要素に対してだけピンチイン操作を禁止しています。

この例では、id="no-pinch"が指定された要素に対して、ピンチイン操作を無効にしています。

document.getElementById("no-pinch").addEventListener("touchmove", (e) => {
  if (e.touches.length > 1) {
    e.preventDefault();
  }
}, { passive: false });

○応用例2:ピンチインとピンチアウトを制御

このコードでは、ピンチインとピンチアウト操作を制御しています。

この例では、スケールの上限と下限を設定し、指定範囲内でのみ拡大・縮小操作が可能になるようにしています。

const MIN_SCALE = 1; // 最小スケール
const MAX_SCALE = 3; // 最大スケール
let scale = 1; // 現在のスケール

const target = document.getElementById("zoom-target");

const hammer = new Hammer(target);
hammer.get("pinch").set({ enable: true });

hammer.on("pinchstart pinchmove", (e) => {
  scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, e.scale));
  target.style.transform = `scale(${scale})`;
});

hammer.on("pinchend", () => {
  // ピンチ操作が終了した時の処理
});

この例では、ピンチ操作を制御するために、Hammer.jsライブラリを利用しています。

zoom-targetというIDを持つ要素に対してピンチ操作が行われたとき、スケールが指定された範囲内に収まるように調整しています。

まとめ

この記事では、ピンチイン操作を禁止する方法とその応用例を紹介しました。

JavaScriptやCSSを使ってピンチイン操作を制御することで、ユーザーにとってより使いやすいウェブページやアプリを提供できます。

また、ライブラリを活用することで、簡単にピンチ操作を制御できます。

ただし、ブラウザやデバイスによっては一部の方法が効果がない場合がありますので、複数の方法を組み合わせて使うことを検討してください。