IIIF実践入門ガイド — 画像配信の基礎からビューア構築まで

本書の目的 IIIF（International Image Interoperability Framework、通称「トリプルアイエフ」）は、デジタル画像をWeb上で相互運用可能な形で公開・共有するための国際的な標準フレームワークです。世界中の図書館、博物館、美術館、大学などの文化機関が採用しており、デジタルアーカイブの基盤技術として急速に普及しています。 しかし、IIIFに関する体系的な日本語の技術書はまだ多くありません。公式ドキュメントは英語で書かれており、仕様書を読み解くだけでは実際にどう活用すればよいのかが分かりにくいという声をよく耳にします。 本書は、IIIFの概念理解からイメージサーバの構築、マニフェストファイルの作成、ビューアの活用までを体系的に学べる実践入門ガイドです。読者が本書を通じて、IIIFを「知っている」状態から「使える」状態へとステップアップすることを目指しています。 対象読者 本書は、以下のような方々を主な対象読者として想定しています。 Webエンジニア・開発者 画像配信の新しいアプローチに興味がある方、デジタルアーカイブシステムの開発に携わる方。IIIFのAPIを理解し、サーバやビューアの構築を行いたい方に向けて、技術的な実装手順を具体的に解説します。 デジタルヒューマニティーズ研究者 人文学研究においてデジタル画像資料を扱う方。複数機関の画像を横断的に比較したり、画像にアノテーションを付与したりといった研究活動にIIIFを活用したい方に、その可能性と具体的な方法を示します。 博物館・図書館・文書館の専門職員 所蔵資料のデジタル公開を検討している方、既存のデジタルアーカイブシステムをIIIF対応にアップグレードしたい方。技術的な背景を理解することで、開発者との協働やシステム選定をより適切に行えるようになります。 デジタルアーカイブに関心のある学生 情報学、図書館情報学、デジタルヒューマニティーズなどを学ぶ学生の方。IIIFの基礎を体系的に学ぶことで、卒業研究やプロジェクトに活用できるようになります。 本書で学べること 本書を読み終えた時点で、読者は以下のことができるようになります。 IIIFの全体像を把握し、各APIの役割と関係性を説明できる IIIF Image APIの仕組みを理解し、画像配信サーバを構築できる IIIF Presentation APIを用いたマニフェストファイルを作成できる Miradorをはじめとする主要なIIIFビューアを導入・カスタマイズできる アノテーション、音声・動画資源、地理参照といった発展的な機能を活用できる IIIFエコシステム全体を俯瞰し、自身のプロジェクトに適した技術選定ができる 本書の構成 本書は全16章で構成されており、基礎から応用へと段階的に進む構成になっています。 第I部: 基礎編（第1章〜第3章） IIIFとは何か、その概念と全体像を把握するところから始めます。Image APIの仕組みを理解し、画像のURLがどのように構成されるかを学びます。 第1章「IIIFとは何か」: IIIFの概要、歴史、主要API、エコシステムの全体像 第2章「IIIF Image API入門」: Image APIのURI構造、レベルの違い、info.jsonの役割 第II部: イメージサーバ構築編（第3章〜第5章） 実際に画像を配信するサーバを構築します。Cantaloupeによる本格的なサーバ構築から、サーバレスアーキテクチャ、ピラミッドTIFFの活用まで、実運用を見据えた技術を習得します。 第3章「Cantaloupe入門」: Java製イメージサーバの導入と設定 第4章「サーバレスIIIF」: AWS Lambdaなどを活用したサーバレス構成 第5章「ピラミッドTIFF」: 大規模画像の効率的な配信手法 第III部: プレゼンテーション編（第6章〜第7章） Presentation APIを学び、画像に構造的なメタデータを付与するマニフェストファイルの作成方法を習得します。 第6章「Presentation API入門」: マニフェスト、キャンバス、アノテーションの概念 第7章「マニフェスト作成」: 実践的なマニフェストファイルの作成手順 第IV部: ビューア活用編（第8章〜第10章） IIIFに対応した各種ビューアの導入方法とカスタマイズを学びます。 第8章「Mirador入門」: 高機能ビューアMiradorの基本操作と導入 第9章「Miradorプラグイン」: プラグインによる機能拡張 第10章「その他のビューア」: Universal Viewer、Clover、TIFYなど 第V部: 応用編（第11章〜第15章） ...

IIIFの概要 IIIF（International Image Interoperability Framework）は、デジタル画像をWeb上で相互運用可能な形で公開・共有するための国際標準フレームワークです。「トリプルアイエフ」と読みます。 世界中の図書館、博物館、美術館、大学が所蔵する膨大なデジタル画像資料は、それぞれ独自のシステムで管理・配信されてきました。ある機関の画像を閲覧するにはその機関専用のビューアを使う必要があり、複数の機関の画像を横断的に比較したり、異なるシステム間で画像を再利用したりすることは困難でした。 IIIFはこの課題に対して、画像の配信方法とメタデータの記述方法を標準化することで解決を図ります。IIIFに準拠したシステムであれば、機関を問わず同じビューアで画像を閲覧でき、異なる機関の画像を並べて比較したり、別のアプリケーションで自由に利用したりすることが可能になります。 歴史的背景 IIIFの取り組みは2011年頃から始まりました。スタンフォード大学、大英図書館、フランス国立図書館、ノルウェー国立図書館など、大規模なデジタルコレクションを持つ機関が中心となり、画像配信の共通標準を策定するためのコミュニティが形成されました。 2012年に最初のImage APIの仕様がドラフトとして公開され、その後Presentation API、Content Search API、Authentication APIが順次策定されていきました。現在では、IIIFコンソーシアムとして正式に組織化され、世界中の数百にのぼる機関がIIIFを採用しています。 日本においても、国立国会図書館デジタルコレクション、国立情報学研究所（NII）、東京大学、京都大学をはじめとする多くの機関がIIIF対応を進めており、デジタルアーカイブの国際的な相互運用の基盤として定着しつつあります。 IIIFの仕様は継続的に更新されており、現在の主要な仕様バージョンはImage API 3.0、Presentation API 3.0です。バージョン2からバージョン3への移行では、JSON-LDの記述方法の改善や、音声・動画コンテンツへの対応拡張などが行われました。 IIIFの主要API IIIFは複数のAPIから構成されるフレームワークです。それぞれのAPIが異なる役割を担い、組み合わせることで豊かな画像体験を実現します。 Image API Image APIは、IIIFの中核をなすAPIです。画像の特定の領域を、指定したサイズ・回転・品質で取得するためのURLの構造を定義します。 { s c h e m e } : / / { s e r v e r } / { p r e f i x } / { i d e n t i f i e r } / { r e g i o n } / { s i z e } / { r o t a t i o n } / { q u a l i t y } . { f o r m a t } たとえば、ある画像の左上4分の1の領域を、幅300ピクセルで取得したい場合、URLのパラメータを変更するだけで目的の画像を取得できます。この仕組みにより、クライアント側が必要な部分だけを必要なサイズで取得できるため、大規模な高解像度画像の効率的な配信が可能になります。 ...

