【Next.js】サイト上で画像をズームさせる機能を実装する時の備忘録

はじめに

今回モザイクアートを実装する上で、ユーザーがマスに使われている画像を確認できるようにするため、画像をズームできる機能を実装する必要がありました。今回は、Reactで簡単にズーム機能を実装できるライブラリ react-zoom-pan-pinch を使って、画像を拡大縮小・ドラッグ移動できるようにする方法を紹介します。

1. ライブラリのインストール

まずは、プロジェクトにライブラリを追加します。

npm install react-zoom-pan-pinch

2. 基本的な使い方

ライブラリが提供する TransformWrapper と TransformComponent を使って、ズーム可能な領域を定義します。

'use client'

import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'

export default function ZoomImage() {
  return (
    <TransformWrapper
      initialScale={1}
      minScale={1}
      maxScale={5}
      wheel={{ step: 0.2 }}
      doubleClick={{ disabled: true }}
    >
      <TransformComponent>
        <img
          src="/path/to/image.jpg"
          style={{ width: '100%', height: 'auto' }}
        />
      </TransformComponent>
    </TransformWrapper>
  )
}

3. 使う頻度が高そうだったオプション

オプション	説明
initialScale	初期ズーム倍率（デフォルトは1）
minScale	最小ズーム倍率（0.1〜など）
maxScale	最大ズーム倍率（例: 5）
wheel.step	ホイールスクロール時の拡大率
doubleClick	ダブルクリックによるズームの有効/無効
limitToBounds	ズーム後の移動範囲制限（falseにすると自由移動可能）

4. 応用：ズーム倍率の状態管理

ズーム倍率を取得・表示したい場合は、onZoomStopイベントを使います。

import { useState } from 'react'
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch'

export default function ZoomImageWithScale() {
  const [zoomLevel, setZoomLevel] = useState(1)

  return (
    <div>
      <p>現在のズーム倍率: {zoomLevel.toFixed(2)}x</p>
      <TransformWrapper
        initialScale={1}
        minScale={1}
        maxScale={5}
        onZoomStop={({ state }) => setZoomLevel(state.scale)}
      >
        <TransformComponent>
          <img src="/path/to/image.jpg" alt="Zoomable" />
        </TransformComponent>
      </TransformWrapper>
    </div>
  )
}

今回モザイクアートに使われているマスの画像をユーザーが確認できるようにする上でサーバー費も極力抑える必要がありました。

超高画質の画像を一気に読み込ませるわけにはいかないのでいくつかのエリアに分割し

ズームした後に、指定範囲内に見えてるエリアの高画質の画像を表示するといった実装をする必要がありました。今回はその実装のためこのonZoomStopイベントとIntersectionObserverを使いました。

5. 注意点

画像が例えば横幅1000pxだった場合枠はそれ以上大きくならなかったです。pcいっぱいに枠を置きたい場合はそのサイズの画像を用意する必要がありそうでした。

以上です
参考になれば幸いです