HTMLで簡単にピンチイン・ピンチアウトを実現！5つの方法とサンプルコード

はじめに
●HTMLでピンチイン・ピンチアウトを実現する方法
●注意点と対処法
●カスタマイズ方法
●応用例とサンプルコード
まとめ

はじめに

この記事を読めば、HTMLでピンチイン・ピンチアウトを簡単に実現する方法が身につきます。

スマートフォンやタブレットなどのタッチデバイスで、ピンチイン・ピンチアウトによるズーム操作は欠かせません。

しかし、これをHTMLで実装する方法は一体どうすればいいのでしょうか？

この記事では、初心者向けにHTMLでピンチイン・ピンチアウトを実現する方法を徹底解説します。

●HTMLでピンチイン・ピンチアウトを実現する方法

まずは、HTMLでピンチイン・ピンチアウトを実現する方法を5つ紹介します。

○方法1：メタタグでビューポートを設定する

最も簡単な方法は、HTMLの<head>タグ内にメタタグを追加してビューポートを設定することです。

下記のコードをコピー＆ペーストしてください。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=yes">
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

これで、デバイスの幅に合わせて表示され、ユーザーがピンチイン・ピンチアウトでズーム操作ができるようになります。

○方法2：JavaScriptを使ってピンチイベントを検出する

JavaScriptを使ってピンチイベントを検出し、ズーム操作を実装する方法もあります。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scale = 1;
    var pinchStartDistance = null;

    function handleTouchMove(e) {
      if (e.touches.length !== 2) {
        return;
      }

      var distance = Math.hypot(
        e.touches[0].pageX - e.touches[1].pageX,
        e.touches[0].pageY - e.touches[1].pageY
      );

      if (pinchStartDistance === null) {
        pinchStartDistance = distance;
        return;
      }

      scale *= distance / pinchStartDistance;
      pinchStartDistance = distance;
      document.body.style.transform = 'scale(' + scale + ')';
    }

    function handleTouchEnd() {
      pinchStartDistance = null;
    }

    document.body.addEventListener('touchmove', handleTouchMove);
    document.body.addEventListener('touchend', handleTouchEnd);
    document.body.addEventListener('touchcancel', handleTouchEnd);
  });
</script>
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

○方法3：ライブラリを利用する

ライブラリを利用すれば、簡単にピンチイン・ピンチアウト操作を実装できます。

下記は、Hammer.jsというライブラリを使った例です。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var scale = 1;
    var body = document.body;
    var hammer = new Hammer(body);

    hammer.get('pinch').set({ enable: true });

    hammer.on('pinchin pinchout', function(e) {
      scale *= e.scale;
      body.style.transform = 'scale(' + scale + ')';
    });
  });
</script>
</head>
<body>
  <!-- コンテンツ -->
</body>
</html>

○方法4：CSSのスケーリング機能を利用する

CSSのスケーリング機能を利用すれば、ピンチイン・ピンチアウト操作を実現できます。

下記のサンプルコードを参考にしてください。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  body {
    transition: transform 0.3s;
  }
  .zoom {
    transform: scale(2);
  }
</style>
</head>
<body>
  <!-- コンテンツ -->
  <button onclick="document.body.classList.toggle('zoom')">ズーム</button>
</body>
</html>

○方法5: フレームワークを活用する

フレームワークを活用することで、簡単にピンチイン・ピンチアウト操作を実現できます。

例として、Ionicフレームワークを使った実装方法を下記に示します。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionic/5.5.5/css/ionic.bundle.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ionic/5.5.5/js/ionic.bundle.min.js"></script>
</head>
<body>
  <ion-app>
    <ion-header>
      <ion-toolbar>
        <ion-title>ピンチイン・ピンチアウトデモ</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-scroll scrollX="true" scrollY="true" zoom="true">
        <!-- コンテンツ -->
      </ion-scroll>
    </ion-content>
  </ion-app>
</body>
</html>