読み込み中...

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

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

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

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

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

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

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

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

はじめに

JavaScriptでズーム操作を実装するための方法を詳しく解説する記事をお届けします。

ウェブページやアプリケーションにおいて、ズーム機能は非常によく使われる要素の一つです。

本記事では、JavaScriptを使ってズーム操作を簡単に実装できるよう、6つの異なるアプローチと具体的なサンプルコードを用意しました。

初心者の方でも理解しやすいよう、丁寧に説明していきますので、ぜひ最後までお付き合いください。

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

JavaScriptを用いてズーム操作を実装する前に、まずはHTMLファイルとCSSファイルを準備する必要があります。

ここでは、基本的なHTMLファイルとCSSファイルの例を紹介します。

このファイルを作成することで、JavaScriptによるズーム操作の実装に向けた土台が整います。

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を組み合わせてズーム操作を実現する方法です。

この手法では、画像をクリックするとズームインし、再度クリックすると元のサイズに戻る機能を実装します。

具体的なコード例を見てみましょう。

<!-- 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>

このサンプルコードでは、画像要素にクリックイベントを設定しています。

ユーザーが画像をクリックすると、zoomImage関数が呼び出されます。

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

CSSでは、’zoomed’クラスが適用された場合にtransform: scale(2)を指定し、画像サイズを2倍に拡大します。

また、transitionプロパティを使用することで、滑らかなズーム効果を実現しています。

●方法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>

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

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

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

event.preventDefault()を使用することで、ページ全体のスクロールを防止しています。

●方法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>

このサンプルコードでは、タッチコンテナ要素に対して2つのタッチイベントリスナーを設定しています。

touchstartイベントでは、ピンチ操作の開始時に初期の距離と拡大率を記録します。

touchmoveイベントでは、ピンチ操作中に現在の距離と初期の距離を比較して拡大率を計算し、画像の拡大・縮小を行います。

getDistance関数を使用して、2つのタッチポイント間の距離を計算しています。

●方法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>

このサンプルコードでは、<input type="range">要素を使用してスライダーを作成しています。

スライダーの値が変更されるたびにinputイベントが発生し、そのイベントリスナー内でスライダーの値を拡大率として画像に適用しています。

min、max、step属性を調整することで、ズームの範囲や細かさを制御することができます。

●方法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>

このサンプルコードでは、拡大ボタンと縮小ボタンにそれぞれclickイベントリスナーを設定しています。

ボタンがクリックされると、buttonScale変数が増減され、その値が画像の拡大率として適用されます。

scaleStep変数を調整することで、1回のクリックでの拡大・縮小の幅を変更することができます。

●方法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>

このサンプルコードでは、拡大・縮小ボタンに加えて、リセットボタンを追加しています。

拡大・縮小の処理では、Math.min()とMath.max()関数を使用して、拡大率が設定された範囲内に収まるようにしています。

リセットボタンをクリックすると、拡大率が1（元のサイズ）に戻ります。

まとめ

本記事では、JavaScriptを使って画像の拡大・縮小を行う6つの方法を詳しく解説しました。

それぞれの手法には特徴があり、開発するウェブサイトやアプリケーションの要件に応じて最適な方法を選択することが重要です。

ぜひ、本記事で紹介した手法を参考に、独自のアイデアを取り入れながら、魅力的なズーム機能を実装してみてください。

ユーザーにとって使いやすく、視覚的にも印象的なウェブサイトやアプリケーションを作り上げる参考となれば幸いです。