Image APIとは IIIF Image APIは、デジタル画像の配信方法を標準化するAPIです。画像の特定領域を、指定したサイズ・回転・品質で取得するためのURLの構造を定義しています。Webブラウザやビューアは、このURLの規則に従ってリクエストを送るだけで、必要な画像を取得できます。 このAPIが解決する根本的な課題は、「大きな画像を効率的に配信すること」です。たとえば、文化財のデジタル画像は数千万画素に及ぶことも珍しくありません。このような画像をそのままダウンロードさせるのではなく、閲覧者が必要としている部分だけを、適切なサイズで動的に配信することで、快適な閲覧体験を実現します。 URIの構造 Image APIの最も重要な概念は、画像取得のためのURI構造です。以下の形式で画像を指定します。 { s c h e m e } : / / { s e r v e r } / { p r e f i x } / { i d e n t i f i e r } / { r e g i o n } / { s i z e } / { r o t a t i o n } / { q u a l i t y } . { f o r m a t } 各パラメータの意味は次のとおりです。 ...

IIIF Image APIに準拠した画像配信を行うには、イメージサーバが必要です。本章では、オープンソースのIIIFイメージサーバとして広く利用されている Cantaloupe を取り上げ、導入から本番運用までの手順を体系的に解説します。 Cantaloupeの概要と特徴 Cantaloupe は、Javaで実装されたオープンソースのIIIF Image APIサーバです。IIIF Image API 2.x および 3.0 に対応しており、以下のような特徴を持っています。 多様な画像フォーマット対応: JPEG、PNG、TIFF（ピラミッドTIFF含む）、JPEG2000、GIF等を処理可能 複数のストレージバックエンド: ローカルファイルシステム、Amazon S3、Azure Blob Storage、HTTP経由の画像取得に対応 動的な画像処理: リクエストに応じたリサイズ、回転、領域切り出し、フォーマット変換をリアルタイムに実行 Delegate Script: Ruby言語によるスクリプトで、認証・認可やパス変換などの高度なカスタマイズが可能 管理画面（Control Panel）: Webブラウザからキャッシュやサーバ状態を確認・管理 オーバーレイ機能: ウォーターマーク（画像・テキスト）の重畳 高解像度画像の配信には、ピラミッドTIFF または JPEG2000 形式が推奨されます。一方、比較的小さい画像（数百ピクセル程度）であれば、JPEGやPNGをそのまま配信することも可能です。 Dockerを使ったクイックスタート Cantaloupeを最も手軽に試す方法は、Docker版を利用することです。IslandoraプロジェクトがDocker Hubにイメージを公開しています。 以下のリポジトリをクローンして、すぐに起動できます。 git clone https://github.com/nakamura196/docker_cantaloupe.git cd docker_cantaloupe docker compose up 起動後、http://localhost:8182/ にアクセスするとCantaloupeのトップページが表示されます。 プロジェクト内の iiif フォルダに画像ファイルを配置すれば、すぐにIIIF Image APIの動作を確認できます。たとえば sample.png を配置した場合、以下のようなURLで画像を操作できます。 # h # h t t i t 領 t n p 域 p f : の : o 切 / . / り / j l 出 l s o し o o c （ c n a 2 a の l 0 l 取 h 0 h 得 o , o s 2 s t 0 t : 0 : 8 8 1 の 1 8 位 8 2 置 2 / か / i ら i i i i 2 i f 0 f / 0 / 3 x 2 / 2 / s 0 s a 0 a m m p ピ p l ク l e セ e . ル . p ） p n n g g / / i 2 n 0 f 0 o , . 2 j 0 s 0 o , n 2 0 0 , 2 0 0 / f u l l / 0 / d e f a u l t . j p g Docker版はCantaloupeの動作確認やIIIF Image APIの学習に最適ですが、本番運用にはS3連携やHTTPS対応が必要になります。以降のセクションで順を追って説明します。 ...

