記事一覧 | デジタルアーカイブシステムの技術ブログ

ReplayWeb.page：ブラウザで動作するWebアーカイブ再生ツール

はじめにデジタルヒューマニティーズにおいて、Webコンテンツの保存と再現は重要な課題です。Webサイトは日々更新・消滅しており、研究対象としてのWebページを長期的に保存する仕組みが必要です。 ReplayWeb.page は、Webrecorderプロジェクトが開発したブラウザベースのWebアーカイブ再生ツールです。WARC（Web ARChive）やWACZ（Web Archive Collection Zipped）形式のアーカイブファイルを、ブラウザ上でそのまま閲覧できます。 ReplayWeb.pageの主な特徴クライアントサイド処理最大の特徴は、Service Workerを活用したクライアントサイド処理です。従来のWebアーカイブ再生ツール（Wayback Machineなど）はサーバーサイドでの処理が必要でしたが、ReplayWeb.pageではブラウザ内ですべての処理が完結します。これにより、サーバーの構築・運用が不要になります。 WARC/WACZ形式のサポート国際標準であるWARC形式と、Webrecorderが提案するWACZ形式の両方に対応しています。WACZ形式はWARCファイルをZIP圧縮し、インデックスやメタデータを含めたパッケージ形式で、効率的なランダムアクセスが可能です。多様なデータソースからの読み込みローカルファイル、URL、Google Drive、Dropbox、S3など、さまざまなソースからアーカイブファイルを読み込めます。HTTPレンジリクエストに対応しているため、大きなアーカイブファイルでも全体をダウンロードせずに部分的にアクセスできます。埋め込み対応 <replay-web-page> カスタムエレメントを使って、任意のWebページにアーカイブの再生ウィジェットを埋め込めます。研究成果の公開やデジタル展示に活用できます。 DH研究での活用例 Webサイトの長期保存研究対象のWebサイトをWARC/WACZ形式で保存し、将来にわたって参照可能な状態を維持できます。リンク切れや改変を心配することなく、特定時点のWebコンテンツを正確に再現できます。デジタル展示の構築博物館や図書館のデジタル展示において、過去のWebサイトをそのまま再現する展示を構築できます。ReplayWeb.pageの埋め込み機能を使えば、展示用Webサイト内にアーカイブされたコンテンツをシームレスに組み込めます。ソーシャルメディアの保存ソーシャルメディア上の投稿やスレッドなど、消滅しやすいコンテンツを保存・再現するのに適しています。Webrecorderのキャプチャツール（ArchiveWeb.page）と組み合わせることで、キャプチャから再生までの一連のワークフローを構築できます。基本的な使い方アーカイブの準備: ArchiveWeb.pageやwget、Browsertrixなどでページをキャプチャし、WARC/WACZファイルを作成します ReplayWeb.pageにアクセス: replayweb.page をブラウザで開きますファイルの読み込み: ローカルファイルを選択するか、URLを指定してアーカイブを読み込みますブラウジング: 保存されたWebページをオリジナルと同様にブラウジングできます関連ツール Webrecorderプロジェクトは、ReplayWeb.page以外にも以下のツールを提供しています。 ArchiveWeb.page: ブラウザ拡張機能でWebページをキャプチャ Browsertrix: 大規模なWebクローリングとアーカイブの自動化 py-wacz: PythonでWACZファイルを操作するライブラリ技術的な仕組み ReplayWeb.pageはService Workerを使って、アーカイブされたHTTPレスポンスをインターセプトし、ブラウザに提供します。ユーザーがアーカイブ内のURLにアクセスすると、Service WorkerがWARC/WACZファイルから該当するレスポンスを取得し、元のサーバーにリクエストを送ることなく、保存されたコンテンツを返します。この仕組みにより、JavaScriptやCSSを含む動的なWebページも、保存時の状態のまま正確に再現できます。まとめ ReplayWeb.pageは、Webアーカイブの再生をブラウザだけで完結させる革新的なツールです。サーバー不要で動作する手軽さと、標準的なWARC/WACZ形式への対応により、DH研究におけるWebコンテンツの保存・再現・共有の課題を解決します。デジタル保存に関心のある研究者にとって、必須のツールといえるでしょう。参考リンク ReplayWeb.page Webrecorder プロジェクト WACZ 仕様

2026年3月15日 · 1 分 · Nakamura

StoryMapJS：地図ベースのストーリーテリングツール活用ガイド

