EN
ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
ホーム » Tags

IIIF

IIIFによる画像・資料相互運用

Universal Viewer 4.xの「Unknown content type」エラーとローカルホスティングによる対処

Universal Viewer 4.xの「Unknown content type」エラーとローカルホスティングによる対処

発生した問題 Nuxt 3プロジェクトでIIIFマニフェストの画像を表示するために、Universal Viewer（UV）をiframeで埋め込んでいました。従来は外部の https://universalviewer.io/uv.html を参照していましたが、ある時点からビューアが表示されなくなりました。 ブラウザのコンソールには以下のエラーが出力されます。 SES Removing unpermitted intrinsics UV.js:2 Unknown content type 原因の調査 universalviewer.ioのリダイレクト まず確認したところ、universalviewer.io は universalviewer.dev にリダイレクトされるようになっていました。 <meta http-equiv="refresh" content="0; url=https://universalviewer.dev/uv.html"> リダイレクト先の universalviewer.dev/uv.html でも同じ「Unknown content type」エラーが発生します。公式サイト自体で問題が再現する状態でした。 埋め込み用HTMLの初期化方式の違い UV 4.xには2つのHTMLファイルが同梱されています。 uv.html：iframe埋め込み用。IIIFURLAdapter(true)（embeddedモード）で初期化 index.html：デモページ。IIIFURLAdapter()（通常モード）で初期化し、iiifManifestIdを明示的に渡す uv.htmlの埋め込みモードでは、IIIF Presentation API 2.0のマニフェストを読み込んだ際にコンテンツタイプの判定に失敗し、「Unknown content type」が発生するようです。 一方、デモページ（index.html）と同じ初期化方式を使うと正常に動作します。Netlifyにデプロイされた uv-v4.netlify.app で確認できました。 https://uv-v4.netlify.app/#?manifest=https://kokusho.nijl.ac.jp/biblio/200017711/manifest&cv=80 URLパラメータの形式 もうひとつの違いは、URLパラメータの渡し方です。 uv.html（埋め込み用）：?manifest=...#?cv=...（クエリパラメータ＋ハッシュ） index.html（デモ用）：#?manifest=...&cv=...（ハッシュパラメータのみ） 動作する方式はハッシュパラメータのみで完結する形式でした。 対処方法 1. UV 4.2.1をローカルに配置 npmパッケージからUV 4.2.1の必要ファイルを public/uv/ に配置しました。 npm pack universalviewer@4.2.1 tar xzf universalviewer-4.2.1.tgz 最終的に必要なファイルは以下の4点です。 public/uv/ ├── umd/ # UV本体 + チャンクJS（約190ファイル） ├── uv.css # スタイルシート ├── uv.html # 埋め込みページ（カスタム版） └── uv-iiif-config.json # IIIF設定 cjs/、esm/、デモ用のindex.htmlやコレクションJSONは不要です。 ...

2026年3月23日 · 2 分 · Nakamura
Claude Codeを使って動画に多言語字幕を自動生成し、IIIF v3マニフェストで公開する

Claude Codeを使って動画に多言語字幕を自動生成し、IIIF v3マニフェストで公開する

動画コンテンツに字幕をつける作業は手間がかかります。本記事では、Claude Code（CLI版Claude）を使い、動画のフレーム分析から多言語字幕（VTT）の生成、IIIF v3マニフェストの作成までを効率的に行う方法を紹介します。 実際のプロジェクトについてはこちらの記事をご覧ください。 全体の流れ 1. 動画ファイル（mp4）を用意する 2. ffmpegでシーンチェンジを検出 3. シーンチェンジポイントのフレームを抽出 4. Claude Codeでフレーム画像を読み取り、内容を把握 5. シーンチェンジのタイムスタンプに基づいてVTTファイルを作成 6. 英語字幕も同様に作成 7. IIIF v3マニフェストを作成 8. HTMLプレーヤーで動画・字幕・読み上げを同期 前提条件 Claude Code（CLI版） ffmpeg / ffprobe 字幕をつけたい動画ファイル（mp4） # macOSの場合 brew install ffmpeg Step 1: シーンチェンジの検出 動画の画面が切り替わるタイミングを自動検出します。これが字幕のタイムスタンプの基準になります。 ffmpeg -i "video.mp4" \ -vf "select='gt(scene,0.15)',showinfo" \ -vsync vfr -f null - 2>&1 \ | grep "pts_time" \ | sed 's/.*pts_time:\([0-9.]*\).*/\1/' 出力例： 3.033333 8.066667 20.066667 25.066667 32.100000 ... なぜシーンチェンジ検出が重要か 最初は3秒間隔でフレームを抽出していましたが、実際の画面切り替えとずれが生じました。シーンチェンジ検出を使うことで、実際に画面が変わるタイミングに基づいた正確な字幕タイミングが得られます。 Step 2: シーンチェンジポイントのフレーム抽出 mkdir -p scenes ffmpeg -i "video.mp4" \ -vf "select='gt(scene,0.15)'" \ -vsync vfr -q:v 2 \ scenes/scene_%03d.jpg Step 3: Claude Codeでフレーム画像の内容を読み取る Claude Codeのマルチモーダル機能で、抽出したフレーム画像の内容を読み取ります。 ...

2026年3月22日 · 2 分 · Nakamura
デジタル源氏物語 動画字幕プロジェクト：IIIF v3マニフェストによる多言語字幕の公開

デジタル源氏物語 動画字幕プロジェクト：IIIF v3マニフェストによる多言語字幕の公開

