Nextjsで簡単にステップ・ツアーを作成する方法

2025-01-08

2 months ago

開発環境

next 15.0.2
driver.js 1.3.1

前提

ウェブアプリケーションをユーザーにとって直感的に理解しやすくする方法の一つに、「オンボーディングツアー」があります。この記事では、人気のライブラリDriver.jsを使って、Next.jsプロジェクトにツアー機能を簡単に追加する方法を紹介します。

スタイリングの一部にtailwindを利用していますが本題とは関係ありません。

本題

Driver.js とは？

Driver.jsは、ウェブページ上の要素をハイライトしてユーザーに案内する「ステップ・ツアー」を簡単に作成できる軽量のJavaScriptライブラリです。

以下のような特徴があります。

直感的なAPI：数行のコードでツアー機能を作成可能。
カスタマイズ性：ポップアップのデザインやステップの挙動を柔軟に設定。
軽量：依存関係がなく、ページのパフォーマンスに影響を与えにくい。

実装サンプル

Step 1: ライブラリのインストール

まず、Driver.jsをインストールします。

npm install driver.js
# または
yarn add driver.js

Step 2: スタイルの読み込み

Driver.jsのポップアップデザインを有効にするため、CSSをインポートします。

※この記事ではTour.tsxというコンポーネントを利用します。

import 'driver.js/dist/driver.css';

Tour.tsx

Step 3: ツアー機能を実装

'use client';

// import { useEffect } from 'react';

import { driver } from 'driver.js';

import 'driver.js/dist/driver.css';

const startTour = () => {
  const driverObj = driver({
    showProgress: true,
    steps: [
      {
        element: '#step1',
        popover: {
          title: 'Step 1',
          description: 'これは最初のステップです。',
        },
      },
      {
        element: '#step2',
        popover: {
          title: 'Step 2',
          description: '次に進むステップです。',
        },
      },
      {
        element: '#step3',
        popover: {
          title: 'Step 3',
          description: '最後のステップです。',
        },
      },
    ],
  });

  driverObj.drive();
};

export const Tour = () => {
  // useEffect(() => {
  //   startTour();
  // }, []);

  return (
    <div className="space-y-8">
      <div id="step1">ツアーを開始します。</div>
      <div id="step2">ツアーでこの要素を案内します。</div>
      <div id="step3">ツアーを終了します。</div>
      <button className="rounded border p-2" onClick={startTour}>
        ツアーを開始
      </button>
    </div>
  );
};