ナビゲーション (Navigation)

navigation オブジェクトは、Eliceプラットフォーム内で講義ページ間を移動するためのメソッドを提供します。

⚠️ すべての navigation メソッドは、コンテンツがEliceプラットフォームのiframe内に埋め込まれている場合にのみ正常に動作します。親フレームと postMessage を通じて通信します。

メソッド

previous (前のページへ移動)

前の講義ページへ移動します。

import { cdk } from './path/to/cdk';

cdk.navigation.previous();

next (次のページへ移動)

次の講義ページへ移動します。

import { cdk } from './path/to/cdk';

cdk.navigation.next();

getHasPrevious (前のページの存在確認)

前の講義ページが存在するかどうかを確認します。移動可能な場合は true を返し、そうでない場合は false を返します。

戻り値

型	説明
boolean	前のページへの移動が可能な場合は true を返します。

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasPrevious = await cdk.navigation.getHasPrevious();
  console.log('前のページが存在:', hasPrevious);
};

getHasNext (次のページの存在確認)

次の講義ページが存在するかどうかを確認します。移動可能な場合は true を返し、そうでない場合は false を返します。

戻り値

型	説明
boolean	次のページへの移動が可能な場合は true を返します。

import { cdk } from './path/to/cdk';

const checkNavigation = async () => {
  const hasNext = await cdk.navigation.getHasNext();
  console.log('次のページが存在:', hasNext);
};

使用例

ナビゲーションボタンの実装 (React)

import { cdk } from './path/to/cdk';
import { useState, useEffect } from 'react';

const NavigationButtons = () => {
  const [hasPrevious, setHasPrevious] = useState(false);
  const [hasNext, setHasNext] = useState(false);

  useEffect(() => {
    const checkNavigationState = async () => {
      const [prev, next] = await Promise.all([
        cdk.navigation.getHasPrevious(),
        cdk.navigation.getHasNext(),
      ]);
      setHasPrevious(prev);
      setHasNext(next);
    };

    checkNavigationState();
  }, []);

  return (
    <div>
      <button disabled={!hasPrevious} onClick={() => cdk.navigation.previous()}>
        前へ
      </button>
      <button disabled={!hasNext} onClick={() => cdk.navigation.next()}>
        次へ
      </button>
    </div>
  );
};