前章ではCantaloupeを用いた自前のイメージサーバ構築を解説しました。本章では、サーバの管理が不要な サーバーレスアーキテクチャ を使ったIIIF画像配信について、AWSの serverless-iiif プロジェクトを中心に解説します。 サーバーレスアーキテクチャのメリット 従来型のイメージサーバ（Cantaloupe等）では、EC2インスタンスの起動・停止管理、OSのセキュリティパッチ適用、Java/ミドルウェアのアップデートなど、継続的な運用コストが発生します。サーバーレスアーキテクチャでは、これらの負担が大幅に軽減されます。 観点 従来型（Cantaloupe等） サーバーレス サーバ管理 OS・ミドルウェアの管理が必要 不要 スケーラビリティ インスタンスサイズの調整が必要 自動スケール コスト 常時起動で固定費が発生 リクエスト数に応じた従量課金 初期構築 比較的手間がかかる CloudFormation/SAMで自動構築 カスタマイズ性 Delegate Script等で柔軟 Lambda関数の範囲内 特に、アクセス頻度が少ないデジタルアーカイブでは、常時サーバを起動させておくコストが課題になりがちです。サーバーレス構成では、リクエストが発生したときだけ処理が実行されるため、コスト効率に優れます。 serverless-iiifの概要 serverless-iiif は、Samveraコミュニティが開発しているオープンソースプロジェクトで、AWSの各種サービスを組み合わせてIIIF Image APIサーバを構築します。 構成要素は以下のとおりです。 AWS Lambda: IIIF Image APIのリクエスト処理を行う関数 Amazon S3: ソース画像（ピラミッドTIFF等）の格納先 Amazon CloudFront: CDNによるキャッシュと配信の高速化 AWS SAM / CloudFormation: インフラの自動構築 IIIF Image API 2.x および 3.0 に対応しており、公式リポジトリでは「コスト効率が高く、無限にスケーラブルなIIIF Image Server」と紹介されています。 デプロイ手順 serverless-iiifのデプロイは、AWSマネジメントコンソールのGUIから行う方法と、AWS SAM CLIを使う方法があります。ここでは、より簡便なGUIベースの手順を解説します。 1. S3バケットの準備 まず、ソース画像を格納するS3バケットを作成します。バケット名は任意ですが、後の設定で使用するため控えておきます。 例 : m y - i i i f - i m a g e s 2. ソース画像のアップロード S3バケットにピラミッドTIFF形式の画像をアップロードします。画像の作成方法は次章「画像の前処理 – ピラミッドTIFFの作成」で詳述しますが、簡易的には以下のコマンドで変換できます。 ...

IIIFイメージサーバで高解像度画像を快適に配信するためには、ソース画像の前処理が不可欠です。本章では、ピラミッドTIFF（Pyramidal Tiled TIFF） の仕組みと作成方法を中心に、画像変換のベストプラクティスを解説します。 ピラミッドTIFFとは何か ピラミッドTIFFとは、1つのTIFFファイルの中に 複数の解像度レベル と タイル分割 を格納した画像形式です。 なぜ必要か デジタルアーカイブで扱う画像は、数万ピクセル四方に及ぶ高解像度のものが珍しくありません。たとえば、東京大学総合図書館所蔵の『百鬼夜行図』は 79,508 x 3,082 ピクセルという巨大な画像です。このような画像を通常のJPEGやTIFF形式で配信すると、以下の問題が生じます。 メモリ不足: サーバが全画像をメモリに読み込む必要があり、処理が破綻する 応答速度の低下: ユーザが画像の一部だけを閲覧したい場合でも、全体の読み込みが必要 ピラミッドTIFFは、これらの問題を以下の仕組みで解決します。 タイル分割（Tiled）: 画像を 256x256 ピクセル等の小さなタイルに分割して格納します。IIIFサーバは、リクエストされた領域に対応するタイルだけを読み込めばよいため、メモリ消費を最小限に抑えられます。 ピラミッド構造（Pyramidal）: 元画像のフルサイズに加え、1/2、1/4、1/8…と段階的に縮小した複数の解像度レベルを1つのファイルに格納します。ユーザが広域表示（ズームアウト）している際には低解像度レベルから、詳細表示（ズームイン）している際には高解像度レベルから、適切なタイルを返すことで、常に高速なレスポンスを実現します。 tiffinfo コマンドで確認すると、以下のように複数のTIFFディレクトリ（レイヤー）が格納されていることがわかります。 = = = = = = = = = = = = T T T T I I I I F F F F F F F F d d d d i i i i r r r r e e e e c c c c t t t t o o o o r r r r y y y y 0 1 2 3 = = = = = = = = = = = = ( ( ( ( フ 1 1 1 ル / / / サ 2 4 8 イ サ サ サ ズ イ イ イ : ズ ズ ズ : : : 1 3 6 3 1 3 6 3 6 0 5 2 6 0 0 5 2 x x x x 1 5 2 1 0 2 6 3 4 0 0 0 0 0 0 0 0 ) ) ) ) libvips/pyvipsを使った変換方法 ピラミッドTIFFの作成には libvips（vips） を強く推奨します。後述するImageMagickと比較して、正確なピラミッド構造を生成でき、出力ファイルサイズも小さくなる傾向があります。 ...