はじめに歴史的な旅路、探検の記録、文化遺産の分布など、「場所」と結びついた物語を伝えるには、地図を使ったストーリーテリングが効果的です。地図上のポイントを順に辿りながら、各地点にまつわるテキストや画像を表示することで、読者は空間的な文脈を理解しながら物語に没入できます。 StoryMapJS は、ノースウェスタン大学の Knight Lab が開発した、地図ベースのストーリーテリングツールです。スライド形式のインターフェースで、地図上のポイントを巡るインタラクティブな物語を作成できます。ライセンスは MPL-2.0 で、無料で利用可能です。 StoryMapJSの特徴 1. スライドベースのナビゲーション StoryMapJSでは、各ポイント（場所）を一つのスライドとして構成します。読者がスライドを進めると、地図がアニメーション付きで次のポイントまで移動します。この滑らかな遷移により、物語の流れと地理的な移動が視覚的に結びつきます。 2. 直感的なオーサリングツール Knight Labが提供するWebベースのエディタを使えば、プログラミング不要でStoryMapを作成できます。地図上でポイントをクリックし、テキストと画像を追加するだけで完成します。 3. Gigapixel（ギガピクセル）モード StoryMapJSのユニークな機能の一つが、Gigapixelモードです。通常の地図の代わりに、高解像度の画像（絵画、古地図、設計図など）を「地図」として使用できます。画像上の特定の箇所にポイントを配置し、拡大しながら詳細を解説するという使い方が可能です。これは美術作品の分析や、歴史的地図の解説に非常に有効です。 4. 多様なメディア対応各スライドには、画像、YouTube動画、Vimeo動画、Twitter、Flickr、Wikipediaなど、さまざまなメディアを埋め込むことができます。作成手順オンラインエディタを使う方法 StoryMapJS公式サイトにアクセス「Make a StoryMap」をクリックし、Googleアカウントでログインタイトルスライドを作成「Add Slide」で新しいポイントを追加地図上の位置を指定し、テキストとメディアを入力すべてのポイントを追加したら「Share」から公開URL・埋め込みコードを取得 JSON形式で作る方法より高度なカスタマイズが必要な場合は、JSON形式でデータを定義し、JavaScriptライブラリを使って表示することも可能です。自分のサーバーでホスティングする場合はこちらの方法が適しています。活用例歴史的旅路の追体験松尾芭蕉の「奥の細道」のルートをStoryMapで再現する例を考えてみましょう。江戸から出発し、日光、那須、松島、平泉、出羽三山、象潟、金沢、大垣と巡る旅路を地図上にプロットします。各地点のスライドには、該当する俳句の本文と現代語訳、現地の写真、関連する歴史的背景を添えることで、文学作品の空間的理解を深めるリソースが完成します。文化遺産のマッピング世界遺産や国宝建築物の分布を地図上に示し、各スポットの写真と解説を添えることで、文化遺産のデジタルガイドを作成できます。移民・移動の記録歴史的な移民の経路を追跡し、出発地での状況、経由地での出来事、定住地での生活といった物語を地理的文脈の中で語ることができます。研究フィールドワークの報告考古学や民族学のフィールドワークにおいて、調査地点を地図上にプロットし、各地点での発見や観察結果をスライドで報告するという使い方も考えられます。 Gigapixelモードの活用美術作品の分析: 大型絵画の各部分を拡大しながら、描写技法や象徴的なモチーフを解説歴史的地図の解読: 古地図の特定の区域を拡大し、地名や建造物を現代と比較建築図面の解説: 歴史的建造物の設計図上で、構造的特徴を順に解説カスタマイズ地図タイルの変更デフォルトの地図スタイルのほか、OpenStreetMapやStamenなどの地図タイルを選択できます。歴史的なテーマには、アンティーク調の地図タイルが雰囲気に合うでしょう。言語設定インターフェースの言語を変更できます。日本語にも対応しており、ナビゲーションボタンなどが日本語で表示されます。注意点オンラインエディタで作成したStoryMapはGoogleドライブに保存されます画像は外部URLで指定する必要があり、ローカルファイルの直接アップロードには制限があります Gigapixelモードを使うには、画像をタイル化するツール（Zoomifyなど）で事前に処理する必要がありますモバイル端末では、画面サイズの制約からスライドの見え方が変わることがあります TimelineJSとの組み合わせ StoryMapJSは同じKnight Labが開発したTimelineJSと組み合わせることで、時間と空間の両軸でストーリーを語ることができます。タイムラインで時系列の概要を示し、StoryMapで地理的な詳細を補足するといった使い方が効果的です。まとめ StoryMapJSは、地図上のポイントを辿りながらストーリーを語るインタラクティブコンテンツを、簡単に作成できるツールです。スライドベースの直感的なナビゲーション、アニメーション付きの地図遷移、そしてGigapixelモードという独自機能により、DH研究の成果発信から教育コンテンツの制作まで、幅広く活用できます。

2026年3月15日 · 1 分 · Nakamura

Taguette：無料で使えるオープンソース質的データ分析ツール