デジタル源氏物語の機能紹介動画に、日本語・英語の二言語字幕を付与し、IIIF v3マニフェストとして公開するプロジェクトを作成しました。 Demo: https://nakamura196.github.io/genji-movie/ GitHub: https://github.com/nakamura196/genji-movie 対象動画 以下の3本の機能紹介動画に字幕を付与しています。 動画 時間 内容 画像とテキストを一緒にみる 2:42 TEI & IIIFを活用したParallel Text Viewerの使い方 AI画像検索（改訂版） 4:19 くずし字OCRと類似度計算による写本画像の横断検索 パタパタ顔比較 1:38 vdiff.jsによる源氏百人一首の挿絵比較ツール 多言語字幕 各動画に日本語・英語のWebVTT字幕ファイルを用意しています。字幕は1文単位で分割されており、読みやすさを重視しています。 VTTファイルはそのままYouTubeの字幕としてもアップロードできます。 IIIF v3マニフェスト 各動画にIIIF Presentation API 3.0準拠のマニフェストファイルを作成しています。動画はpaintingのAnnotation、字幕はsupplementingのAnnotationとして記述しています。 { "annotations": [{ "type": "AnnotationPage", "items": [ { "type": "Annotation", "motivation": "supplementing", "label": { "ja": ["日本語"] }, "body": { "id": "https://example.com/ja.vtt", "type": "Text", "format": "text/vtt", "language": "ja" } }, { "type": "Annotation", "motivation": "supplementing", "label": { "en": ["English"] }, "body": { "id": "https://example.com/en.vtt", "type": "Text", "format": "text/vtt", "language": "en" } } ] }] } 複数のIIIF対応ビューアで表示可能 IIIF v3マニフェストを採用しているため、以下のIIIF対応ビューアで直接表示できます。 ビューア 動画再生 字幕表示 言語切替 備考 Player（本プロジェクト） ○ ○ ○ Web Speech APIによる読み上げ機能付き RAMP ○ ○ ○ AV資料に最も強い Theseus ○ ○ ○ IIIF対応の汎用ビューア Clover ○ ○ △ Samvera/Northwestern開発 Universal Viewer ○ △ - v4でAV対応改善 各ビューアへのリンクは、デモページの各動画カードに用意されています。 ...

2026年3月22日 · 1 分 · Nakamura
DH週間トピックス — 2026年3月第4週

DH週間トピックス — 2026年3月第4週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 NDL OCR-Lite のモバイル対応・段組み認識対応 国立国会図書館が開発した古典籍OCRエンジン「NDL OCR-Lite」のWebアプリケーション版がモバイル対応および段組み認識機能に対応しました。iPhone、iPad、Android端末でカメラや写真ライブラリから画像を選択してOCR処理が可能になったとのことです。また、段組みレイアウトの認識にも対応し、複雑な文書構造の処理精度が向上したようです。 NDL OCR-Lite Web版 @blue0620の投稿およびGitHub更新情報より 軽量AIモデルQwen 3.5 9Bの数学問題解答性能 @blue0620による投稿で、軽量AIモデル「Qwen 3.5 9B」をローカルサーバで動作させたところ、東京大学の数学問題を解答できたとの報告がありました。軽量モデルでありながら高い性能を示しており、今後の自治体等での活用可能性が示唆されています。 @blue0620の投稿より 筑摩書房版芥川龍之介全集専用OCRスクリプト NDL OCR-Liteを活用した、筑摩書房版芥川龍之介全集の特殊なレイアウト（本文2段・脚注1段）に対応した専用OCRスクリプトが開発されました。本文と脚注を分離して作品ごとに整理する機能を持つとのことです。 @tolle_et_legeの投稿より 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年3月21日 · 1 分 · Nakamura
Cantaloupe IIIFサーバーのキャッシュ最適化で画像配信を最大7.6倍高速化した

Cantaloupe IIIFサーバーのキャッシュ最適化で画像配信を最大7.6倍高速化した

はじめに IIIFに対応した画像サーバーであるCantaloupeを、S3をソースとしたDocker環境で運用しています。IIIFビューア（Mirador, OpenSeadragonなど）では、ズームやパンの操作のたびに数十〜数百のタイルリクエストが同時に発生します。 今回、キャッシュ設定の見直しとパラメータチューニングにより、タイル配信速度を最大7.6倍高速化できたので、その手法と効果を共有します。 環境 サーバー: AWS EC2（2 vCPU, 7.6GB RAM） Cantaloupe: islandora/cantaloupe:2.0.10（Cantaloupe 5.0.7ベース） 画像ソース: Amazon S3（S3Source） テスト画像: 25167×12483px のTIFF画像（512×512タイル） リバースプロキシ: Traefik v3.2 構成: Docker Compose 問題：デフォルト設定ではキャッシュが無効 islandora/cantaloupe イメージのデフォルト設定を調査したところ、以下の状態でした。 キャッシュ種別 デフォルト 説明 Derivative Cache（加工済み画像） 無効 同じリクエストでも毎回画像変換が発生 Source Cache（元画像のローカルコピー） 有効（FilesystemCache） S3から取得した元画像をローカルに保持 Info Cache（画像メタデータ） 有効（メモリ内） 画像の寸法・タイル情報を保持 Client Cache（HTTPヘッダ） 有効（max-age 30日） ブラウザ側のキャッシュ制御 最大の問題は Derivative Cache が無効であることです。IIIFビューアが同じタイルを再度リクエストした場合でも、毎回 S3 → ダウンロード → 画像変換 → レスポンス という処理が走ります。 ベンチマーク方法 単純なタイル一括テスト まず基本的な性能測定として、以下の条件で一括タイルベンチマークを行いました。 タイル数: 91タイル（zoom level 4、scaleFactor=4の全タイル） 同時接続数: 10（ブラウザの一般的な同時接続数） ツール: curl + xargs -Pによる並列リクエスト # タイルURLを生成し、10並列で同時リクエスト xargs -a tile_urls.txt -P 10 -I {} \ curl -s -o /dev/null -w "%{time_total}\n" "{}" Miradorシミュレーション 単純なタイル一括テストに加え、IIIFビューア（Mirador）の実際の操作フローを再現したベンチマークも行いました。Miradorでは、ユーザーが画像を開くと以下のリクエストが短時間に発生します。 ...

2026年3月18日 · 2 分 · Nakamura
FromThePage：クラウドソーシングで歴史文書を翻刻する

FromThePage：クラウドソーシングで歴史文書を翻刻する