Presentation APIの役割と概要 IIIF Image APIが「画像そのものの配信」を担うのに対し、IIIF Presentation APIは「画像をどのように提示するか」を記述するためのAPIです。書籍であれば、どのページがどの順番で並ぶのか、各ページにどのようなメタデータが紐づくのか、目次構造はどうなっているのか、といった「構造的な情報」をJSON-LD形式で表現します。 Presentation APIが提供する情報は、ビューア（MiradorやUniversal Viewerなど）が画像を正しく表示するために不可欠です。例えば、巻物のように右から左へ読む資料であればviewingDirectionをright-to-leftに設定し、複数ページからなる書籍であれば各ページをCanvas（キャンバス）として定義します。このように、Presentation APIは画像の「見せ方」を機関やプロジェクトを超えて標準化する役割を持っています。 Presentation APIの仕様はJSON-LDで記述されるため、Linked Dataとしての特性も備えています。各リソースにはURIが割り当てられ、他の機関が公開するリソースとも相互参照が可能です。 Manifestの構造 Presentation APIの中心となるリソースがManifest（マニフェスト）です。マニフェストは1つのデジタルオブジェクト（書籍1冊、絵巻1巻など）を記述するJSON-LDファイルであり、以下のような階層構造を持ちます。 Manifest > Canvas > Annotation Manifest: デジタルオブジェクト全体を表すトップレベルのリソース。ラベル、メタデータ、権利情報、表示方向などを含む Canvas: 個々のページや画面に相当する仮想的な空間。幅と高さを持ち、ここに画像やテキストなどのコンテンツが配置される Annotation: Canvas上に配置されるコンテンツ。画像の場合はmotivationがpaintingのAnnotationとして記述される v3における基本的なManifestの構造は以下のようになります。 { "@context": "http://iiif.io/api/presentation/3/context.json", "id": "https://example.org/iiif/manifest.json", "type": "Manifest", "label": { "ja": ["資料タイトル"] }, "items": [ { "id": "https://example.org/iiif/canvas/p1", "type": "Canvas", "width": 6642, "height": 4990, "items": [ { "id": "https://example.org/iiif/canvas/p1/page", "type": "AnnotationPage", "items": [ { "id": "https://example.org/iiif/canvas/p1/page/imageanno", "type": "Annotation", "motivation": "painting", "body": { "id": "https://example.org/iiif/image/full/max/0/default.jpg", "type": "Image", "format": "image/jpeg", "service": [ { "id": "https://example.org/iiif/image", "type": "ImageService2", "profile": "level2" } ], "width": 6642, "height": 4990 }, "target": "https://example.org/iiif/canvas/p1" } ] } ] } ] } 注目すべき点として、Canvas自体は「仮想的な空間」であり、画像はpaintingモチベーションのAnnotationとしてCanvas上に配置されます。この設計により、1つのCanvas上に複数の画像を重ねたり、テキストや音声などのメディアを組み合わせたりすることが可能になっています。 ...

マニフェスト作成の全体像 前章でPresentation APIの仕様を学びましたが、本章では実際にマニフェストファイルを作成・管理するための具体的な手法を紹介します。マニフェストの作成方法は大きく分けて以下の3つのアプローチがあります。 手動作成: JSON-LDファイルをテキストエディタで直接記述する プログラムによる生成: PythonやJavaScriptなどのライブラリを使って自動生成する CMSによる管理: Headless CMSやデジタルアーカイブシステムを通じて管理する 少数の資料を扱う場合や仕様の学習目的であれば手動作成が適していますが、数百件以上の資料を扱うプロジェクトではプログラムによる自動生成が現実的です。また、継続的に資料を追加・更新するようなケースでは、CMSベースの管理が運用負荷を下げてくれます。 iiif-prezi3（Python）を使ったマニフェスト生成 Pythonでマニフェストを生成する場合、iiif-prezi3ライブラリが有力な選択肢です。このライブラリはIIIF Presentation API v3に対応しており、Pythonオブジェクトとしてマニフェストを構築し、仕様に準拠したJSONを出力できます。 インストールと基本設定 pip install iiif-prezi3 日本語の資料を扱う場合、言語設定をあらかじめ行っておくと便利です。 import iiif_prezi3 iiif_prezi3.config.configs['helpers.auto_fields.AutoLang'].auto_lang = "ja" この設定により、labelやmetadataの言語フィールドが自動的にjaとして出力されます。 Collectionの作成 collection = iiif_prezi3.Collection( id="https://example.org/iiif/collection.json", label="東寺百合文書", viewingDirection="right-to-left", provider=iiif_prezi3.ProviderItem( id="https://example.org/", label="提供機関名", ), homepage=iiif_prezi3.HomepageItem( id="https://example.org/", type="Text", label="提供機関名", format="text/html", language="ja" ), metadata=[ iiif_prezi3.KeyValueString(label="Attribution", value="帰属情報"), iiif_prezi3.KeyValueString(label="Rights", value="ライセンスURL"), ], rights="https://creativecommons.org/licenses/by/4.0/", ) iiif_prezi3.ProviderItemを使うと、type: "Agent"が自動的に設定されます。iiif_prezi3.KeyValueString関数を使うことで、labelとvalueが仕様に準拠した言語マップ配列として出力される点も、手動でJSONを書く場合に比べて大きな利点です。 JSON出力 with open("collection.json", "w") as f: f.write(collection.json(ensure_ascii=False, indent=2)) ensure_ascii=Falseを指定することで、日本語がエスケープされずにそのまま出力されます。本番環境向けにはindent=Noneとすることでファイルサイズを削減できます。 ManifestとCanvasの作成 Manifestやキャンバスについても同様のパターンで作成できます。特にキャンバスのサイズ指定については、iiif-prezi3の公式レシピ（https://iiif-prezi.github.io/iiif-prezi3/recipes/0004-canvas-size/）が参考になります。画像のURLとサイズ情報を元に、適切なCanvasとAnnotationを自動生成するコードを組めば、大量のページ画像を持つ資料でも効率的にマニフェストを作成できます。 Headless CMSを使ったマニフェスト管理 マニフェストの管理にHeadless CMSを活用するアプローチも有効です。CMSのGUI上でメタデータや画像情報を登録し、APIを通じてIIIFマニフェスト形式に変換して配信するという仕組みです。 Contentfulを使った実装例 Contentful（https://www.contentful.com/）では、以下のようなContent modelを設計します。 iiifモデル: ラベル、メタデータなどの基本情報 imageモデル: 画像URL、幅、高さの情報（Referenceフィールドでiiifモデルと紐付け） Nuxt3のサーバサイドAPIルートを作成し、ContentfulのAPIから取得したデータをIIIFマニフェストのJSON構造に変換して返却します。contentful npmパッケージを使用することで、ContentfulのAPIとの接続が容易に行えます。 microCMSを使った実装例 microCMS（https://microcms.io/）でも同様のアプローチが可能です。「カスタムフィールド」機能を使って、画像URL・幅・高さの3つのフィールドを持つカスタムフィールドを定義し、繰り返しフィールドとしてマニフェストのスキーマに追加します。これにより、複数の画像を持つ資料をGUI上で直感的に管理できます。 ...

