JavaScriptでズーム操作を簡単に!6つの方法とサンプルコード

JavaScriptを使ったズーム操作の実装方法JS
この記事は約15分で読めます。

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

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

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

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

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

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

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

はじめに

この記事を読めば、JavaScriptでズーム操作を簡単に実装できるようになります。

ズーム操作は、Webページやアプリケーションでよく使われる機能です。

今回は、初心者でも分かるように、6つの方法とサンプルコードを用意しました。

●JavaScriptでズーム操作を行うための前準備

JavaScriptを使ってズーム操作を実装する前に、まずHTMLファイルとCSSファイルを用意しましょう。

例として、下記のようなHTMLファイルとCSSファイルを作成してください。

HTMLファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ズーム操作のサンプル</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- ここにコンテンツを追加 -->
  <script src="script.js"></script>
</body>
</html>

CSSファイル

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

これらのファイルが用意できたら、JavaScriptを使ったズーム操作の実装に移りましょう。

●方法1:HTMLとCSSを使ったズーム操作

まずは、HTMLとCSSを使ってズーム操作を実装する方法を紹介します。

下記のサンプルコード1では、画像をクリックするとズームインし、もう一度クリックすると元のサイズに戻る機能を実装しています。

○サンプルコード1

<!-- HTML -->
<img id="sampleImage" src="画像のURL" alt="サンプル画像" onclick="zoomImage()">

<style>
  /* CSS */
  #sampleImage.zoomed {
    transform: scale(2);
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  function zoomImage() {
    const image = document.getElementById('sampleImage');
    image.classList.toggle('zoomed');
  }
</script>

このサンプルコード1では、画像をクリックするとzoomImage関数が実行されます。

関数内で、画像要素に’zoomed’というクラスを追加・削除することでズームイン・アウトを切り替えています。

また、CSSで’transform: scale(2)’を指定して、画像サイズを2倍にしています。

●方法2:マウスホイールを使ったズーム操作

次に、マウスホイールを使ってズーム操作を実装する方法を紹介します。

下記のサンプルコード2では、マウスホイールを操作することで画像の拡大・縮小ができます。

○サンプルコード2

<!-- HTML -->
<div id="container">
  <img id="sampleImage2" src="画像のURL" alt="サンプル画像">
</div>

<style>
  /* CSS */
  #container {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #sampleImage2 {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  const container = document.getElementById('container');
  const image = document.getElementById('sampleImage2');
  let scale = 1;

  container.addEventListener('wheel', function (event) {
    event.preventDefault();

    if (event.deltaY < 0) {
      scale += 0.1;
    } else {
      scale -= 0.1;
    }

    image.style.transform = `scale(${scale})`;
  });
</script>

このサンプルコード2では、container要素に対してマウスホイールのイベントリスナーを登録しています。

マウスホイールを操作すると、イベントリスナー内の処理が実行され、scale変数が更新されます。

その後、画像要素のスタイルに新しいスケール値が適用され、画像の拡大・縮小が行われます。

●方法3:ピンチイン・ピンチアウト操作を使ったズーム操作

タッチデバイスでのピンチイン・ピンチアウト操作を使ったズーム操作を実装する方法を紹介します。

下記のサンプルコード3では、タッチ操作で画像の拡大・縮小ができます。

○サンプルコード3

<!-- HTML -->
<div id="touchContainer">
  <img id="sampleImage3" src="画像のURL" alt="サンプル画像">
</div>

<style>
  /* CSS */
  #touchContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #sampleImage3 {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  const touchContainer = document.getElementById('touchContainer');
  const image3 = document.getElementById('sampleImage3');
  let touchScale = 1;

  let initialDistance = 0;
  let initialScale = 1;

  touchContainer.addEventListener('touchstart', function (event) {
    if (event.touches.length === 2) {
      initialDistance = getDistance(event.touches[0], event.touches[1]);
      initialScale = touchScale;
      event.preventDefault();
    }
  });

  touchContainer.addEventListener('touchmove', function (event) {
    if (event.touches.length === 2) {
      const distance = getDistance(event.touches[0], event.touches[1]);
      const scaleChange = distance / initialDistance;

      touchScale = initialScale * scaleChange;
      image3.style.transform = `scale(${touchScale})`;

      event.preventDefault();
    }
  });

  function getDistance(touch1, touch2) {
    const x = touch1.pageX - touch2.pageX;
    const y = touch1.pageY - touch2.pageY;

    return Math.sqrt(x * x + y * y);
  }
</script>

サンプルコード3では、touchContainer要素に対してタッチイベントリスナーを登録しています。

ピンチ操作が開始されたとき、touchstartイベントが発生し、初期の距離と拡大率が記録されます。

ピンチ操作中、touchmoveイベントが発生し、現在の距離と初期の距離を比較して拡大率が計算され、画像の拡大・縮小が行われます。

●方法4:スライダーを使ったズーム操作

スライダーを使って画像の拡大・縮小を行う方法を紹介します。

下記のサンプルコード4では、スライダーを操作することで画像の拡大・縮小ができます。