はじめに FromThePage（フロム・ザ・ページ）は、歴史的文書のクラウドソーシング翻刻（トランスクリプション）に特化したウェブプラットフォームです。ボランティアの協力を得て、手書き文書や活字資料をテキストデータに変換する作業を効率的に管理できます。 米国議会図書館（Library of Congress）やスミソニアン協会（Smithsonian Institution）をはじめとする世界中の図書館・博物館・文書館で採用されており、デジタル・ヒューマニティーズ（DH）における文書デジタル化の中核ツールとなっています。 FromThePageの主な機能 クラウドソーシング翻刻 FromThePageの最大の特徴は、大規模な翻刻プロジェクトをクラウドソーシングで実施できる点です。 翻刻ワークフロー：翻刻→レビュー→承認の段階的なワークフロー リッチテキストエディタ：MarkdownやWikiマークアップに対応 バージョン管理：すべての編集履歴を保持 ボランティア管理：翻刻者の貢献度追跡、バッジシステム IIIF対応 FromThePageは、IIIF（International Image Interoperability Framework）に完全対応しています。 # IIIFマニフェストのインポート例 https://example.org/iiif/manifest/12345 IIIFマニフェストのインポート：外部のIIIF対応リポジトリから画像を直接取り込み Mirador統合：IIIF画像ビューアMiradorとのシームレスな連携 IIIF Content Search API：翻刻テキストをIIIF検索APIで公開 IIIFマニフェストのエクスポート：翻刻済みテキストを含むマニフェストの出力 構造化データ入力 単純な翻刻だけでなく、構造化されたデータの入力にも対応しています。 機能 説明 フィールドベース翻刻 カスタムフォームで構造化データを収集 メタデータ入力 文書のメタデータをフィールドごとに記録 スプレッドシート翻刻 表形式データの翻刻に特化 マークアップ翻刻 TEI-XMLなどのマークアップ付き翻刻 OCR連携 手動翻刻だけでなく、OCR（光学文字認識）との連携機能も備えています。 OCR前処理：OCRの出力結果を翻刻の初期テキストとして利用 OCR修正ワークフロー：ボランティアがOCR結果を修正 HTR対応：手書き文字認識（Handwritten Text Recognition）との連携 導入事例 米国議会図書館 Library of Congressは、By the People（旧Transcribe）プロジェクトでFromThePageを活用し、数万件の歴史的文書をボランティアの力で翻刻しています。大統領の手紙、南北戦争の記録、女性参政権運動の文書など、多様な資料が対象です。 スミソニアン協会 Smithsonian Transcription Centerでは、FromThePageを基盤に、博物館コレクションの翻刻プロジェクトを運営しています。自然史標本のラベル、日記、フィールドノートなどが翻刻されています。 その他の機関 ハンティントン図書館：中世写本の翻刻 テキサス州立図書館：歴史的法律文書の翻刻 各大学図書館：特殊コレクションのデジタル化 技術的な特徴 エクスポート形式 翻刻結果は、さまざまな形式でエクスポートできます。 TEI-XML：人文学テキストの標準的なマークアップ形式 Plain Text：プレーンテキスト HTML：ウェブ公開用 CSV：構造化データの表形式出力 IIIF Manifest：IIIF対応ビューアでの表示用 ALTO XML：ページレイアウト情報付きテキスト API # FromThePage APIの利用例 curl -H "Accept: application/json" \ https://fromthepage.com/api/v1/collections RESTful APIにより、翻刻データのプログラムによる取得が可能です。 ...

2026年3月15日 · 1 分 · Nakamura
Mirador：IIIF画像の比較・分析に最適なオープンソースビューア

Mirador：IIIF画像の比較・分析に最適なオープンソースビューア

はじめに デジタルヒューマニティーズの研究では、複数の資料を並べて比較検討することが頻繁に行われます。異なる写本を比較したり、修復前後の美術作品を並べて確認したりする場面では、高機能な画像ビューアが不可欠です。 本記事では、Stanford 大学と Harvard 大学が共同開発する IIIF 対応画像ビューア Mirador を紹介します。 Mirador とは Mirador は、IIIF（International Image Interoperability Framework）に対応した Web ベースの画像ビューアです。最大の特徴は、複数のウィンドウを同時に開いて画像を比較できるマルチウィンドウインターフェースです。 Apache 2.0 ライセンスで公開されており、学術機関を中心に世界中で広く利用されています。現在のバージョンは Mirador 3 で、React をベースとしたモダンなアーキテクチャで構築されています。 主な機能 マルチウィンドウ比較 Mirador のコア機能であるマルチウィンドウ表示により、複数の IIIF マニフェストから画像を同時に並べて比較できます。ウィンドウは自由にリサイズ・配置でき、研究者のワークスペースとして機能します。 アノテーション機能 IIIF のアノテーション仕様に対応しており、画像上に注釈を付けることができます。研究メモやタグ付けを画像に直接関連付けられるため、協調的な研究作業に適しています。 プラグインエコシステム Mirador 3 はプラグインアーキテクチャを採用しており、機能を拡張できます。代表的なプラグインには以下のようなものがあります。 mirador-image-tools — 画像の明るさ・コントラスト調整、反転、グレースケール変換 mirador-annotations — アノテーションの作成・編集 mirador-dl — 画像のダウンロード mirador-share — 共有リンクの生成 レイヤー表示 複数のレイヤーを重ねて表示する機能を備えており、例えば原本画像の上に翻刻テキストを重ねたり、異なる波長で撮影した画像を切り替えたりできます。 ドラッグ＆ドロップ IIIF マニフェスト URL をドラッグ＆ドロップでビューアに追加できます。異なる機関のコレクションから資料を集めて、一つのワークスペースで比較する作業が容易です。 導入方法 Mirador は npm パッケージとして提供されています。 npm install mirador React アプリケーションに組み込む場合は、以下のように設定します。 import Mirador from 'mirador'; const config = { id: 'mirador-viewer', windows: [{ manifestId: 'https://example.org/manifest.json' }] }; Mirador.viewer(config); DH における活用例 写本の比較研究 同じテキストの異なる写本を並べて表示し、文字の違いやレイアウトの差異を比較できます。中世ヨーロッパの写本研究や、日本の古典籍研究において効果的です。 ...

2026年3月15日 · 1 分 · Nakamura
Universal Viewer：IIIFに対応したマルチメディアビューアの決定版

Universal Viewer：IIIFに対応したマルチメディアビューアの決定版