Miradorの概要 Miradorは、IIIF対応の高機能画像ビューアです。Stanford大学を中心としたコミュニティによってオープンソースで開発されており、デジタルヒューマニティーズの研究や文化遺産機関のデジタルアーカイブで幅広く使用されています。 Miradorの最大の特徴はマルチウィンドウ表示です。複数のIIIFマニフェストを同時に開き、異なる機関が公開する画像を並べて比較閲覧できます。例えば、同じ作品の異本を複数機関から読み込んで同一画面上で対照することが可能です。 バージョンの歴史 Mirador 2: 初期の安定版。Scroll View（連続表示）などが標準で利用できた Mirador 3: Reactベースに書き直された大規模リファクタリング版。プラグインアーキテクチャの導入、Reduxによるステート管理が特徴。現在広く使われているバージョン Mirador 4: 2025年現在開発中のalpha版。内部APIの改善やinitialViewerConfigによる初期表示設定の強化など、新機能が追加されつつある 各バージョンは後方互換性が完全ではないため、プラグインやカスタマイズコードの移行には注意が必要です。 インストールと基本セットアップ Miradorの導入方法は主に3つあります。 CDN経由での利用 もっとも手軽な方法です。HTMLファイルに以下のコードを記述するだけでMiradorが動作します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <title>Mirador</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /> </head> <body> <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div> <script src="https://unpkg.com/mirador@latest/dist/mirador.min.js"></script> <script> Mirador.viewer({ id: "mirador", windows: [{ manifestId: "https://dl.ndl.go.jp/api/iiif/3437686/manifest.json", }], language: "ja", }); </script> </body> </html> npm経由でのインストール プロジェクトに組み込む場合はnpmを使います。 npm install mirador JavaScriptやTypeScriptのプロジェクトからインポートして使用できます。Mirador 4のローカル開発環境を立ち上げる場合は以下のようにします。 git clone https://github.com/projectmirador/mirador cd mirador pnpm i pnpm start ポート4444でローカル開発サーバが起動します。 ...

Miradorプラグインアーキテクチャの概要 Miradorは、IIIFビューアとして広く利用されているオープンソースソフトウェアであり、その最大の特徴の一つがプラグインによる拡張性です。Miradorのプラグインアーキテクチャは、Reactコンポーネントの差し込みとReduxストアの拡張を組み合わせた設計になっており、ビューア本体のコードを直接変更することなく、機能を追加・変更できます。 プラグインは主に以下の要素で構成されます。 target: プラグインを配置する場所（Miradorのコンポーネント名）を指定する。例えばWindowTopMenuはウインドウ上部のメニュー、WindowTopBarPluginAreaはウインドウバーの直接表示領域、OpenSeadragonViewerはビューア本体への追加を表す mode: コンポーネントの追加方法を指定する。addは既存のコンポーネントに追加、wrapは既存のコンポーネントをラップして機能を上書きする component: 実際に表示するReactコンポーネント mapDispatchToProps: Reduxのdispatchアクションをpropsとして渡す設定 mapStateToProps: Reduxのstateから必要な値をpropsとして取得する設定 config: 翻訳データなどの追加設定 以下は、ウインドウコピー機能を追加するプラグインの基本構造です。 export default { target: 'WindowTopMenu', mode: 'add', component: CopyWindowComponent, mapDispatchToProps: mapDispatchToProps, mapStateToProps: mapStateToProps, }; targetに指定可能なコンポーネント名は、Miradorのソースコードのcontainersディレクトリで確認できます。WindowTopBarPluginAreaを指定するとウインドウバーに直接アイコンを表示でき、WindowTopBarPluginMenuを指定すると三点ドットメニュー内にプラグインの項目を表示できるなど、用途に応じて使い分けが可能です。 主要なプラグインの紹介 Miradorのエコシステムには、公式およびコミュニティによる多数のプラグインが存在します。以下に代表的なものを紹介します。 mirador-image-tools 画像の操作機能を提供する公式プラグインです。90度単位の回転、明度・コントラストの調整、反転といった基本的な画像操作が可能になります。デジタルアーカイブの資料閲覧において、劣化した画像の視認性向上などに活用できます。 mirador-annotations IIIFアノテーションの作成・編集・保存機能を提供するプラグインです。デフォルトではローカルストレージにアノテーションが保存されますが、アダプタ機構により保存先を変更できます。例えば、Firestore用のアダプタを実装すれば、ユーザごとにクラウド上でアノテーションを管理することも可能です。Firestoreアダプタでは、Firebase Authenticationと連携してユーザ認証を行い、ログインユーザの付与したアノテーションのみを表示・編集できるようにした実装例があります。 mirador-sync-windows 複数ウインドウ間の表示を同期するプラグインです。異なるマニフェストの画像を並べて表示し、一方をスクロール・ズームすると他方も連動して動きます。資料の比較研究に有用です。 mirador-textoverlay OCR結果やトランスクリプションに基づく選択可能なテキストオーバーレイを表示するプラグインです。ALTO XMLやhOCRなどの形式に対応しています。日本語の縦書きテキストには標準では対応していませんが、フォークにより縦書き表示を実現した事例もあります。マニフェストのCanvas内でseeAlsoプロパティによりALTO XMLファイルへのURLを指定する形式で利用します。 mirador-rotation-plugin 任意の角度で画像を回転できるプラグインです。mirador-image-toolsの90度単位回転に対し、1度単位のスライダーによる微調整が可能です。90度単位の回転ボタン、リセットボタン、ヘルプ機能なども搭載しています。URLパラメータによるマニフェストや初期回転角度の指定にも対応しており、外部からの呼び出しや共有が容易です。 mirador-disable-zoom ズーム操作を無効化するプラグインです。プレゼンテーション用途や、意図しないズーム操作を防ぎたい場合に利用します。UCLA Libraryによる Mirador 2 版を参考に、Mirador 4向けに再実装されています。 mirador-layer-slideshow-plugin マニフェスト内のレイヤーをスライドショー形式で自動切り替えするプラグインです。「起絵図」のように、同一キャンバス上の複数レイヤーを順次表示したい場合に活用できます。 プラグインの導入方法 npmパッケージを利用する方法 プラグインがnpmパッケージとして公開されている場合、以下のようにインストールして使用します。 npm install mirador mirador-rotation Miradorの初期化時に、プラグイン配列を第二引数として渡します。 import Mirador from 'mirador'; import { miradorRotationPlugin } from 'mirador-rotation'; Mirador.viewer({ id: 'mirador-viewer', windows: [{ rotationEnabled: true, manifestId: 'https://example.com/manifest.json', }], }, [...miradorRotationPlugin]); scriptタグで読み込む方法 CDNやビルド済みファイルを利用して、HTMLから直接読み込む方法もあります。この場合、Miradorとプラグインを1つのJavaScriptファイルにバンドルする必要があります（後述の「複数プラグインの統合とバンドル」を参照）。 <div id="demo"></div> <script src="mirador.js"></script> <script> Mirador.viewer({ id: 'demo', windows: [{ rotationEnabled: true, manifestId: 'https://example.com/manifest.json', }], }, [...miradorRotationPlugin]); </script> カスタムプラグイン開発の基本 自分でプラグインを開発する場合の手順を、回転プラグインの開発を例に解説します。 ...