はじめに質的データ分析（QDA: Qualitative Data Analysis）は、インタビュー記録、フィールドノート、歴史文書などのテキストデータにタグやコードを付与し、パターンやテーマを見出す研究手法です。従来、NVivo や ATLAS.ti といった商用ソフトウェアが広く利用されてきましたが、高額なライセンス費用が研究者や学生にとって障壁となることがありました。本記事では、NVivo や ATLAS.ti の代替として注目されている無料のオープンソース質的データ分析ツール Taguette を紹介します。 Taguette とは Taguette は、テキストデータの質的分析を行うためのオープンソースツールです。BSD ライセンスで公開されており、完全無料で利用できます。ニューヨーク大学の研究者によって開発され、学術研究の民主化を目的としています。 Web ブラウザ上で動作するシンプルなインターフェースを特徴とし、プログラミングの知識がなくても直感的に使い始めることができます。主な機能テキストのタグ付け・コーディング Taguette のコア機能は、テキストの選択範囲にタグ（コード）を付与することです。文書を読みながら重要な箇所を選択し、あらかじめ定義したタグや新しいタグを割り当てます。タグは階層的に管理でき、カテゴリごとに整理できます。ハイライト表示タグ付けされたテキストはハイライト表示され、どの部分にどのタグが付けられているかを視覚的に確認できます。複数のタグが同一テキストに付けられている場合も、一目で把握できます。エクスポート機能分析結果をさまざまな形式でエクスポートできます。 HTML — ブラウザで閲覧可能な形式 CSV — 表計算ソフトやデータ分析ツールで利用可能 XLSX — Excel 形式 DOCX — Word 形式コード付きドキュメント — タグごとにまとめられたテキスト抽出プロジェクト管理複数のドキュメントをプロジェクトとしてまとめて管理できます。同じタグセットを複数の文書に適用し、横断的な分析を行うことが可能です。コラボレーション Web ベースのインターフェースにより、複数の研究者が同じプロジェクトで共同作業できます。サーバーにインストールすることで、チームでの利用も容易です。対応ファイル形式 Taguette は以下の形式のドキュメントを読み込めます。 PDF DOCX（Word） HTML TXT（プレーンテキスト） EPUB ODT（OpenDocument） Markdown 導入方法 Taguette はいくつかの方法で利用できます。オンライン版 app.taguette.org にアクセスするだけで、インストール不要で利用を開始できます。ローカルインストール Python 環境があれば、pip でインストールできます。 ...

2026年3月15日 · 1 分 · Nakamura

TEI Publisher：TEI XMLデジタルエディション出版プラットフォーム

はじめに TEI（Text Encoding Initiative）は、人文学のテキストをデジタル化する際の国際標準として広く採用されている XML マークアップ言語です。古典籍、書簡、碑文、辞書など、さまざまなテキスト資料を構造化された形式で記述できます。しかし、TEI XML で符号化されたテキストを、読みやすい形で Web 上に公開するには、相応の技術的知識が必要です。本記事では、TEI XML のデジタルエディションを簡単に出版できるプラットフォーム TEI Publisher を紹介します。 TEI Publisher とは TEI Publisher は、eXist-db XML データベース上で動作するデジタルエディション出版プラットフォームです。TEI XML で符号化されたテキストを、カスタマイズ可能な美しい Web ページとして公開できます。 e-editiones コミュニティによって開発・メンテナンスされており、オープンソースとして公開されています。学術的なテキスト出版のためのワンストップソリューションを目指しています。主な機能カスタマイズ可能な表示 ODD（One Document Does it all）仕様に基づく処理モデルにより、TEI XML の各要素をどのように表示するかを柔軟に定義できます。XSLT を直接書く必要はなく、GUI ベースのエディタで表示ルールを設定できます。ファクシミリ表示原本のデジタル画像（ファクシミリ）とテキストの翻刻を並べて表示できます。IIIF Image API にも対応しており、高解像度画像のズーム表示が可能です。テキストの特定箇所と画像の対応する領域をリンクさせることもできます。全文検索 eXist-db の全文検索エンジンにより、テキスト全体を高速に検索できます。Lucene ベースのインデックスにより、大量のテキストでも即座に結果を返します。ファセット検索やハイライト表示にも対応しています。 REST API テキストデータやメタデータにプログラムからアクセスするための REST API が提供されています。外部のアプリケーションやツールとの連携が容易で、データの再利用を促進します。レスポンシブデザイン生成される Web ページはレスポンシブデザインに対応しており、PC、タブレット、スマートフォンなど、さまざまなデバイスで適切に表示されます。多言語・多文字体系対応ラテン文字はもちろん、アラビア文字、漢字、デーヴァナーガリーなど、多様な文字体系に対応しています。右から左に書く言語（RTL）もサポートしています。導入方法 TEI Publisher は eXist-db 上で動作します。Docker を使った導入が推奨されています。 docker run -p 8080:8080 existdb/teipublisher:latest 起動後、ブラウザで http://localhost:8080/exist/apps/tei-publisher/ にアクセスすると、TEI Publisher のインターフェースが表示されます。サンプルのテキストが含まれているため、すぐに機能を試すことができます。 ...

2026年3月15日 · 1 分 · Nakamura

TimelineJS：スプレッドシートで作るインタラクティブ年表ガイド