はじめに デジタルアーカイブの世界では、画像だけでなく、音声、動画、3D モデルなど多様なメディアを統一的に閲覧できる仕組みが求められています。IIIF（International Image Interoperability Framework）は、こうしたデジタルコンテンツの相互運用性を実現するための国際的な標準仕様です。 本記事では、IIIF に完全準拠したオープンソースのマルチメディアビューア Universal Viewer（UV） を紹介します。 Universal Viewer とは Universal Viewer は、IIIF マニフェストを読み込んで、画像・音声・動画・3D モデルなどのデジタルコンテンツを表示するための Web ベースのビューアです。MIT ライセンスで公開されており、世界中の図書館・博物館・大学で採用されています。 英国図書館（British Library）をはじめ、多くの主要文化機関がコレクションの公開に Universal Viewer を利用しています。 主な機能 マルチメディア対応 Universal Viewer の最大の特徴は、単一のビューアで複数のメディアタイプに対応していることです。 画像 — OpenSeadragon を利用した高解像度画像のズーム・パン 音声 — 音声ファイルの再生とタイムライン表示 動画 — 動画コンテンツの再生 3D モデル — Three.js による 3D オブジェクトの表示と操作 PDF — ドキュメントの表示 IIIF 完全準拠 IIIF Presentation API および Image API に完全対応しています。IIIF マニフェスト URL を指定するだけで、メタデータや構造情報を含むリッチなビューイング体験を提供します。 サムネイルパネル コレクション内の全ページ・アイテムをサムネイルで一覧表示し、目的のページに素早くアクセスできます。大量のページを持つ書籍や写真コレクションの閲覧に便利です。 ダウンロード機能 閲覧中のコンテンツを各種サイズ・フォーマットでダウンロードできます。研究者が必要な画像を取得する際に役立ちます。 多言語対応 インターフェースは多言語に対応しており、日本語を含む多数の言語で利用できます。 ...

2026年3月15日 · 1 分 · Nakamura
TETRAS-IIIF：Mirador 4向けアノテーション・動画・マルチユーザー拡張

TETRAS-IIIF：Mirador 4向けアノテーション・動画・マルチユーザー拡張

TETRAS-IIIFとは TETRAS-IIIFは、フランスのオープンソース企業Tetras Libre SARLを中心に開発が進められている、Mirador 4向けのプラグイン・ツール群です。アノテーション編集、動画対応、マルチユーザー協調など、Miradorの機能を大幅に拡張する複数のプロジェクトで構成されています。 従来のmirador-annotationsプラグインの課題を解決し、最新のReact 18/19、MUI 5/7に対応した次世代のアノテーション基盤を提供しています。 Mirador Annotation Editor（MAE） 概要 Mirador Annotation Editor（MAE）は、Mirador 4向けのアノテーション作成・編集プラグインです。従来のmirador-annotationsの後継として位置づけられており、Apache 2.0ライセンスで公開されています。 デモ: https://tetras-iiif.github.io/mirador-annotation-editor/ npm: mirador-annotation-editor 主な特徴 Konva.jsベースの描画エンジン mirador-annotationsがPaper.jsを使用していたのに対し、MAEはKonva.jsを採用しています。矩形、楕円、ポリゴン、フリーハンドなどの図形描画に加え、テキストや画像のオーバーレイにも対応しています。 テンプレートシステム MAEの特徴的な機能として「テンプレート」があります。アノテーションの構造をあらかじめ定義しておくことで、統一的なフォーマットでのアノテーション作成が可能になります。たとえば、コメントテンプレートでは見出しと本文を含むHTML構造が自動的に生成されます。 Dublin Coreメタデータ アノテーションにDublin Coreベースのメタデータを付与できます。作成者、日付、言語などの標準的なメタデータフィールドにより、アノテーションの管理・検索が容易になります。 アダプターアーキテクチャ アノテーションの永続化について柔軟なアダプター機構を備えています。ローカルストレージへの保存は標準で提供されており、IIIFアノテーションサーバーへの接続も可能です。 クロスマニフェストリンク 異なるマニフェスト間でアノテーションをリンクする機能を持ちます。これにより、複数のIIIFドキュメントにまたがるアノテーションのネットワークを構築できます。 MAEV（Mirador Annotation Editor for Video） 概要 MAEVは、MAEの機能を動画にまで拡張したプラグインです。IIIF Presentation API 3.0の動画コンテンツに対して、空間的・時間的なアノテーションを付与できます。 デモ: https://tetras-iiif.github.io/mirador-annotation-editor-video/ npm: mirador-annotation-editor-video ライセンス: GPL-3.0 動画アノテーションの特徴 動画アノテーションでは、画像アノテーションの空間的なターゲティング（画面上のどこ）に加えて、時間的なターゲティング（いつ）が可能です。特定の時刻範囲に限定したアノテーションを作成でき、動画の再生に合わせてアノテーションが表示されます。 MAEVの利用にはmirador-videoフォークが必要です。 mirador-video mirador-videoは、Mirador 4のフォークで、動画の表示・アノテーション・フィルタリング機能を追加したものです。React 18/19およびMUI 7に対応しており、Apache 2.0ライセンスで公開されています。 npmのエイリアス機能を使って、通常のMiradorの代わりにインストールできます。 npm install mirador@npm:mirador-video@^1.2.8 Mirador Multi User（MMU） 概要 Mirador Multi User（MMU）は、Miradorをマルチユーザー対応の協調ワークスペースに拡張するプラットフォームです。AGPL-3.0ライセンスで公開されています。 ライブインスタンス: https://app.mirador-multi-user.com/ Webサイト: https://www.mirador-multi-user.com/ 主な機能 ユーザー管理: ユーザーの登録・認証・権限管理 メディアコレクション管理: IIIFマニフェストの整理と共有 プロジェクトスナップショット: ワークスペースの状態を保存・復元 タグとテンプレート: プロジェクト単位でのアノテーションテンプレート管理 管理ダッシュボード: 利用状況の監視と管理 バックエンドはNestJSで構築され、MariaDBをデータベースとして使用しています。Docker/Caddyによるデプロイに対応しています。 ...

2026年3月15日 · 1 分 · Nakamura
DH週間トピックス — 2026年3月第3週