ビューア選択の指針 IIIFビューアはMiradorだけではありません。プロジェクトの要件や対象コンテンツに応じて、最適なビューアを選択することが重要です。以下に主要なビューアの特徴を比較します。 ビューア 主な用途 対応コンテンツ フレームワーク 特徴 Mirador 研究・比較 画像中心 React マルチウインドウ、プラグイン拡張 Universal Viewer 汎用閲覧 画像・AV・3D Web Components 機関採用実績が豊富 OpenSeadragon 画像表示基盤 高精細画像 バニラJS 軽量・高性能・カスタマイズ自由 Clover IIIF 軽量閲覧 画像・AV React コンポーザブル設計 Ramp 音声・動画 AV特化 React 字幕・目次・マーカー対応 IIIF Curation Viewer キュレーション 画像 バニラJS 複数資料の切り出し・再構成 画像資料が中心で研究用途であれば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とします。 h t t p s : / / e x a m p l e . c o m / v i e w e r # ? c v = 1 京都大学貴重資料デジタルアーカイブや同志社大学デジタルコレクションなど、多くの機関でこの方式が利用されています。 ...

Web Annotation Data Modelの基礎 IIIFにおけるアノテーションは、W3CのWeb Annotation Data Modelに準拠しています。このモデルでは、アノテーションは「何について」（target）「何を言っているか」（body）「なぜ」（motivation）の3要素で構成されます。 { "type": "Annotation", "motivation": "commenting", "body": { "type": "TextualBody", "value": "これは桐壺の冒頭部分です" }, "target": "https://example.com/canvas/p1#xywh=100,200,300,150" } IIIF Presentation API v3では、アノテーションはCanvas内のannotationsプロパティにAnnotationPageとして格納されます。itemsプロパティ内のpainting motivationのアノテーションが画像や動画の描画に使われるのに対し、annotationsプロパティにはcommenting、tagging、supplementingなどのmotivationを持つ付加的なアノテーションが格納されます。 motivationの主な種類は以下の通りです。 painting: キャンバスへのコンテンツ描画（画像・動画・音声） commenting: テキストコメントの付与 tagging: タグの付与 supplementing: 補足情報（字幕やトランスクリプトなど）の提供 highlighting: 強調表示 アノテーションの種類 IIIFアノテーションでは、対象領域の指定方法によってさまざまな形状のアノテーションを表現できます。 矩形アノテーション（Fragment Selector） 最も基本的な形式で、xywhパラメータにより矩形領域を指定します。 { "target": "https://example.com/canvas/p1#xywh=100,200,300,150" } これは座標(100, 200)を起点とし、幅300、高さ150の矩形を表します。シンプルで処理が軽いため、多くのユースケースで利用されます。 SVGアノテーション（SVG Selector） SVGのpath要素を使って、任意の形状の領域を指定できます。ピンマーカーや複雑な形状の表現に適しています。 { "target": { "source": "https://example.com/canvas/p1", "type": "SpecificResource", "selector": { "type": "SvgSelector", "value": "<svg xmlns='http://www.w3.org/2000/svg'><path d='M2798,1309c0,-34 17,-68 51,-102...' fill-opacity='0.5' fill='#F3AA00' stroke='#f38200'/></svg>" } } } SVG Selectorでは色や透明度も指定できるため、視覚的に豊かなアノテーション表現が可能です。Miradorなどのビューアで正しく描画されます。 多角形アノテーション SVG Selectorの応用として、多角形（ポリゴン）による領域指定があります。古地図上の地名や不規則な形状のテキスト領域など、矩形では正確に囲めない対象に有効です。 FragmentSelectorとSvgSelectorの併用 傾いた文字や回転した領域を扱う場合、FragmentSelectorとSvgSelectorの両方を使用することで、効率的な処理が可能になります。 ...

