その他のIIIFビューア -- Universal Viewer・OpenSeadragon・Ramp

ビューア選択の指針

IIIFビューアはMiradorだけではありません。プロジェクトの要件や対象コンテンツに応じて、最適なビューアを選択することが重要です。以下に主要なビューアの特徴を比較します。

画像資料が中心で研究用途であればMiradorやOpenSeadragonが適しています。音声・動画資料を扱うならRampやClover IIIFが有力な選択肢です。デジタルアーカイブシステムでの汎用的な採用にはUniversal Viewerが広く使われています。自前のカスタムUIを構築したい場合は、OpenSeadragonを基盤として利用するのが効果的です。

Universal Viewer v4の導入と活用

Universal Viewer（UV）は、デジタルアーカイブシステムで広く採用されているIIIFビューアです。画像だけでなく、音声・動画・3Dコンテンツなど幅広いメディアに対応しています。

CDNを利用した導入

最もシンプルな導入方法はCDNからの読み込みです。ページリサイズに追従するレスポンシブなビューアを構成できます。

<div id="uv" class="uv"></div>
<script src="https://cdn.jsdelivr.net/npm/universalviewer/dist/esm/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/universalviewer/dist/esm/index.css">
<script>
  const { init } = UV;
  const params = new URLSearchParams(window.location.search);
  const manifest = params.get('manifest');
  init('uv', { manifest });
</script>

コマ指定によるURL共有

Universal Viewerが採用されたデジタルアーカイブでは、URLのフラグメントに#?cv={インデックス}を付与することで、特定のコマ（ページ）を指定したURLを作成できます。インデックスは0始まりであるため、2コマ目を指定するには#?cv=1とします。

京都大学貴重資料デジタルアーカイブや同志社大学デジタルコレクションなど、多くの機関でこの方式が利用されています。

Next.jsでの統合

Universal ViewerのnpmパッケージをNext.jsで使用する場合は、クライアントサイドレンダリングで初期化する必要があります。

'use client';

import { useEffect } from 'react';
import dynamic from 'next/dynamic';

function ViewerComponent({ manifest, cv, xywh }) {
  useEffect(() => {
    const { init } = require('universalviewer');
    require('universalviewer/dist/esm/index.css');
    init('uv', { manifest, canvasIndex: cv, xywh });
  }, [manifest, cv, xywh]);

  return (
    <div id="uv" className="uv" style={{ width: '100%', height: '60vh' }}></div>
  );
}

const Viewer = dynamic(() => Promise.resolve(ViewerComponent), {
  ssr: false,
});

export default Viewer;

cvパラメータでキャンバスのインデックスを、xywhパラメータで表示する矩形領域を指定できます。dynamicとssr: falseにより、サーバーサイドレンダリングを無効化しています。

OpenSeadragonの基本と拡張

OpenSeadragonは、高精細画像のズーム・パン・回転に特化したJavaScriptライブラリです。多くのIIIFビューア（MiradorやUniversal Viewerを含む）の内部でも画像表示エンジンとして採用されており、IIIFエコシステムにおける基盤的な存在です。

基本的な使い方

OpenSeadragonは、IIIF Image APIのinfo.jsonをタイルソースとして直接指定できます。

const viewer = OpenSeadragon({
  id: 'osd-viewer',
  tileSources: ['https://example.com/iiif/image/info.json'],
});

fitBoundsとfitBoundsWithConstraints

ビューポートを特定の矩形に合わせる2つのメソッドがあります。

• fitBounds(rectangle, immediately): 指定した矩形にビューポートを合わせます。immediatelyがtrueの場合はアニメーションなしで即座に移動します
• fitBoundsWithConstraints(rectangle, immediately): fitBoundsと同様の動作に加え、最小・最大ズームレベルやパン制約を考慮します。ユーザの操作が設定した制約を超えないよう制御される点が異なります

SVG Overlayプラグイン

OpenSeadragonにSVGオーバーレイを重ねることで、画像上にベクタグラフィックスを表示できます。アノテーションの可視化やインタラクティブな領域指定などに活用されます。

Vue3での使用

Vue3でOpenSeadragonを使用する場合、Nuxt3ではSSR時にブラウザAPIが利用できない問題が発生します。これを解決するため、クライアントサイドでのみ実行されるプラグインファイルを作成します。

// plugins/osd.client.js
import OpenSeadragon from 'openseadragon';
export default defineNuxtPlugin(() => {
  return {
    provide: { OpenSeadragon },
  };
});

ファイル名に.clientを含めることで、Nuxt3がクライアントサイドでのみこのプラグインを読み込みます。

Nuxt3でのSVG Overlay

Nuxt3でOpenSeadragonとSVG Overlayを組み合わせる場合も、上記のクライアント用プラグインを活用します。SVG Overlayの初期化は、OpenSeadragonのビューアインスタンスを作成した後に行います。

Clover IIIF – React向け軽量ビューア

Clover IIIFは、Samveraコミュニティが開発する拡張可能なIIIFフロントエンドツールキットです。Reactコンポーネントとして提供されており、コンポーザブルな設計で必要な機能を組み合わせて使うことができます。画像だけでなく、音声・動画コンテンツにも対応しています。

Next.jsでの使用例

Clover IIIFをNext.jsで利用する場合は、動的インポートとSSR無効化が必要です。

"use client";

import React, { Suspense } from "react";
import dynamic from "next/dynamic";
import { useSearchParams } from "next/navigation";

const Viewer = dynamic(
  () => import("@samvera/clover-iiif/viewer"),
  { ssr: false }
);

const WorkContent = () => {
  const searchParams = useSearchParams();
  const manifestId = searchParams.get('manifest')
    || "https://dl.ndl.go.jp/api/iiif/3437686/manifest.json";

  return (
    <article>
      <Viewer iiifContent={manifestId} />
    </article>
  );
};