はじめに歴史的な出来事の流れや、プロジェクトの進行過程を分かりやすく伝えるには、年表（タイムライン）が最も効果的な手段の一つです。しかし、見栄えの良いインタラクティブな年表を作成するには、通常はプログラミングの知識が必要とされます。 TimelineJS は、ノースウェスタン大学の Knight Lab が開発したオープンソースのタイムライン作成ツールです。Google スプレッドシートにデータを入力するだけで、美しいインタラクティブな年表を自動生成できます。ライセンスは MPL-2.0 で、無料で利用可能です。 TimelineJSの特徴 1. プログラミング不要 TimelineJSの最大の魅力は、コードを一切書かずにタイムラインを作成できることです。Knight Labが提供するGoogleスプレッドシートのテンプレートにデータを入力し、公開設定を行うだけで完成します。 2. メディアの統合各イベントには、画像、動画、音声、ツイート、Wikipedia記事など、さまざまなメディアを埋め込むことができます。URLを指定するだけで自動的にメディアが表示されるため、視覚的にリッチなタイムラインを簡単に作れます。対応メディアの例：画像（JPEG、PNG、GIF） YouTube / Vimeo の動画 SoundCloud の音声 Twitter のツイート Wikipedia の記事 Google Map の地図 Flickr の写真 3. 美しいデザイン生成されるタイムラインは、モダンなデザインで視覚的に洗練されています。レスポンシブ対応のため、PCでもスマートフォンでも快適に閲覧できます。スライド間のアニメーション遷移も滑らかです。 4. 多言語対応 TimelineJSは60以上の言語に対応しており、日本語でのインターフェース表示も可能です。日付フォーマットも各言語に合わせて自動調整されます。作成手順ステップ1：テンプレートの準備 TimelineJS公式サイトにアクセス「Make a Timeline」セクションの「Get the Spreadsheet Template」をクリック Google スプレッドシートのテンプレートが開くので、コピーを作成ステップ2：データの入力スプレッドシートの各列にデータを入力します。主要な列は以下の通りです。列名説明例 Year 年 1868 Month 月（任意） 1 Day 日（任意） 3 Headline イベントのタイトル明治維新 Text 説明文日本の近代化の始まり… Media メディアURL https://example.com/image.jpg Media Credit メディアのクレジット国立国会図書館最初の行（Title slide）はタイムライン全体のタイトルスライドになります。 ...

2026年3月15日 · 1 分 · Nakamura

Transkribus：AIによる手書き文字認識で歴史文書を読み解く

TL;DR Transkribus は、AIベースの手書き文字認識（HTR: Handwritten Text Recognition）プラットフォームである。100以上の言語に対応し、印刷文字だけでなく手書き文字の認識が可能である。カスタムモデルの学習機能により、特定の筆跡や書体に最適化した認識精度の向上が図れる。歴史文書のテキスト化において、DH研究者にとって不可欠なツールとなっている。 Transkribusとは Transkribusは、オーストリアのインスブルック大学で開始されたプロジェクトに端を発し、現在はREAD-COOP SCE（欧州協同組合）によって運営されている。EU の Horizon 2020 プログラムなどの支援を受けて開発が進められてきた。主な特徴は以下の通りである。 HTR（手書き文字認識）：ディープラーニングベースの手書き文字認識エンジン 100以上の言語：ラテン文字、キリル文字、アラビア文字、ヘブライ文字など多様な文字体系に対応カスタムモデル学習：自分のデータで認識モデルを学習させ、特定の文書に特化した高精度な認識が可能レイアウト解析：ページ内のテキスト領域、行、段落を自動的に検出協調作業：チームでの共同作業に対応し、大規模なテキスト化プロジェクトを効率的に進められる主要機能テキスト認識（HTR/OCR） Transkribusの中核機能である。事前学習済みの汎用モデルを使えば、すぐにテキスト認識を開始できる。公開されているモデルには、中世ラテン語写本、近世ドイツ語の亀甲文字（Kurrent）、英語の筆記体など、様々な時代・言語に対応したものがある。カスタムモデルの学習最も強力な機能の一つである。約50ページ分のGround Truth（正解テキスト付き画像）を用意すれば、特定の筆跡や書体に特化したモデルを学習できる。学習済みモデルは他のユーザーと共有することも可能である。レイアウト解析文書画像のレイアウトを自動的に解析し、テキスト領域（TextRegion）、行（TextLine）、ベースラインを検出する。複雑なレイアウト（多段組み、表、マージン書き込みなど）にも対応している。 Transkribus Lite ブラウザベースのインターフェースで、インストール不要で利用できる。基本的なHTR機能とレイアウト解析が利用可能であり、手軽に試したい場合に適している。使い方基本的なワークフローアカウント作成：Transkribusでアカウントを作成する文書のアップロード：画像ファイル（JPEG、PNG、TIFF）やPDFをアップロードするレイアウト解析：自動レイアウト解析を実行し、テキスト領域と行を検出するモデル選択：適切なHTRモデルを選択する（公開モデル一覧から検索可能）テキスト認識実行：選択したモデルでHTRを実行する結果の確認・修正：認識結果を画像と照合しながら確認・修正するエクスポート：TEI-XML、PAGE XML、ALTO XML、プレーンテキストなどの形式でエクスポートする料金体系 Transkribusは従量課金制を採用している。無料枠（月500クレジット）があり、小規模な利用であれば無料で始められる。大規模プロジェクトにはサブスクリプションプランが用意されている。 DH研究における活用例歴史文書のテキスト化アーカイブに眠る手書き文書をテキスト化し、全文検索可能なデジタルアーカイブを構築できる。例えば、江戸時代の古文書や明治期の手書き公文書のテキスト化に活用できる。大規模コーパスの構築カスタムモデルの学習と自動認識を組み合わせることで、数千ページ規模の文書を効率的にテキスト化し、テキストマイニングや言語学的分析のためのコーパスを構築できる。比較文書学同一テキストの異なる写本をそれぞれテキスト化し、テキストの異同を分析する比較文書学（Stemmatology）に活用できる。TEI-XML形式でのエクスポートにより、Critical Editionの作成にもつなげられる。市民参加型プロジェクト Transkribusの協調作業機能を活用し、ボランティアによるクラウドソーシング型のテキスト化プロジェクトを運営できる。品質管理機能により、市民参加型でも高品質な成果を得られる。他ツールとの比較特徴 Transkribus Google Cloud Vision Tesseract OCR HTR（手書き）高精度基本的非対応カスタムモデル可能 AutoML利用学習可能歴史文書対応特化汎用汎用レイアウト解析高度基本的基本的料金従量課金従量課金無料（OSS）出力形式 TEI/ALTO/PAGE JSON テキスト/hOCR まとめ Transkribusは、歴史文書のテキスト化において最も実績のあるプラットフォームである。AIベースのHTRエンジンとカスタムモデル学習機能により、様々な時代・言語の手書き文書に対応できる。DH研究において、テキスト化は多くの分析の出発点であり、Transkribusはその基盤を提供する重要なツールである。 ...