DH週間トピックス — 2026年3月第3週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 今週は該当するトピックはありませんでした。 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年3月15日 · 1 分 · Nakamura
IIIF Georeference Viewer：地理参照コンテンツを地図上で可視化するツール

IIIF Georeference Viewer：地理参照コンテンツを地図上で可視化するツール

はじめに デジタルアーカイブや人文学研究の分野では、歴史地図や古写真などの資料を地理的な文脈の中で閲覧したいというニーズが増えています。IIIF（International Image Interoperability Framework）は画像の相互運用性を高めるための国際標準ですが、近年ではIIIF Georeference Extensionによって、IIIF画像に地理座標情報を付与できるようになりました。 今回紹介する IIIF Georeference Viewer（iiif_geo）は、こうした地理参照付きIIIFコンテンツを対話的な地図上で可視化するためのWebアプリケーションです。 IIIF Georeference Extensionとは IIIF Georeference Extensionは、IIIFマニフェストやキャンバスに地理座標情報を埋め込むための仕様です。これにより、歴史地図などのIIIF画像を現代の地図上に正確に重ね合わせることが可能になります。 従来、歴史地図のジオリファレンスにはGIS専用ソフトウェアが必要でしたが、この拡張仕様を活用することで、Webブラウザ上で手軽に地理参照コンテンツを閲覧・比較できるようになります。 IIIF Georeference Viewerの機能 動的なURL読み込み クエリパラメータを使って、任意のIIIFマニフェストやGeoJSONファイルをURLから直接読み込むことができます。例えば以下のようなURLでデモを確認できます。 デモサイト: https://nakamura196.github.io/iiif_geo/ 対応するデータ形式 IIIF Manifest — IIIF Presentation API 3.0のマニフェスト IIIF Canvas — 個別のキャンバスオブジェクト Linked Places Format — 歴史的な地名データの標準フォーマット GeoJSON — 広く使われている地理データフォーマット インタラクティブな地図表示 LeafletおよびMapLibre GLを使用した地図表示では、マーカーのクラスタリングによって大量のポイントデータも効率的に表示できます。ベースマップの切り替えも可能で、航空写真や地理院タイルなど複数の背景地図を選択できます。 分割ペインレイアウト 画面を分割して、左側に地図、右側にIIIF画像のディープズーム表示（OpenSeadragon）を配置するレイアウトに対応しています。歴史地図と現代地図を並べて比較する際に便利です。 ディープズーム OpenSeadragonによる高解像度画像のディープズームに対応しています。巨大な歴史地図でも、細部まで拡大して閲覧することが可能です。 多言語対応 日本語と英語のバイリンガルUIを備えており、国際的な利用にも対応しています。 技術スタック 本ツールは以下の技術で構成されています。 技術 用途 Nuxt 4 / Vue 3 アプリケーションフレームワーク Leaflet 2Dタイル地図表示 MapLibre GL ベクタータイル地図表示 OpenSeadragon IIIF画像のディープズーム GitHub Pages ホスティング Nuxt 4の静的サイト生成（SSG）機能を利用してGitHub Pagesにデプロイしているため、サーバーサイドの運用コストが不要です。 ...

2026年3月14日 · 1 分 · Nakamura
Mirador：IIIFコンテンツを比較・注釈できる高機能ビューア

Mirador：IIIFコンテンツを比較・注釈できる高機能ビューア

Miradorとは Miradorは、IIIF（International Image Interoperability Framework）に対応したオープンソースの画像ビューアです。MITライセンスで公開されており、ハーバード大学やスタンフォード大学をはじめとする世界中の大学、図書館、美術館、博物館で広く採用されています。 Miradorの最大の特徴は、複数の画像をマルチウィンドウで同時に表示し、比較・分析できる点にあります。デジタルヒューマニティーズの研究や、文化財のデジタルアーカイブにおいて欠かせないツールの一つとなっています。 主な機能 マルチウィンドウによる画像比較 Miradorのワークスペースでは、複数のウィンドウを自由に配置し、異なる資料を並べて比較することができます。たとえば、同じ写本の異なる所蔵機関のデジタル画像を横に並べて、テキストの異同を確認するといった作業が可能です。ウィンドウのサイズや配置は自由にドラッグ操作で変更でき、研究の目的に合わせた柔軟なレイアウトを構成できます。 高精細画像のディープズーム MiradorはOpenSeadragonを内部で使用しており、数万ピクセル規模の高精細画像でもスムーズに拡大・縮小・移動が可能です。IIIF Image APIに準拠した画像サーバーから、表示に必要な部分だけを動的に読み込むため、巨大な画像でもストレスなく閲覧できます。 アノテーション機能 IIIF Presentation API 3.0のアノテーション仕様に対応しており、画像上の特定領域にテキストやタグを付与できます。既存のアノテーションの閲覧だけでなく、プラグインを導入することで新規アノテーションの作成も可能です。研究者が画像の特定箇所についてコメントや分析結果を記録する用途に活用されています。 コンパニオンウィンドウ 各画像ウィンドウにはコンパニオンウィンドウと呼ばれるサイドパネルが備わっており、メタデータの表示、レイヤーの切り替え、目次（構造ナビゲーション）、検索などの機能を提供します。マニフェストに含まれるメタデータを確認しながら画像を閲覧できるため、資料の文脈を理解しやすくなっています。 デモを試してみよう Miradorの公式サイトでは、デモページが公開されています。ブラウザ上ですぐに試すことができるので、実際の操作感を確認するのに最適です。 デモページでは、あらかじめいくつかのIIIFマニフェストが読み込まれています。左上の「＋」ボタンから新しいウィンドウを追加し、複数のコンテンツを並べて表示してみましょう。また、外部のIIIFマニフェストURLを入力して、任意のコンテンツを読み込むこともできます。 プラグインエコシステム Miradorはプラグインアーキテクチャを採用しており、機能を柔軟に拡張できます。コミュニティによって開発されているプラグインには以下のようなものがあります。 mirador-annotations: W3C Web Annotationに準拠したアノテーションの作成・編集 mirador-image-tools: 画像の明るさ・コントラスト調整、反転、グレースケール変換 mirador-share-plugin: ビューの共有URL生成 mirador-dl-plugin: 画像のダウンロード機能 プラグインはReactコンポーネントとして実装されており、JavaScriptの知識があれば独自のプラグインを開発することも可能です。 導入事例と活用シーン 大学・研究機関 ハーバード大学やスタンフォード大学、イェール大学など、多くの大学図書館がデジタルコレクションの閲覧インターフェースとしてMiradorを採用しています。手稿や古地図、歴史的写真などの高精細画像を、研究者が詳細に分析するためのツールとして活用されています。 美術館・博物館 絵画や工芸品のデジタル画像を高精細で提供する美術館でも採用が進んでいます。複数の作品を比較しながら鑑賞したり、修復前後の画像を並べて確認するといった活用が可能です。 デジタルヒューマニティーズ テキスト校訂、図像学的比較、地図の時系列比較など、デジタルヒューマニティーズの研究手法とIIIF・Miradorの親和性は非常に高いものがあります。異なる機関が所蔵する同一テキストの写本を並べて比較するなど、従来は物理的に困難だった作業をブラウザ上で実現できます。 技術的な特徴 Mirador 3はReactとReduxで構築されており、モダンなフロントエンドアーキテクチャを採用しています。IIIF Presentation API 3.0および2.1に対応しており、幅広いIIIFコンテンツを表示できます。また、npmパッケージとして公開されているため、既存のWebアプリケーションに組み込むことも容易です。 npm install mirador 設定はJSON形式で記述でき、表示するマニフェストやウィンドウの初期配置、UIの表示・非表示などを細かく制御できます。 まとめ Miradorは、IIIFエコシステムにおける中核的なビューアとして確固たる地位を築いています。マルチウィンドウ比較、ディープズーム、アノテーション、プラグイン拡張という豊富な機能を備えながら、オープンソースかつMITライセンスで提供されている点は大きな魅力です。 デジタルアーカイブやデジタルヒューマニティーズに関わる方はもちろん、高精細画像を扱うあらゆる分野の方にとって、Miradorは一度試してみる価値のあるツールです。まずはデモページで、その使い勝手を体験してみてください。