iiifContentプロパティにIIIFマニフェストのURLを渡すだけで、ビューアが初期化されます。クエリパラメータからマニフェストURLを受け取る設計にすれば、汎用的なビューアページとして活用できます。

Clover IIIFは、マニフェスト内のrenderingプロパティに指定されたリソースも表示する機能を備えており、関連ファイルへのリンクを自動的に提示します。

Ramp – 音声・動画向けビューア

Ramp（@samvera/ramp）は、IIIF Audio/Visualに特化したメディアプレイヤーコンポーネントライブラリです。字幕表示、目次ナビゲーション、マーカー表示など、AV資料の閲覧に必要な機能が充実しています。

セットアップと起動

git clone https://github.com/samvera-labs/ramp
pnpm i
pnpm demo

注意点として、pnpm devを実行するとスタイルガイドのページが表示されるため、デモアプリを見たい場合はpnpm demoを使用します。

カスタマイズ

Rampは多くのカスタマイズオプションを提供しています。

再生開始時間の指定: IIIFPlayerコンポーネントのstartCanvasTimeプロパティにより、メディアの再生開始時間を秒単位で指定できます。

<IIIFPlayer
  manifestUrl={manifestUrl}
  startCanvasTime={canvasTime}
/>

レイアウトの変更: demo/app.jsを編集することで、メディアプレイヤーとメタデータ・文字起こしの配置をカスタマイズできます。

日本語化: 同じくアプリケーションファイルの編集により、UIの日本語化が可能です。

Filesタブ

マニフェストのrenderingプロパティで指定されたリソースが、Filesタブに表示されます。関連データセットやダウンロード可能なファイルへのリンクを提供する際に活用できます。

Markersタブ

highlightingmotivationを持つ時間指定のアノテーションが、Markersタブに表形式で表示されます。マーカー名のリンクをクリックすると、該当時間に遷移します。

アノテーションのtargetには#t={開始時間}の形式を含める必要があります。xywhによる空間指定は任意です。

{
  "type": "Annotation",
  "motivation": "highlighting",
  "body": {
    "type": "TextualBody",
    "value": "Scene name",
    "format": "text/html"
  },
  "target": "https://example.com/canvas#t=21.021&xywh=33,23,555,422"
}

Vercelへのデプロイ

Rampのデモアプリをデプロイする場合、Build Commandにnpm run demo:build、Output Directoryにdemo/distを設定します。Node.jsのバージョンは18.xが推奨されます。

IIIF Curation Viewer

IIIF Curation Viewerは、複数のIIIF画像から関心のある領域を切り出し、キュレーション（再構成）するためのビューアです。国立情報学研究所（NII）の人文学オープンデータ共同利用センター（CODH）が開発しています。

アノテーション機能

IIIF Curation Viewerは独自のアノテーション機能を持ち、矩形のアノテーションに対して色やテキストをカスタマイズできます。JSONデータを手動で編集する方法のほか、GUIベースの編集ツールも存在します。マーカーの色や表示文字列を変更することで、視覚的に分かりやすいアノテーション表示が可能です。

フレームワーク連携のポイント

IIIFビューアをモダンなWebフレームワークで使用する際、共通して注意すべきポイントがあります。

SSR（サーバーサイドレンダリング）への対応

IIIFビューアはブラウザのDOM APIに依存するため、SSRが有効な環境ではクライアントサイドでのみレンダリングする必要があります。

• Next.js: dynamic関数とssr: falseオプション、または'use client'ディレクティブを使用する
• Nuxt3: プラグインファイルに.clientサフィックスを付与し、クライアントサイド専用として読み込む
• Vue3: onMountedライフサイクルフック内でビューアを初期化する

パッケージの互換性

OpenSeadragonのバージョン更新に伴い、古いプラグイン（例: Annotorious OpenSeadragon Plugin）がpeer dependencyの制約で正常にインストールできない場合があります。--forceオプションや.npmrcでのlegacy-peer-deps=true設定が必要になることがあります。

クエリパラメータによる外部連携

多くのビューアでは、URLのクエリパラメータからマニフェストURLを受け取る設計が推奨されます。これにより、他のシステムからビューアページへのリンクを動的に生成できるようになります。

const params = new URLSearchParams(window.location.search);
const manifestUrl = params.get('manifest') || defaultManifestUrl;

ビューアの比較と使い分け

各ビューアにはそれぞれ得意分野があり、プロジェクトの要件に応じて使い分けることが重要です。

比較研究にはMirador。マルチウインドウでの資料比較、豊富なプラグインエコシステム、アノテーション機能が強みです。

汎用公開にはUniversal Viewer。デジタルアーカイブシステムとの統合実績が豊富で、画像・AV・3Dなど幅広いメディアに対応しています。コマ指定URLによる共有も容易です。

音声・動画にはRamp。字幕・目次・マーカーなどAV特有の機能が充実しており、IIIF AV仕様への対応が最も進んでいます。

カスタムUIにはOpenSeadragon。画像表示の基盤として利用し、その上に独自のUIを構築する用途に適しています。SVG OverlayやAnnotoriousなどのプラグインとの組み合わせで拡張できます。

React向け軽量ビューアにはClover IIIF。コンポーザブルな設計で、必要な機能だけを組み込んだ軽量なビューアを構築できます。

キュレーションにはIIIF Curation Viewer。複数資料からの領域切り出しと再構成という、他のビューアにはない独自の機能を持っています。

これらのビューアは排他的な選択肢ではなく、同一プロジェクト内で複数を併用することも一般的です。例えば、一般公開用にはUniversal Viewerを使い、研究者向けにはMiradorを提供し、AV資料にはRampを採用するといった構成が考えられます。