概要

以下の記事で、IIIFの機能を簡単に試すことを目的とした「画像コレクション管理」ツールについて紹介しました。

今回は、このツールの裏側で使われている技術について紹介します。

はじめに

画像コレクション管理ツールは、画像コレクションを国際標準規格であるIIIF(International Image Interoperability Framework)形式で管理・公開するためのWebアプリケーションです。本記事では、このツールの技術的な実装について、特にIIIF仕様の実装と地理空間情報の扱いに焦点を当てて解説します。

技術スタック

  • フロントエンド : Next.js 14 (App Router), React, TypeScript
  • バックエンド : Next.js API Routes
  • データストレージ : AWS S3互換オブジェクトストレージ(Cloudflare R2)
  • 認証 : NextAuth.js
  • 地図表示 : Leaflet, MapLibre GL JS
  • IIIF ビューア : Mirador 3, OpenSeadragon

IIIF実装の詳細

1. IIIF Presentation API v2/v3の両方をサポート

本ツールは、IIIF Presentation APIのバージョン2とバージョン3の両方に対応しています。これにより、様々なIIIFビューアとの互換性を確保しています。

v2とv3の主な違い

{}{}"""""}"""""I@@@ls]I@itliIcitae""IcdyatIodybq@cIo"pbeFn"peutaFn:eemt:eleynt"lsve""npvve":""2x"::cea3xh::the"stt""t""s:e"tM{[:ts"s:pa.pc:""sn"."s:s:":ij.h:M[ch/fa]t/a"{:[t/e"t/n,S.tes:peie.pxt:xfq.:a"[/aeu]/m,"c/mse/paiptnilnil"cievie,ei.af."fc"s.c,.o]ioimomo}//m,amaapapninii/i/fpfperersesetsts"e"e,n,nttaattiioonn//23//ccoonntteexxtt..jjssoonn"",,

2. マルチ言語対応

v3では、ラベルや説明文を言語別に管理できます:

{}"}"}l,sa""u""bjemjeeanmanl""a"""::r:::y[["[[{"":""EEn{ngglliissh"h"]]T,d,ietslcer"i]ption"]

3. IIIF Image APIのサポート

外部のIIIF Image Serverから配信される画像も登録可能です。info.jsonのURLを指定することで、高解像度画像を効率的に配信できます:

c}o;nc}ccciso)ontnmb;nnnfseosssohttdttt.ahyjnio:bitsdndamholf:JsauneoSegUmIJ'OUUeRbnsPNrRULnfoO.lLraonSsl4iJTt=0ls='r=0Uo,iiprnann`xlAwgf$daio{=difJbtysa`=(os$f{ne{ae.Ubstuiraycrdlsnhl}ec(:/U'fr(/iulianil}npfnl/fiof/fo/JofuJisJulsioslloinol/nfUn/4U-r[00ril'/0ln@d,:f}ie/o)df0s''a/t,]udr;lei{tfn.agju)plgt=`.>;jp{g`;

地理空間情報の実装

1. navPlace Extension(IIIF v3)

navPlace拡張は、マニフェスト全体の代表的な位置を示すために使用されます。コレクションの地図表示などで活用されます。

i}c}no;titf}n"]"}edye>s@,nr?patp}g};tc""a""}f:etyr;e;ohhvtf]a:upolotcmnttPye""}"}csrepamyoatttlpatg,pet'e:ebeponeppaetye""r"rFsreterix::c"upotcolNie:'tlr:dft/e:remyopaanaFi?yie"/"e"epoebvgtAee::'ns:ii:"s:terreP;urasPatiiF:r"dtllrrt?{{ot[ii{e"y:ii"aeau:ie=ffa[F"ne:cCyr[ns..t{e:"aseo<e{lt:{iiuaPt"{l{'a'ort{oe:{l;n;[/euis"egnaaCrn"{jc:uppoet:atmiil"""isb//l,,[:otepee1nrrrxc3['i,ett9";nsei.gneno7]unsn4:mti"5"bao,4]setn,tri}r]n3i;na5n/v.g3p6[/l5]ca8[oc6}ne];t/,ecxotn.t]jesxotn."j,son"

2. Georeference Extension(画像の地理参照)

Georeference拡張を使用することで、画像の特定の点を実世界の座標にマッピングできます。古地図のジオリファレンシングなどに活用されます。