IIIF AV（Audio/Visual）の概要 IIIF Presentation API 3.0では、画像だけでなく音声・動画コンテンツも統一的なフレームワークで扱えるようになりました。これがIIIF AV（Audio/Visual）と呼ばれる機能群です。 画像の場合、Canvasにはwidthとheightが設定されますが、AV資料ではduration（再生時間、秒単位）が加わります。動画の場合はwidth、height、durationの3つを、音声の場合はdurationのみを指定します。 { "id": "https://example.com/canvas", "type": "Canvas", "height": 480, "width": 640, "duration": 619.62 } AV資料に対しても、画像と同様にアノテーションを付与できます。時間軸上の特定区間を指定するには、targetにMedia Fragment形式（#t=開始,終了）を使用します。 h t t p s : / / e x a m p l e . c o m / c a n v a s # t = 1 0 . 5 , 2 5 . 3 これにより、字幕、タグ、目次（Range/Structure）など、時間に紐づいたメタデータを柔軟に表現できます。 iiif-prezi3を使った動画マニフェストの作成 iiif-prezi3はPythonでIIIF Presentation API v3のマニフェストを生成するためのライブラリです。IIIF Cookbookにも実装例が公開されています。 基本的な動画マニフェストの作成 from iiif_prezi3 import Manifest, AnnotationPage, Annotation, ResourceItem, config config.configs['helpers.auto_fields.AutoLang'].auto_lang = "ja" manifest = Manifest( id="https://example.com/manifest.json", label="動画サンプル" ) canvas = manifest.make_canvas(id="https://example.com/canvas") anno_body = ResourceItem( id="https://example.com/video.mp4", type="Video", format="video/mp4" ) anno_page = AnnotationPage(id="https://example.com/canvas/page") anno = Annotation( id="https://example.com/canvas/page/annotation", motivation="painting", body=anno_body, target=canvas.id ) # 高さ・幅・再生時間を設定 hwd = {"height": 480, "width": 640, "duration": 619.62} anno_body.set_hwd(**hwd) canvas.set_hwd(**hwd) anno_page.add_item(anno) canvas.add_item(anno_page) print(manifest.json(indent=2)) ResourceItemのtypeには、動画の場合は"Video"、音声の場合は"Sound"を指定します。formatにはMIMEタイプを指定します。set_hwd()メソッドにより、bodyとcanvasの両方にサイズと再生時間を設定します。 ...

ジオリファレンスとは ジオリファレンス（地理参照）とは、画像上の座標を実世界の地理座標に対応づける処理のことです。歴史研究やデジタルアーカイブの分野では、古地図や鳥瞰図といった歴史的な画像資料を現代の地図と重ね合わせる際にこの技術が不可欠となります。 たとえば、江戸時代に描かれた城下町の絵図に描かれた寺社や道の位置を、現在のGoogleマップやOpenStreetMap上で確認したい場合を考えます。絵図上のある点が「緯度35.7151、経度139.7623」に相当するといった対応関係を定義するのがジオリファレンスです。こうした対応点（Ground Control Point, GCP）を複数設定することで、画像全体を地理座標系にマッピングし、現代地図上に重畳表示することが可能になります。 従来、ジオリファレンスはQGISなどの専門的なGISソフトウェアで行われてきましたが、IIIFの拡張仕様によってWebブラウザ上で完結する新しいワークフローが登場しています。 IIIF Georeference Extensionの仕組み IIIF Georeference Extensionは、IIIF Presentation API 3.0のCanvasに対して地理参照情報を付与するための拡張仕様です。公式仕様は以下で公開されています。 https://iiif.io/api/extension/georef/ この仕様の中核は、georeferencingというmotivationを持つAnnotationです。AnnotationのbodyとしてFeatureCollectionを記述し、その中に画像座標と地理座標の対応関係を定義します。 { "@context": [ "http://iiif.io/api/extension/georef/1/context.json", "http://iiif.io/api/presentation/3/context.json" ], "type": "Canvas", "annotations": [ { "type": "AnnotationPage", "items": [ { "type": "Annotation", "motivation": "georeferencing", "body": { "type": "FeatureCollection", "transformation": { "type": "polynomial", "options": { "order": 1 } }, "features": [ { "type": "Feature", "properties": { "resourceCoords": [6690, 7517] }, "geometry": { "type": "Point", "coordinates": [139.7623, 35.7151] } } ] } } ] } ] } 各Featureのproperties.resourceCoordsが画像上のピクセル座標（x, y）を、geometry.coordinatesが地理座標（経度, 緯度）を表します。transformationには座標変換の手法を指定でき、多項式変換（polynomial）やThin Plate Spline変換が利用可能です。 この仕様の優れた点は、ジオリファレンス情報をAnnotationとして表現することで、元の画像データやマニフェストを変更せずに地理情報を後から追加できることです。IIIFの設計思想である「分散的なメタデータの付与」を踏襲しています。 Allmapsを使ったジオリファレンス Allmapsは、IIIF対応画像に対してブラウザ上でジオリファレンスを行えるオープンソースのツールセットです。 https://allmaps.org/ ジオリファレンスの手順 Allmaps Editorでの作業は、以下の流れで進めます。 画像の指定: Allmaps Editor（https://editor.allmaps.org/）にアクセスし、IIIF画像のURLまたはマニフェストURLを入力します。IIIF Image APIのinfo.jsonのURLを直接指定することも可能です。 ...