2026年3月15日 · 1 分 · Nakamura

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

Voyant Tools：ブラウザで完結するテキスト分析プラットフォーム

TL;DR Voyant Tools はブラウザ上で動作するテキスト分析プラットフォームである。テキストデータをペーストまたはアップロードするだけで、ワードクラウド、KWIC（Key Word In Context）、共起分析、トピックモデリング、TF-IDFなど多彩な分析を即座に実行できる。日本語の形態素解析にも対応しており、DHにおけるテキストマイニングの標準的なツールとして広く利用されている。 Voyant Toolsとは Voyant Toolsは、Stéfan SinclairとGeoffrey Rockwellによって開発されたオープンソースのテキスト分析環境である。2003年の初版から20年以上の歴史を持ち、DH分野で最も広く使われているテキスト分析ツールの一つである。主な特徴は以下の通りである。完全ブラウザベース：voyant-tools.org にアクセスするだけで利用開始できる 24種類以上のツール：ワードクラウド、頻度分析、KWIC、共起ネットワーク、トレンドグラフなど多言語対応：英語はもちろん、日本語・中国語・韓国語など多言語テキストを分析可能コーパス共有：分析結果をURLで共有でき、再現性の高い研究が可能 API提供：プログラマティックなアクセスも可能主要な分析機能 Cirrus（ワードクラウド）テキスト内の高頻度語をワードクラウドとして可視化する。ストップワード（除外語）のカスタマイズにより、分析対象言語に応じた適切なフィルタリングが可能である。 KWIC（コンコーダンス）特定のキーワードが文脈の中でどのように使われているかを一覧表示する。前後の文脈を確認しながら、用語の使用パターンを分析できる。 Trends（頻度推移）文書全体を通じた語句の出現頻度の変化を折れ線グラフで表示する。複数の語句を同時に追跡でき、テキスト内のテーマの推移を分析できる。 Links（共起ネットワーク）単語間の共起関係をネットワークグラフとして可視化する。どの語が頻繁に一緒に使われているかを構造的に把握できる。 Topics（トピックモデリング） LDAベースのトピックモデリングにより、テキストコーパスに含まれる潜在的なトピックを自動的に抽出する。使い方基本的なワークフロー Voyant Tools にアクセスするテキストを入力エリアにペーストするか、ファイル（TXT、PDF、HTML、XMLなど）をアップロードする「Reveal」ボタンをクリックすると、複数の分析パネルが同時に表示される各パネルの設定を調整し、分析を深めるエクスポートボタンから画像やデータをダウンロードする日本語テキストの分析 Voyant Toolsは日本語の形態素解析に対応しており、日本語テキストの分析が可能である。テキストをアップロードする際に言語設定を「Japanese」に指定すると、適切な分節化が行われる。ただし、専門用語や固有名詞の分節精度には限界があるため、結果を確認しながら分析を進めることが推奨される。 DH研究における活用例文学作品の比較分析複数の文学作品をコーパスとして読み込み、作品間の語彙の違いや共通する表現パターンを分析できる。例えば、夏目漱石の前期と後期の作品で使用語彙がどのように変化したかを定量的に示すことができる。歴史文書の分析新聞記事のデジタルアーカイブを対象に、特定の社会問題に関する言説の変遷を時系列で追跡できる。TrendsツールとKWICを組み合わせることで、量的分析と質的分析を同時に行える。学術論文のサーベイ研究分野の論文アブストラクトを大量に集めてトピックモデリングを適用すれば、分野全体の研究動向を把握できる。他ツールとの比較特徴 Voyant Tools AntConc KH Coder 動作環境ブラウザデスクトップデスクトップ日本語対応あり限定的充実可視化豊富基本的豊富プログラミング不要不要不要共有機能 URL共有なしなしまとめ Voyant Toolsは、テキスト分析の専門知識やプログラミングスキルがなくても、豊富な分析機能を手軽に利用できる強力なプラットフォームである。特にDH研究の入門段階で、テキストデータの概要を素早く把握するのに最適である。URLベースのコーパス共有機能により、研究の再現性も確保できる。 ...