2026年3月14日 · 1 分 · Nakamura
Tify：軽量・高速なIIIFドキュメントビューア

Tify：軽量・高速なIIIFドキュメントビューア

はじめに デジタルアーカイブやデジタルヒューマニティーズの分野では、IIIF（International Image Interoperability Framework）に対応したビューアの選択は重要な課題です。Mirador や Universal Viewer（UV）といった高機能なビューアが広く知られていますが、「もっと軽量で、すばやく表示できるビューアがほしい」という場面も少なくありません。 そこで紹介したいのが Tify です。Tifyは、ドイツのゲッティンゲン大学図書館（SUB Göttingen）を中心に開発されている、軽量・高速なIIIFドキュメントビューアです。 Tifyとは Tifyは、IIIFマニフェストを読み込んで資料を閲覧するためのWebベースのビューアです。Vue.jsで構築されており、MITライセンスのもとオープンソースとして公開されています。公式サイト（https://tify.rocks/）でデモを試すことができます。 最大の特徴は、その軽量さと表示速度です。JavaScriptバンドルのサイズが小さく、読み込みから表示までの時間が非常に短いため、ユーザーにストレスを感じさせません。特にモバイル端末での閲覧体験は優れており、レスポンシブデザインによってスマートフォンやタブレットでも快適に操作できます。 主な機能 IIIF Presentation API対応 TifyはIIIF Presentation API 2.1および3.0の両方に対応しています。既存のIIIFマニフェストをそのまま利用できるため、すでにIIIF対応の画像配信基盤を持つ機関であれば、すぐに導入が可能です。 ページナビゲーションとサムネイル 複数ページの資料をサムネイル一覧から選択して移動できます。書籍や手稿など、ページ数の多い資料を閲覧する際に便利です。サムネイルパネルは画面横に表示され、直感的なナビゲーションが可能です。 目次（Structures）表示 IIIFマニフェストにStructures（Range）が定義されている場合、目次として表示されます。章立てのある書籍や、セクションごとに区切られた資料において、目的の箇所へすばやくジャンプできます。 OCR全文検索 OCRデータが関連付けられたマニフェストでは、全文検索機能を利用できます。検索キーワードを入力すると、該当箇所がハイライト表示され、資料内の情報を効率的に探索できます。これは特に、大量のテキストを含む歴史資料の調査において強力な機能です。 メタデータとアノテーション マニフェストに含まれるメタデータ（タイトル、著者、所蔵機関など）を構造的に表示します。また、アノテーション（注釈）の表示にも対応しており、研究者が付与した情報を閲覧することが可能です。 導入の容易さ Tifyの大きな利点の一つは、埋め込みの手軽さです。基本的には、HTMLに1つのスクリプトタグを追加し、マニフェストURLを指定するだけで動作します。 <div id="tify"></div> <script type="module"> import Tify from 'https://cdn.jsdelivr.net/npm/tify/dist/tify.js'; new Tify({ container: '#tify', manifestUrl: 'https://example.org/manifest.json', }); </script> npmパッケージとしてもインストールでき、Vue.jsプロジェクトへの組み込みも容易です。設定オプションも豊富で、表示言語や初期ページ、パネルの表示・非表示などを柔軟にカスタマイズできます。 他のIIIFビューアとの比較 IIIFビューアの代表格であるMiradorやUniversal Viewerとの違いを簡単に整理します。 Mirador は、複数のマニフェストを同時に開いて比較閲覧ができる高機能なビューアです。研究用途での利用に適していますが、その分、ファイルサイズが大きく、表示速度はやや遅くなります。プラグインによる拡張性も高い反面、初期設定の複雑さがあります。 Universal Viewer（UV） は、画像だけでなく音声や動画など多様なメディアタイプに対応しています。汎用性が高い一方、Tifyと比較するとバンドルサイズは大きくなります。 Tify は、これらのビューアと比べてシンプルで軽量という立ち位置です。複数マニフェストの同時比較やマルチメディア対応は持ちませんが、単一の文書を快適に閲覧するという用途においては最適な選択肢の一つです。デジタルアーカイブのポータルサイトやコレクション展示ページなど、閲覧の快適さを重視する場面で威力を発揮します。 利用事例 Tifyは主にドイツの図書館・文化機関で採用されています。開発元であるゲッティンゲン大学図書館（SUB Göttingen）をはじめ、複数の機関がデジタルコレクションの閲覧インターフェースとしてTifyを利用しています。軽量であることから、既存のWebサイトへの組み込みが容易で、CMS（コンテンツ管理システム）との統合事例も見られます。 まとめ Tifyは、「軽量・高速・モバイル対応」を軸としたIIIFドキュメントビューアです。高機能なMiradorやUVとは異なるアプローチで、閲覧のシンプルさと快適さを追求しています。 IIIFマニフェストを手軽に表示したい場面、モバイルユーザーへの対応を重視する場面、既存のWebページへ軽量なビューアを埋め込みたい場面において、Tifyは有力な選択肢となるでしょう。MITライセンスで提供されているため、商用・非商用を問わず自由に利用できます。 公式サイト: https://tify.rocks/ GitHub: https://github.com/tify-iiif-viewer/tify デモ: https://tify.rocks/demo.html