i}nttmtb}eyoao;rptrdtt}f}feigyyr;e>a:ve:patoatp}g}m};catenyptyr;e;e;e't:{:sptuporotctltuAifeirepemyoaaarGnos'o:oe:esepodbglenntFrnsroteraes?oo:rem's:'tur:dtl?:Atiaap?Firyia?:na'ntto:Aeec:'n?:sntgguilrasePa:stoie;roy{rt:C{otstrtooennauoie{trianrC?ooyr{onsrint'eo:mr<ert:ingi;flid{'d'ng;oeCl{ae;s;[g[nraelr:n;]enc'?u;{nvt:[mcainbisonuenn'umrgU'tmb,'R;hbe;Iiernnr,u-mp}nbl;ueamrtb]ee;-rs]p;line';

実装例:対応点の設定

c]cr13`o;oe00;n{}{}ns00s,Cso,,trclrclStu24eoaeoaVr00gsobsobcc00eoreorese,,oudludlvX11Pri:ri:D,33ocncnar99iea"ea"te..nCtCtas77toeoeo46sosos=u57r:"r:"r43=dd`c,,s[s[e33[:1:1Y5533,..[9[9l661.3.o580707n810406g64,5,7i,,43t2,4,u00d0303e]5]5,,.,.l66a58t81i64t]]u,,de,label

3. 地図表示の実装

コレクションマップ(Leaflet使用)

c}o;nr)se;tt<uM/Cra<{MonpTi)alCiti}pl(oletCeneme<octLsmM/ntaa..apk<MtiiymlroeP/aaoneaoksyo<<Prinerpcei=phioknMr(art{u3mpeeauitiip>gurrpcrtiot>{p>>eleoneis>=n=mn=mtrt"{.ec(eh=&[im={rt>&id.{=tt}tii{p(eitt[smtee3:.lmm5le.s./o}t6{c<h}7sa/u)6}thm2.i3b=,to>n>ina1l.i{3ell9.a}.ot6pia5etl0nut3sd=]te{}r,ietzeieottmome.mamt=p.i{.lt1ool0rce}ga}>/t{izo}n/.{lxo}n/g{iyt}u.dpen]g}"

外部ビューアとの連携

生成されたIIIFマニフェストは、navPlace拡張とGeoreference拡張に対応した各種IIIFビューアで可視化できます。例えば、IIIF地図ビューアなどを使用することで、地理情報を含むコレクションを地図上で閲覧することが可能です。

アクセス制御の実装(予定)

今後の実装予定として、以下のアクセス制御機能を検討しています:

1. マニフェストレベルの制御

  • マニフェスト単位での公開/非公開設定
  • ユーザーグループによるアクセス権限管理
  • 所有者による細かいアクセス制御

2. IIIF Auth API

IIIF Authentication APIに準拠した認証システムの実装を予定:

  • トークンベースの認証
  • 時限付きアクセストークンの発行
  • 外部認証プロバイダとの連携

CORSエラーの回避

外部URLから画像を登録する際のCORS問題を、サーバーサイドプロキシで解決:

e}xpccccct}}/oooooorarnnnnnyccrcrptsssBssSooeaeitttatth{nnttt/asassucuis{rbebdrttrhrmyeu6aapnnanusf4st使sm{gcrpfeahe{{eloe6Uat-fnr4rraddmu}slpdaaene==atttc===taaat=aBaUUdiawu`(rraowaafda=lltnawifaw,,aiatetaa/PtiraiwwwrOtr.:taiioSref$idduTefsr{itttt(qepocmhherutomops::.eecn(nohtqshsbtram1sut(euetre9e.u.fn(pt2sjraft'(a0tslreTsBd,:o)rryhuan;a)pafthN(y.erfaee)Bt}pe.ix;uo;'rwgtfSb).ihRfta)fdteers.rt:qriedohu(n6em,1e)g4f(0s;(,abh8t'$uue0)b{lfiabtfg}{sa;eh;esrt6e):46)'4.m)}me;`et;taaddaattaa.(h)e;ight};

パフォーマンス最適化

1. 画像の段階的読み込み

c}c}o;o;nrncrIsesoeItttntIusuFgrstrenensItltimT`easzah$criegu{tgzsemiOee[biptssAnitW.iPafiifzIiBmdielaatns使Uslhd.reS(llUi=serzn=le4=g}0>t(/=0hif;siu(.-ilswflii1B/zd]a$et;s{shet:Ua>rrA=lgr:erttaasWyrti<grd{eitwtnhiWg}di,,td/htt0:ha/rdn&geu&efmtabsWue.ilrwdt,it.dhjht:pehgin`g<u;h=mtb:8e0rn0u)=mb4e0r0})>)=>=>{{

2. S3互換ストレージの活用

c}o;nc}arCso)weltnBKBC;atosueooiCuuutcydntDrdpk:ytNnflce:eslootkn3`aam:eftC$rdmyiTlU{eTap,lyiRponrepeLrRSdo,eno23c:tc=e.e使=s'ssnsiesae.mn.sweadeyng(nnPvecvcu./o.tSjmS(O3pm3fb_ea_ijBgnPleU'dUecC)B:tK;LCEIBoTCum__fmNUfaARenMLrdE},(,/{$k{ekye:y}s`t;ring)=>{

セルフホスティングとの連携

Self Museumとの統合

生成したIIIFコレクションは、Self Museumで簡単に公開できます:

{}"}"}l,sa""u""bjemjeeanmanl""a"""::r:::y[["[[{"":""EEn{ngglliissh"h"]]T,d,ietslcer"i]ption"]

0

まとめ

画像コレクション管理ツールは、最新のIIIF仕様に準拠しながら、使いやすさとパフォーマンスを両立させた実装となっています。主な技術的特徴:

  1. 標準準拠: IIIF Presentation API v2/v3、Image API、navPlace/Georeference拡張をフルサポート
  2. 柔軟な地理情報: 単純な位置情報から複雑なジオリファレンシングまで対応
  3. セキュアなアクセス制御: JWTトークンベースの認証と細かいアクセス制御
  4. パフォーマンス: S3互換ストレージとCDN、適切な画像サイズの自動選択
  5. 相互運用性: 各種IIIFビューアやツールとの連携

今後は、IIIF Change Discovery APIやContent Search APIの実装、より高度な地理空間分析機能の追加などを予定しています。

参考リンク