○サンプルコード4

<!-- HTML -->
<div id="sliderContainer">
  <img id="sampleImage4" src="画像のURL" alt="サンプル画像">
</div>
<input type="range" id="zoomSlider" min="0.1" max="3" step="0.1" value="1">

<style>
  /* CSS */
  #sliderContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #sampleImage4 {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  const sliderContainer = document.getElementById('sliderContainer');
  const image4 = document.getElementById('sampleImage4');
  const zoomSlider = document.getElementById('zoomSlider');

  zoomSlider.addEventListener('input', function () {
    const sliderScale = zoomSlider.value;
    image4.style.transform = `scale(${sliderScale})`;
  });
</script>

サンプルコード4では、スライダーの値が変更されるたびにinputイベントが発生します。

そのイベントリスナー内で、スライダーの値を拡大率として画像に適用しています。

●方法5:ボタンを使ったズーム操作

ボタンを使って画像の拡大・縮小を行う方法を紹介します。

下記のサンプルコード5では、拡大ボタンと縮小ボタンを使って画像の拡大・縮小ができます。

○サンプルコード5

<!-- HTML -->
<div id="buttonContainer">
  <img id="sampleImage5" src="画像のURL" alt="サンプル画像">
</div>
<button id="zoomIn">拡大</button>
<button id="zoomOut">縮小</button>

<style>
  /* CSS */
  #buttonContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #sampleImage5 {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  const buttonContainer = document.getElementById('buttonContainer');
  const image5 = document.getElementById('sampleImage5');
  const zoomIn = document.getElementById('zoomIn');
  const zoomOut = document.getElementById('zoomOut');

  let buttonScale = 1;
  const scaleStep = 0.1;

  zoomIn.addEventListener('click', function () {
    buttonScale += scaleStep;
    image5.style.transform = `scale(${buttonScale})`;
  });

  zoomOut.addEventListener('click', function () {
    buttonScale -= scaleStep;
    image5.style.transform = `scale(${buttonScale})`;
  });
</script>

サンプルコード5では、拡大ボタンと縮小ボタンをクリックすることで、画像の拡大・縮小ができます。

それぞれのボタンにclickイベントリスナーを設定し、拡大率を増減させて画像に適用しています。

●方法6:拡大率の制限と戻す機能を実装

拡大率に上限と下限を設ける方法と、元のサイズに戻す機能を実装する方法を紹介します。

下記のサンプルコード6では、拡大率の制限と元のサイズに戻す機能が実装されています。

○サンプルコード6

<!-- HTML -->
<div id="resetContainer">
  <img id="sampleImage6" src="画像のURL" alt="サンプル画像">
</div>
<button id="zoomInLimit">拡大</button>
<button id="zoomOutLimit">縮小</button>
<button id="resetZoom">リセット</button>

<style>
  /* CSS */
  #resetContainer {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
  }

  #sampleImage6 {
    position: absolute;
    transform-origin: center;
    transition: transform 0.3s;
  }
</style>

<script>
  // JavaScript
  const resetContainer = document.getElementById('resetContainer');
  const image6 = document.getElementById('sampleImage6');
  const zoomInLimit = document.getElementById('zoomInLimit');
  const zoomOutLimit = document.getElementById('zoomOutLimit');
  const resetZoom = document.getElementById('resetZoom');

  let limitScale = 1;
  const scaleStep = 0.1;
  const minScale = 0.5;
  const maxScale = 3;

  zoomInLimit.addEventListener('click', function () {
    limitScale += scaleStep;
    limitScale = Math.min(limitScale, maxScale);
    image6.style.transform = `scale(${limitScale})`;
  });

  zoomOutLimit.addEventListener('click', function () {
    limitScale -= scaleStep;
    limitScale = Math.max(limitScale, minScale);
    image6.style.transform = `scale(${limitScale})`;
  });

  resetZoom.addEventListener('click', function () {
    limitScale = 1;
    image6.style.transform = `scale(${limitScale})`;
  });
</script>

サンプルコード6では、拡大・縮小ボタンに上限と下限を設けています。

また、「リセット」ボタンをクリックすると、画像が元のサイズに戻ります。

まとめ

この記事では、JavaScriptを使って画像の拡大・縮小を行う方法を6つ紹介しました。

それぞれの方法によって、HTMLとCSSを使ったズーム操作、マウスホイールやピンチ操作を使ったズーム操作、スライダーやボタンを使ったズーム操作、拡大率の制限と戻す機能の実装ができます。

適切な状況や要件に合わせて、これらの方法を組み合わせたりカスタマイズしたりして、最適なズーム操作を実現してください。

それぞれの方法にはメリットとデメリットがあるため、プロジェクトのニーズに応じて適切な手法を選択することが重要です。

この記事で紹介した方法を参考にして、ユーザーにとって使いやすい、快適なウェブサイトやアプリケーションのズーム機能を実装してみてください。

最後に、これらの方法を理解し、自分のプロジェクトに適用できるようになることで、より高度なJavaScriptのスキルを身につけることができるでしょう。