2026年3月14日 · 1 分 · Nakamura
Universal Viewer：画像・音声・動画・3Dに対応したIIIFビューア

Universal Viewer：画像・音声・動画・3Dに対応したIIIFビューア

Universal Viewerとは Universal Viewer（UV）は、IIIF（International Image Interoperability Framework）に準拠したオープンソースのビューアである。最大の特徴は、その名の通り「ユニバーサル」であること。画像だけでなく、音声、動画、3Dモデル、PDFなど、多様なメディア形式をひとつのビューアで閲覧できる。MITライセンスで公開されており、TypeScriptで実装されている。 IIIFビューアといえばMiradorが有名だが、Universal Viewerは画像以外のメディアへの対応力で際立っている。デモページでは、実際にさまざまな形式のコンテンツを試すことができる。 多様なメディア形式への対応 Universal Viewerが対応するメディア形式は幅広い。 画像：高解像度の画像をスムーズにズーム・パンできる。IIIF Image APIに対応しているため、タイル画像の効率的な配信が可能だ。Deep Zoomにも対応しており、巨大な画像でもストレスなく閲覧できる。 音声・動画：IIIF Presentation API 3で定義された音声や動画コンテンツを再生できる。タイムラインベースのナビゲーションにより、長いコンテンツでも目的の箇所にすばやくアクセスできる。 3Dモデル：博物館の収蔵品や建築モデルなど、3Dコンテンツの表示にも対応している。ブラウザ上で回転・拡大しながら立体的に閲覧できるのは大きな魅力だ。 PDF：PDF文書もビューア内で直接閲覧可能。デジタル化された文書資料をそのまま提供する場合に便利である。 採用している主な機関 Universal Viewerは、世界中の図書館・博物館・アーカイブで採用されている。 大英図書館（British Library）：膨大なデジタルコレクションの閲覧にUVを使用している。 ウェルカム図書館（Wellcome Library）：医学史関連の資料をUVで公開している。UVの開発にも深く関わってきた機関のひとつだ。 ウェールズ国立図書館（National Library of Wales）：ウェールズの歴史的資料をUVで提供している。 Internet Archive：大規模なデジタルアーカイブの閲覧にUVを活用している。 このように、大規模な機関がプロダクション環境で採用している実績は、UVの安定性と信頼性を示している。 主な機能 ツリーナビゲーション 複数ページからなる写本や書籍を閲覧する際に、ツリー構造でページを一覧表示し、目的のページにジャンプできる。IIIF Manifestに含まれるStructures（Range）情報を利用して、章立てや論理的な構造に沿ったナビゲーションを提供する。これは特にデジタル化された古典籍や写本の閲覧で威力を発揮する。 サムネイルパネル 全ページのサムネイルを一覧表示するパネルを備えている。目的のページを視覚的に探すことができ、大量のページを含むコンテンツの閲覧を効率化する。 マニフェスト内検索 IIIF Content Search APIに対応しており、テキストが付与されたマニフェスト内での全文検索が可能だ。OCRされた文書であれば、キーワードで目的の箇所を素早く見つけられる。 フルスクリーンモード ブラウザ全体を使ったフルスクリーン表示に対応しており、没入感のある閲覧体験を提供する。 埋め込み IFRAMEタグを使って外部のWebページにUVを埋め込むことができる。デジタルコレクションを自機関のWebサイトに組み込みたい場合に便利である。設定はJSONベースで柔軟にカスタマイズできる。 IIIF Presentation API 2と3への対応 Universal ViewerはIIIF Presentation API 2と3の両方に対応している。API 3では音声・動画のサポートが強化されており、UVはこの仕様にいち早く対応したビューアのひとつだ。既存のAPI 2のマニフェストも引き続き問題なく表示でき、移行期にある機関にとって心強い選択肢となる。 他のIIIFビューアとの比較 IIIFビューアにはいくつかの選択肢がある。簡単に比較してみよう。 ビューア 画像 音声/動画 3D 注釈編集 比較表示 Universal Viewer ○ ○ ○ △ △ Mirador ○ △ × ○ ○ OpenSeadragon ○ × × × × Miradorは注釈の編集や複数マニフェストの比較表示に強みがある。研究用途で画像を詳細に分析したい場合はMiradorが適している。 ...

2026年3月14日 · 1 分 · Nakamura
DH週間トピックス — 2026年3月第2週

DH週間トピックス — 2026年3月第2週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 今週は該当するトピックはありませんでした。 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年3月8日 · 1 分 · Nakamura
IIIF絵巻物をAI動画で動かす：Video Annotationという新しいアプローチ

IIIF絵巻物をAI動画で動かす：Video Annotationという新しいアプローチ