IIIF Auth APIの必要性 IIIFは画像の相互運用性を重視するフレームワークですが、すべての画像が無制限に公開できるわけではありません。著作権の保護、利用規約への同意、館内限定公開、有償コンテンツなど、さまざまな理由で画像へのアクセスを制限する必要があるケースは数多く存在します。 たとえば、以下のようなシナリオが考えられます。 著作権保護: 著作権が存続する作品の高解像度画像を、登録ユーザーにのみ提供したい 段階的アクセス: 未認証ユーザーにはグレースケールや低解像度の画像を表示し、認証後にフルカラー・高解像度画像を提供したい 館内限定: 図書館や美術館の施設内からのアクセスのみ許可したい 利用規約への同意: 画像を表示する前に利用規約への同意を求めたい IIIF Authentication APIは、これらの要件をIIIFビューアとイメージサーバーの間で標準的に処理するための仕様です。ビューアが認証の必要性を検知し、ユーザーに適切な認証手段を提示し、認証済みの状態で画像を取得する一連のフローを定義しています。 Auth API 1.0の概要 IIIF Auth API 1.0は、画像のinfo.jsonにサービス記述を追加する形で認証要件を表現します。認証のパターンとして以下の4つのインタラクションパターンが定義されています。 Login（ログイン） 最も一般的なパターンです。ユーザーにIDとパスワードの入力を求めます。ビューアは認証が必要であることを検知すると、ユーザーにログインを促すUIを表示します。ログインが完了すると、セッションCookieが設定され、以降のリクエストではフルアクセスが許可されます。 Clickthrough（クリックスルー） 利用規約への同意を求めるパターンです。ログイン情報は不要で、ユーザーが「同意する」ボタンをクリックするだけでアクセスが許可されます。規約を表示した上で明示的な同意を取得する仕組みとして利用されます。 Kiosk（キオスク） 施設内のIPアドレス範囲や特定のネットワークからのアクセスのみ許可するパターンです。ユーザーによる操作は不要で、サーバー側でアクセス元を判定して自動的に認証を行います。図書館内の端末でのみ高解像度画像を閲覧可能にするといった用途に適しています。 External（外部認証） CAS、Shibbolethなどの外部認証システムと連携するパターンです。機関が既に運用している認証基盤を利用して、IIIFリソースへのアクセス制御を行います。 info.jsonでの記述 Auth API 1.0では、info.jsonのserviceプロパティに認証サービスの情報を記述します。 { "@context": "http://iiif.io/api/image/2/context.json", "@id": "http://example.org/image/sample.jpg", "service": { "@context": "http://iiif.io/api/auth/1/context.json", "@id": "http://example.org/auth/cookie/login/sample.jpg", "profile": "http://iiif.io/api/auth/1/login", "label": "ログインしてください", "header": "認証が必要です", "description": "フルカラー画像を閲覧するにはログインが必要です。", "confirmLabel": "ログイン", "service": [ { "@id": "http://example.org/auth/token/login/sample.jpg", "profile": "http://iiif.io/api/auth/1/token" }, { "@id": "http://example.org/auth/logout/login/sample.jpg", "label": "ログアウト", "profile": "http://iiif.io/api/auth/1/logout" } ] } } ビューアはこの情報を読み取り、labelやdescriptionをユーザーに表示し、confirmLabelのボタンで認証フローを開始します。認証が成功すると、Tokenサービスからアクセストークンを取得し、以降の画像リクエストに使用します。 Auth API 2.0の新機能と実装 Auth API 2.0は、1.0の経験を踏まえた大幅な刷新です。主な変更点と新しいアーキテクチャを解説します。 Probe Serviceの導入 Auth API 2.0で最も重要な変更は、Probe Service（AuthProbeService2）の導入です。1.0ではinfo.jsonの取得時に直接認証状態が評価されていましたが、2.0ではProbe Serviceを介して認証状態を確認する間接的な仕組みに変更されました。 ...

IIIF関連ツールの全体マップ IIIFのエコシステムには、画像の配信から閲覧、メタデータの管理、研究活用に至るまで、多様なツールが存在します。本章では、IIIFを活用する上で知っておきたいツールとリソースを体系的に紹介します。 IIIFツールは大きく以下のカテゴリに分類できます。 イメージサーバー: 画像をIIIF Image APIに準拠して配信するサーバーソフトウェア（Cantaloupe、IIPImage、Serverless IIIFなど） ビューア: IIIF対応画像を閲覧するためのWebアプリケーション マニフェスト作成・編集ツール: IIIF Presentation APIに準拠したマニフェストJSONを作成・編集するツール バリデーションツール: マニフェストやImage APIのレスポンスが仕様に準拠しているか検証するツール コレクション管理ツール: 画像とメタデータを統合的に管理し、IIIFマニフェストを生成するプラットフォーム 研究支援ツール: 研究ワークフローにIIIFを組み込むためのツール ビューアの比較一覧 IIIFビューアは、ユーザーが画像コンテンツに触れる最前線のツールです。用途や要件に応じて適切なビューアを選択することが重要です。 Mirador https://projectmirador.org/ Mirador（ミラドール）は、IIIFコミュニティで最も広く使われている高機能ビューアです。スタンフォード大学を中心に開発されており、現在のメジャーバージョンはMirador 3です。 主な特徴: 複数のマニフェストを同時に開き、画像を並べて比較できる アノテーションの表示と作成に対応 プラグインシステムによる機能拡張が可能 IIIF Auth API 1.0に対応 Presentation API v2/v3の両方をサポート Miradorは研究者が異なる機関の資料を横断的に比較分析する場面で特に威力を発揮します。 Universal Viewer https://universalviewer.io/ Universal Viewer（UV）は、画像だけでなく音声、動画、3Dモデル、PDFなど多様なメディアタイプに対応したビューアです。 主な特徴: 多様なメディアタイプのサポート 検索機能（Content Search API対応） ダウンロード機能 組み込みやすいデザイン IIIFコレクションのブラウジング 図書館や美術館のデジタルコレクション公開サイトに組み込む用途で広く採用されています。 その他の注目ビューア ビューア URL 特徴 Annona https://ncsu-libraries.github.io/annona/ Webコンポーネントとして埋め込み可能 Clover https://samvera-labs.github.io/clover-iiif/ モダンなUIデザイン、AV対応 Glycerine Viewer https://demo.viewer.glycerine.io/ 高機能な学術向けビューア IIIF Curation Viewer http://codh.rois.ac.jp/software/iiif-curation-viewer/ CODHが開発、キュレーション機能が特徴 Image Annotator https://www.kanzaki.com/works/2016/pub/image-annotator 神崎正英氏が開発、アノテーション作成に特化 TIFY https://tify.rocks/ 軽量で組み込みやすい ビューアの選定にあたっては、IIIF公式サイトの「IIIF 3.0 Viewer Matrix」が参考になります。各ビューアがPresentation API 3.0のどのレシピ（機能）に対応しているかを一覧で確認できます。 ...