2026年3月15日 · 1 分 · Nakamura

Wikidata Query Service：SPARQLで探る知識グラフ活用ガイド

はじめにデジタル・ヒューマニティーズの研究において、構造化されたデータは極めて重要なリソースです。人物、場所、作品、出来事などの情報が機械可読な形で整理されていれば、大規模なデータ分析や異なるデータセット間の連携が可能になります。 Wikidata は、ウィキメディア財団が運営する自由な知識ベースで、1億件以上の項目（アイテム）を収録しています。そして Wikidata Query Service は、このデータベースに対してSPARQLクエリを実行し、結果をさまざまな形式で可視化できる無料のWebサービスです。 Wikidata Query Serviceの特徴 1. SPARQLによる柔軟な検索 SPARQL（スパークル）は、RDF（Resource Description Framework）データを検索するためのクエリ言語です。SQLに似た構文で、Wikidataの知識グラフに対して複雑な条件での検索を行えます。例えば、「日本出身で、ノーベル賞を受賞した人物の一覧」や「17世紀にヨーロッパで出版された書籍のうち、現在デジタル化されているもの」といった、複数の条件を組み合わせた高度な検索が可能です。 2. 多様な結果表示クエリの結果は、以下のような形式で表示できます。テーブル: 標準的な表形式での表示地図: 座標データを含む結果を地図上にプロットタイムライン: 時間情報を持つデータの時系列表示バブルチャート: 数値データの比較折れ線グラフ / 棒グラフ: 統計的な可視化ツリーマップ: 階層的データの表示画像グリッド: 画像URLを含むデータのギャラリー表示 3. 豊富なサンプルクエリ Wikidata Query Serviceには、多数のサンプルクエリ（Examples）が用意されています。SPARQLに不慣れな方でも、サンプルを参考にしながら自分のクエリを組み立てることができます。 4. Linked Open Data との連携 Wikidataは Linked Open Data（LOD）の中核的なハブとして機能しています。各アイテムは一意のURI（例：Q42 = ダグラス・アダムズ）を持ち、他の知識ベース（DBpedia、VIAF、GNDなど）とのリンク情報を含んでいます。 SPARQLの基本基本的なクエリ構造 SPARQLクエリの基本構造は以下の通りです。 SELECT ?item ?itemLabel WHERE { ?item wdt:P31 wd:Q5 . # instance of: human ?item wdt:P27 wd:Q17 . # country of citizenship: Japan ?item wdt:P166 wd:Q35637 . # award received: Nobel Prize SERVICE wikibase:label { bd:serviceParam wikibase:language "ja,en" . } } wdt:P31 はプロパティ「分類（instance of）」 wd:Q5 はアイテム「人間（human）」 SERVICE wikibase:label は自動的にラベル（名称）を取得する構文よく使うプロパティプロパティ意味例 P31 分類（instance of） Q5（人間）、Q515（都市） P17 国 Q17（日本） P27 国籍 P569 生年月日 P570 没年月日 P625 座標 P18 画像 P106 職業 DH研究での活用例歴史人物の分析特定の時代・地域の人物データを抽出し、職業分布や活動地域を分析できます。 ...

2026年3月15日 · 1 分 · Nakamura

TEI/XMLサイトをVercelで高速デプロイ：XSLT変換をsaxon-jsで自動化する

はじめに TEI (Text Encoding Initiative) に準拠したXMLデータをXSLTでHTMLに変換し、Webで公開する構成は、デジタルヒューマニティーズの分野で広く使われています。従来、ブラウザのクライアントサイドXSLT変換（<?xml-stylesheet?>やJavaScriptによるXSLTProcessor）でXMLを表示するケースが多いですが、この方式にはいくつかの課題があります。ページを開くたびにブラウザがXSLT変換を実行するため、表示が遅い SEO・クローラー対応が難しいブラウザごとのXSLT実装差異本記事では、Vercelのビルド時にXML→HTML変換を自動実行し、生成済みHTMLを静的配信する方法を紹介します。構成 project/ ├── docs/ # Vercelの出力ディレクトリ │ ├── index.html # トップページ │ └── data/ │ ├── *.xsl # XSLTスタイルシート │ ├── *.sef.json # コンパイル済みスタイルシート │ ├── *.xml # TEI/XMLソース │ └── *.html # 生成されるHTML（ビルド時生成） ├── build.js # ビルドスクリプト ├── package.json └── vercel.json Node.jsでのXSLT処理ライブラリ比較 Vercelのビルド環境ではネイティブツール（xsltproc等）が使えないため、Node.jsのXSLTライブラリを使う必要があります。以下の3つを検証しました。 xsltproc（参考：ローカル環境） macOSに標準搭載されているC言語実装のXSLTプロセッサです。 xsltproc docs/data/main.xsl docs/data/劉興我本巻一.xml > docs/data/劉興我本巻一.html 一瞬で完了しますが、Vercelのビルド環境では利用できません（apt-getが使えない）。 xslt-processor（純JavaScript実装） npm install xslt-processor GoogleのAJAXSLT（2005年）をベースにES2015+に更新したライブラリです。ブラウザにXSLTサポートがなかった時代のpolyfillが起源であり、1400行程度のXMLファイルの変換でも数分以上かかり、実用に堪えませんでした。遅い理由は以下の通りです。 XPath式を実行時に毎回パース・評価する（キャッシュや事前コンパイルの仕組みがない）最適化戦略がない設計のため、XPath評価が累積的に重くなる純JavaScriptのDOM実装による木構造走査のオーバーヘッド saxon-js（Saxonica社製） npm install saxon-js xslt3 XSLT 3.0仕様の編集者であるMichael Kayが率いるSaxonica社が開発した高性能XSLTプロセッサです。最大の特徴は事前コンパイル方式にあります。 ...

2026年3月15日 · 2 分 · Nakamura

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

2026年3月15日 · 1 分 · Nakamura

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とは 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ドキュメントビューア

はじめにデジタルアーカイブやデジタルヒューマニティーズの分野では、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とは 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

MapLibre GL JS でカスタムマーカーがズーム時にずれる問題と GeoJSON レイヤーによる解決

はじめに MapLibre GL JS で地図上にカスタムマーカーを配置する際、maplibregl.Marker に独自の DOM 要素を渡す方法がよく使われる。件数バッジ付きの丸いマーカーなど、CSS で自由にスタイリングできる利点がある。しかし、この方法にはズーム・パン操作時にマーカーが地図の動きに遅れて追従するという問題がある。特にマーカー数が多い場合やモバイルデバイスでは顕著になり、ズームアウトすると本来陸上にあるべきマーカーが海上に表示されるような視覚的な不整合も起きる。本記事では、この問題の原因と、GeoJSON ソース + レイヤーを使った根本的な解決方法を解説する。問題の再現 DOM マーカーによる実装（問題あり） for (const point of dataPoints) { const el = document.createElement('div') Object.assign(el.style, { width: '32px', height: '32px', borderRadius: '50%', backgroundColor: point.color, border: '3px solid white', boxShadow: '0 2px 6px rgba(0,0,0,0.3)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', }) // 件数バッジ if (point.count > 1) { const badge = document.createElement('span') badge.style.color = 'white' badge.style.fontSize = '11px' badge.style.fontWeight = 'bold' badge.textContent = String(point.count) el.appendChild(badge) } new maplibregl.Marker({ element: el }) .setLngLat([point.lng, point.lat]) .addTo(map) } この実装では以下の問題が発生する。症状ズーム・パン時の遅延: マーカーが地図の動きに 1〜2 フレーム遅れて追従するズームアウト時の位置ずれ: 沿岸都市のマーカーが海上に表示されるパフォーマンス低下: マーカー数が増えると DOM の再配置コストが増大する原因 maplibregl.Marker は DOM 要素を CSS transform で配置する仕組みになっている。地図がズーム・パンされるたびに、各マーカーの CSS transform を再計算して更新する必要があり、これが WebGL キャンバスの描画と非同期で行われるため、視覚的なずれが生じる。 ...

2026年3月14日 · 3 分 · Nakamura

Claude Codeの並列エージェントで882本のブログ記事から解説動画を自動生成した話

はじめに筆者は技術ブログを882本（日英バイリンガル）運営しています。これらの記事をYouTube動画として展開するため、Claude Codeの並列エージェント機能とVOICEVOX音声合成を組み合わせた自動動画生成パイプラインを構築しました。結果として、Claude Codeの週間利用制限（全ユーザーの上位2%が該当）に到達するという珍しい体験をしたので、パイプラインの構成と実績を共有します。パイプラインの全体像ブログ記事 (.md) ↓ Claude Code 並列エージェント (10本同時) 対話台本 (sections.json) ↓ VOICEVOX × 3並列ワーカー解説動画 (video.mp4) ↓ YouTube API YouTube公開 1. 台本生成（Claude Code）各記事を読み込み、2キャラクターの掛け合い形式の台本（sections.json）を生成します。Claude CodeのAgentツールを使い、10本のエージェントを同時に起動して並列処理します。 [ { "section_title": "セクション名", "slide_points": ["スライドに表示するポイント1", "ポイント2"], "lines": [ {"speaker": "usagi", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"}, {"speaker": "sora", "text": "カタカナヨミアゲテキスト", "display_text": "画面表示テキスト"} ] } ] text: VOICEVOX読み上げ用（英語技術用語はカタカナ表記） display_text: 画面表示用（英語技術用語はそのまま） 1記事あたり6〜10セクション、各セクション6〜8セリフ 2. キャラクターペアシステム 4組のVOICEVOXキャラクターペアを用意し、記事ごとにローテーションで割り当てます。ペアID 質問役解説役スタイル zundamon_metan ずんだもん四国めたん素朴×丁寧 tsumugi_kiritan 春日部つむぎ冥鳴ひまりギャル×クール usagi_sora 中国うさぎ九州そら控えめ×おっとり hau_whitecul 雨晴はう WhiteCUL 元気×知的立ち絵素材は坂本アヒルさんの素材を使用しています。 ...

2026年3月12日 · 2 分 · Nakamura

App Store Connect APIでiOSアプリのアップデートを審査提出する方法

TL;DR iOSアプリのアップデート版をビルド → アップロード → ビルド紐付け → whatsNew設定 → 審査提出まで、すべてコマンドラインとApp Store Connect REST APIで完結させた。初回リリース時と異なり、メタデータやスクリーンショットは既存のものが引き継がれるため、更新時に必要な操作は少ない。前提: App Store Connect APIだけでiOSアプリを審査提出する完全ガイドのセットアップ（APIキー取得・JWT生成・ヘルパー関数）が完了しているものとする。全体の流れビルド番号のインクリメントアーカイブ・IPA書き出し・アップロード（xcodebuild + xcrun altool）ビルドの処理完了を確認（API）ビルドをバージョンに紐付け（API）暗号化コンプライアンスの設定（API） whatsNew（新機能）の設定（API）審査提出（API） 1. ビルド番号のインクリメント App Store Connectは同じビルド番号のアップロードを拒否する。CURRENT_PROJECT_VERSION を上げる必要がある。 XcodeGenを使っている場合は project.yml を編集する： # project.yml settings: base: MARKETING_VERSION: "1.1.0" CURRENT_PROJECT_VERSION: "4" # 3 → 4 に変更ポイント: マーケティングバージョン（1.1.0）はユーザーに見えるバージョン番号、ビルド番号（4）は同一バージョン内の連番。不具合修正の再提出など、ユーザーから見た変更がない場合はビルド番号だけ上げればよい。 2. アーカイブ・アップロード # 環境変数を設定 export APP_STORE_API_KEY="YOUR_KEY_ID" export APP_STORE_API_ISSUER="YOUR_ISSUER_ID" # XcodeGenでプロジェクト再生成 xcodegen generate # アーカイブ xcodebuild archive \ -project KotenOCR.xcodeproj \ -scheme KotenOCR \ -archivePath build/KotenOCR.xcarchive \ -destination "generic/platform=iOS" \ -quiet # IPA書き出し xcodebuild -exportArchive \ -archivePath build/KotenOCR.xcarchive \ -exportPath build/export \ -exportOptionsPlist scripts/ExportOptions.plist \ -quiet # App Store Connectへアップロード xcrun altool --upload-app \ --type ios \ --file build/export/KotenOCR.ipa \ --apiKey "$APP_STORE_API_KEY" \ --apiIssuer "$APP_STORE_API_ISSUER" 注意: xcrun altool に渡す環境変数は export しておく必要がある。source .env だけではサブプロセスに渡らない。 ...

2026年3月11日 · 更新: 2026年3月14日 · 4 分 · Nakamura

App Store Connect APIでiOSアプリにチップ（Tip Jar）機能を追加する完全ガイド

TL;DR iOSアプリにチップ（Tip Jar）機能を追加した。SwiftUI + StoreKit 2 でアプリ側を実装し、App Store Connect REST API を使って商品登録・ローカライズ・価格設定・審査用スクリーンショット・配信地域設定・TestFlight配信までをコマンドラインから完了させた。本記事ではその全手順を再現可能な形で記載する。前提: App Store Connect APIだけでiOSアプリを審査提出する完全ガイドの続編として、APIキーの取得・JWT生成は既にセットアップ済みとする。全体の流れアプリ側の実装（StoreKit 2 + SwiftUI） App Store Connect APIで商品登録（3つの消費型アイテム）ローカライズ設定（日本語・英語）価格設定（$0.99 / $2.99 / $6.99）審査用スクリーンショットのアップロード配信地域の設定有料アプリ契約の締結 TestFlightでの動作確認 1. アプリ側の実装 1.1 StoreKit設定ファイル Xcodeのテスト環境用に TipJar.storekit を作成する。これによりシミュレータでStoreKitのテストが可能になる。 { "products" : [ { "displayPrice" : "0.99", "familyShareable" : false, "internalID" : "tip_small_001", "localizations" : [ { "description" : "開発を応援する小さなチップ", "displayName" : "小さな応援", "locale" : "ja" }, { "description" : "A small tip to support development", "displayName" : "Small Tip", "locale" : "en_US" } ], "productID" : "com.example.app.tip.small", "referenceName" : "Small Tip", "type" : "Consumable" } ] } XcodeGen を使っている場合は project.yml の scheme に StoreKit 設定を追加する： ...

2026年3月10日 · 7 分 · Nakamura