はじめに IIIF（International Image Interoperability Framework）は、デジタルアーカイブの画像を相互運用可能な形で公開するための国際標準です。世界中の図書館・博物館が採用しており、高解像度画像の深層ズームや、異なる機関のコレクションを横断的に閲覧することを可能にしています。 本記事では、IIIF画像の一部領域にAI生成動画を重ねて表示する「IIIF Animated Viewer」を開発した過程を紹介します。題材は東京大学が公開する「百鬼夜行図」――妖怪たちの行列を描いた絵巻物です。 静止画の妖怪たちが、ゆらゆらと動き出す。そんな体験を、IIIF標準の枠組みの中で実現しました。 狙い 1. 絵巻物に「動き」を与える 絵巻物は本来、巻きながら読む動的なメディアです。右から左へ進む行列、風にはためく衣、揺れる炎――静止画でありながら動きを内包しています。AI動画生成でその潜在的な動きを顕在化させることで、作品の新しい鑑賞体験を提供できるのではないか、という着想がありました。 2. IIIF標準に準拠する 独自フォーマットではなく、IIIF Presentation API 3.0のマニフェストとして動画情報を記述します。これにより、他のIIIFビューアとの互換性を保ちつつ、既存のIIIFエコシステムに乗る形で動画アノテーションを提供できます。 3. 汎用的なパイプラインにする 百鬼夜行図だけでなく、他のIIIF資料にも適用可能な仕組みを目指しました。マニフェストのメタデータと全体画像からコンテキストを自動生成し、個別領域のプロンプト生成に反映するアーキテクチャにしています。 デモ デモは GitHub Pages で公開しています。 コレクション一覧ページ。IIIFコレクションからマニフェスト一覧を読み込み、サムネイル付きで表示する。 ビューア全体表示。百鬼夜行図の全体像がOpenSeadragonで表示され、下部に再生ボタンがある。 ズームすると個々の妖怪が確認でき、動画オーバーレイが元画像の上に重なって表示される。 システム構成 docs/ … GitHub Pages公開ディレクトリ index.html … コレクション一覧ページ viewer.html … OpenSeadragon + 動画オーバーレイビューア collection.json … IIIF Collection manifest.json … IIIF Manifest（動画アノテーション含む） runs/run_002/ … 生成動画ファイル scripts/ pipeline.py … 一括生成パイプライン process_raw.py … Veo生成動画のトリミング+manifest更新 workspace/ anno.json … 領域アノテーション（19件） context.txt … 自動生成コンテキスト runs/ … 中間データ（クロップ画像、プロンプト等） IIIFマニフェストでの動画アノテーション 従来のIIIFアノテーション IIIF Presentation API 3.0では、Canvasに対するアノテーションとして画像を配置します。 ...

2026年3月3日 · 3 分 · Nakamura
DH週間トピックス — 2026年3月第1週

DH週間トピックス — 2026年3月第1週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 今週は該当するトピックはありませんでした。 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年3月1日 · 1 分 · Nakamura
Annotoriousの描画モードがproduction buildでだけ壊れる

Annotoriousの描画モードがproduction buildでだけ壊れる

はじめに ある日、Vercelにデプロイした IIIF アノテーションエディタで、アノテーションが一切付与できなくなっていることに気づきました。ローカルの開発サーバーでは正常に動作するのに、本番環境でだけ描画モードに入れない。コンソールエラーも出ない。UIのボタンは正しく切り替わるのに、画像上でドラッグしても何も起きない——。 原因は、package.json のキャレット指定（^）による Annotorious の自動アップグレードと、v3.7.13 での状態管理ライブラリ移行が webpack の production build で引き起こす不具合でした。 この記事では、調査過程から根本原因の特定、そして得られた教訓までをまとめます。 環境 フレームワーク : Next.js 15 (App Router) 画像ビューア : OpenSeadragon 5 アノテーション : Annotorious v3 (@annotorious/react + @annotorious/openseadragon) バンドラ : webpack（Next.js 内蔵） デプロイ先 : Vercel 症状 本番環境（Vercel）で以下の症状が発生しました。 矩形・ポリゴンの描画ツールボタンをクリックすると、UIの状態は正しく切り替わる （React の state 更新は正常） しかし Annotorious が描画モードに入らない ——カーソルが crosshair に変わらず auto のまま 画像上でクリック＆ドラッグしてもアノテーションが作成されない コンソールにエラーは一切表示されない Annotorious のアノテーションレイヤー要素（a9s-gl-canvas）自体は DOM 上に正しく描画されている ローカルの next dev では完全に正常動作するため、再現が困難な状況でした。 調査過程 1. Playwright による自動テスト まず Playwright を使って、デプロイ済みサイトに対する自動テストを実施しました。 ...

2026年2月25日 · 更新: 2026年2月25日 · 3 分 · Nakamura
DH週間トピックス — 2026年2月第4週

DH週間トピックス — 2026年2月第4週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 NDLOCR-Lite Web版の公開 国立国会図書館のAI-OCRツール「NDLOCR-Lite」のWebブラウザ版「NDLOCR-Lite Web」が公開されました。この新版では、ブラウザ上で手軽に画像やPDFのOCR処理を試すことができ、画像や認識テキストが外部に送信されることなく、ローカルで処理が完結するとのことです。 WebWorkerを使った並列処理化（最大8スレッド）により、1枚あたり数秒での認識が可能で、100ページ程度の文庫本であれば数分で処理が完了すると説明されています。また、AndroidのChromeでの動作確認がされており、モバイル環境での利用も可能なようです。 NDLOCR-Lite Web 開発者によると、読み順推定アルゴリズムに横書きテキストでの不具合が確認されており、修正作業が進められているとのことです。 @yuta1984の投稿およびGitHubリポジトリへの頻繁なコミットから確認されました。 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年2月22日 · 1 分 · Nakamura
DH週間トピックス — 2026年2月第3週

DH週間トピックス — 2026年2月第3週

デジタル人文学（DH）関連の新規ツール開発・公開情報を週次でまとめています。 koten-layout-detector v1.0.0およびv1.1.0がリリース 古典文献のレイアウト検出を行うツール「koten-layout-detector」のバージョン1.0.0が2026年2月20日にリリースされ、同日中にv1.1.0へのアップデートも行われました。このツールは古典文献の画像から文字領域やレイアウト要素を自動検出する機能を提供するものと推測されます。 koten-layout-detectorリポジトリ @yuta1984のGitHub更新情報より。 本記事は X投稿・GitHub更新・カレントアウェアネス・ポータルから自動収集した情報を基に生成しています。

2026年2月15日 · 1 分 · Nakamura