概要

今回開発したエディタは、IIIF対応の高解像度画像上で任意の座標を記録・管理するためのWebベースのツールです。URLパラメータで画像を指定でき、様々な研究プロジェクトで利用可能な汎用的な座標記録ツールとして設計されています。

https://youtu.be/UqPo5Xrkin8

主要技術スタック

  • OpenSeadragon : IIIF画像ビューアライブラリ (v4.1)
  • SVGオーバーレイ : マーカー表示用
  • localStorage : データの永続化
  • Vanilla JavaScript : フレームワークレス実装

技術的特徴

1. URLパラメータによる画像指定

ツールの最大の特徴は、URLパラメータで任意のIIIF画像を指定できることです:

f}cuonncstcci}rtioofeonntinss(Dumttut}}eragrrfngeuulycaetrrPau'UIlla{rtcalhrmPPrecolttlaaaathnetgrrmusrip=eaa)r(otmsUmmnel(a:grs{)e'g/el=d.Ue/tF=e{eRiIrucrLUmmonrorパRgameldoラL.gQwPerメteuaU(ーoUeUrR'タyrrRaIEのolyLmCrデbF(Ssorコur)e.moーnoagprドkm{reoにoQctnd失-uh(ee敗leP'ncしarautoまbyr'(dし.(a)uiたj)m;rn。p;slgデ/(PフiwaUォiirRルinaLトfdm画/o)p像pw;aをr.r使ela用momしoceまdatすete。rir'no:)_n';c.,hsieena)er;sceh/)s;uikeichuzu/Suikeichuuzu_grid_l.tif';

使用例:

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

URLエンコードされた画像URLを?u=パラメータで渡すだけで、任意の画像を開けます。

2. 画像URLごとのデータ分離

localStorageのキーに画像URLを含めることで、画像ごとに独立したデータを管理:

ccoonnssttismtaogreaUgrelKe=yg=et`IimnatgeerUsrelcFtrioomnQ_upeoriyn(t)s;_${btoa(imageUrl).substring(0,50)}`;

画像URLをBase64エンコードしてキーの一部とすることで、複数の画像プロジェクトを同時に管理できます。

3. IIIF画像の自動読み込み

画像URLから自動的にIIIF info.json URLを生成:

f}c}uo)nn;csti}lrtitssifeedihhottv:loon(uiewwirbre"SNNgmeanwvoaaeatseiuvvtgue`reriiIerU$wcggIUnr{=eeaaIrlbrsttFliaO":ioI.m=sp,orneaeein:fngiUnmCodemrSaotUsUalegnrrWrg}aetulile/dUre(t;Uirroihrnallm(lfg.:a'.oosgir.nttenej(arUfps{rurolotel.ans,)jc`Wse;i{o(tn/h'\().')(hjt{ptgp|'j)pe?g|gpentgI|ItIiFfI|ntfiofUfr)l$(/iim,ageU)r;l):imageUrl,

.tifや.jpgなどの拡張子を自動的に処理し、IIIF Image API 2.0に準拠したinfo.jsonをリクエストします。

4. 座標変換システム

OpenSeadragonでは3つの座標系が存在します:

  • ピクセル座標 : ブラウザ上の表示位置
  • ビューポート座標 : 正規化された座標 (0〜1)
  • 画像座標 : 実際の画像ピクセル座標

本ツールでは以下のように変換を実行:

ccccoooonnnnクssssリttttックvixy位im置ea==wg→peMMoPaa画rott像tihh座Pn..標otrrioon=uutnnvdd=i((eiivwmmieaaerggw.eeevPPrioo.eiivwnniptteo..wrxypt))o.;;rvti.epwopionrttFTrooImmPaigxeeClo(oervdeinnta.tpeoss(ivtiieownp)o;rtPoint);

5. SVGオーバーレイによる動的マーカー表示

ズーム・パン操作に追従するマーカーを実装:

f}unctcm}ioa)onr;nsktecccccmuroooooapmsnnnnnrda.ssssskarftttttetkoreeriiivp.MrEmmmiisasaaaaexercgggwetk=heeeplAe(XYPoPtrsmorotPva==itirogrnPnisOkpptotbiveaaiuterrr=n=tirssteol=eenv(na>FFe=i'syllwet(.{oovwr)qaaOieauttpern{e((ew.srmmnevfyaaSrioSrre.erekkavwmleedip'errreo,c..awrtgggpt`oeeoo.trttnrprAAA.tialttP.xnlttoies(rrimll'iinaFagbbtgrt'uu(eoe)ttiTm(;eemoP$((aVo{''giipddeeniaaXwtxtt,p(eaaovl--iriPiimteommaCwiaagopnggeooteeYrr.--)dtxxy;iP}''no,))ai))tn$;;et{s,p(iitxmreaulgePe)oP;ionitn.ty)};)`);

ビューポート変更イベントで自動更新:

vviieewweerr..aaddddHHaannddlleerr((''urpedsaitzee-'v,ieuwppdoartte'M,arukpedraPtoesMiatrikoenrsP)o;sitions);

6. 自動遷移機能

ユーザーの作業効率を最大化するため、次の交点位置を予測して自動的にビューを移動します。

基本アルゴリズム

f}unctccccccccviooooooooionnnnnnnnenssベss次ssビsswttクttのttュttepト予ーrrlsルdd測ppをiv.eae計xy位rr移mivdsc算置ee動aeiito==ddgwecPniiepwtodllccPopAiLaattoronnasseeitrdtsttddnPtNtPPXYto.a=Pooipvoii===naipinntngonttllnTait..aae=otnxyssw(et=ttvvTs--PPOiio[poopeeNlossiiewweeieennnepxnnccttSrottoo..e.r(-snnxyavt)[dddiP1lLL++reo{]eaaawi;nssddgpnttxyoot-PP;;nr,oo.t2iiP.t]nnoir;ttimu..naexytg);;(e;pTroeVdiiecwtpeodrXt,CoporreddiincatteedsY()i;magePoint);

距離変化の検出と警告

異常な移動距離を検出した場合、ユーザーに確認を求めます:

ccci}ooofnnnsss(tttdc)iio;fcpdsnurits(resat````!rvtn前前今予seDacs回回回測hninehの::位otscRo移置uDteau動$$にliaRtl距{{移dsnaid離MM動MtctoMとaaしoaeio大ttまvno>vきhhすec=eく..か)e=1異rr?M.=なoo`r=ac5りuuetucまnntMhrすddua.rn。((rtsef\pcnhqndinru;.rtir`erstDsmvrq(it(+Derpsaintrtnst(eactDdvneaixDcRnsxeacttea/i)ndo}cxppperr<x)+ee\}vv0npdDD.`xyxi6\s7n+t)andpn{`yrc)ee+;v;DyprevDy);

これにより、ユーザーの誤クリックやパターン変更を検出できます。

7. データ永続化とバックアップ

localStorage による自動保存

f}unctc}lio;ooncnsatitplsmioSadamitvagenoetestrPaUtsaora:gi=lmen:pp.t{:ossiieTmnntoaetISgwstteeoUDmrra(altsg,ete(o()r).atg{oeIKSeOyS,trJiSnOgN(.)s,tringify(data));

各画像URLに紐づいた独立したデータ空間で、自動保存が行われます。

エクスポート機能

CSV形式 :

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

0

JSON形式 :

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

1

JSONエクスポートには画像URLも含まれ、後からどの画像のデータかを確認できます。

8. 編集モードと閲覧モードの切り替え

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

2

閲覧モードでもメモの追加・編集は可能 ですが、新規点の追加や削除は無効化されます。

9. ポイント移動機能

順序の入れ替えが必要な場合に対応:

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

3

10. キーボードショートカット

  • Delete : 選択中のポイントを削除
  • ↑/↓ : ポイント間を移動
intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

4

ユーザーインターフェース設計

レスポンシブレイアウト

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

5

ビューアとサイドバーを固定高さで配置し、スクロール可能なリストエリアを実現。

視覚的フィードバック

  • 通常ポイント : 赤い円マーカー + 番号ラベル
  • 予測ポイント : 青い破線円 + クロスヘア
  • 選択中 : 緑色の背景
  • 移動モード : オレンジ色の背景

パフォーマンス最適化

1. マーカー更新の最適化

ビューポート変更時にすべてのマーカーを再計算しますが、DOMの再生成は行わず、transform属性のみを更新:

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

6

2. イベントデリゲーション

個別のマーカーにイベントリスナーを設定せず、親要素でクリックを処理:

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

7

データフォーマット

内部データ構造

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

8

localStorageフォーマット

intersection_editor.html?u=https%3A%2F%2Fexample.com%2Fiiif%2Fimage.tif

9

使用例

基本的なワークフロー

  1. URLパラメータで画像を指定（または、デフォルト画像を使用）
ccoonnssttismtaogreaUgrelKe=yg=et`IimnatgeerUsrelcFtrioomnQ_upeoriyn(t)s;_${btoa(imageUrl).substring(0,50)}`;

0 2. ページを開くと自動的に保存済みデータを読み込み 3. 画像上の座標をクリックして記録 4. 自動的に次の予測位置に移動 5. 必要に応じてメモを追加 6. CSV/JSON形式でエクスポート

複数画像プロジェクトの管理

異なる画像で複数のプロジェクトを並行して作業する場合:

  1. 各画像専用のURLブックマークを作成
  2. 各画像のデータは独立してlocalStorageに保存される
  3. 画像間でデータが混在する心配なし
  4. JSONエクスポートには画像URLも含まれる

大量データの処理

数百〜数千の座標を記録する場合:

  1. 自動遷移機能を有効化して効率化
  2. 定期的にJSON形式でバックアップ
  3. 誤りがあれば移動機能で順序を修正
  4. 完了後、CSV形式でエクスポートして分析

セキュリティ考慮事項

XSS対策

メモ入力値をCSVエクスポート時にエスケープ:

ccoonnssttismtaogreaUgrelKe=yg=et`IimnatgeerUsrelcFtrioomnQ_upeoriyn(t)s;_${btoa(imageUrl).substring(0,50)}`;

1

データ検証

JSONインポート時に構造を検証（旧フォーマットとの互換性も保持）:

ccoonnssttismtaogreaUgrelKe=yg=et`IimnatgeerUsrelcFtrioomnQ_upeoriyn(t)s;_${btoa(imageUrl).substring(0,50)}`;

2

今後の改善案

  1. Undo/Redo機能 : 操作履歴の実装
  2. エクスポート形式の拡張 : GeoJSON、Allmaps形式への対応
  3. 協働編集 : WebSocketによるリアルタイム共有
  4. 精度向上 : サブピクセル精度の座標記録
  5. AIアシスト : 交点の自動検出機能

まとめ

本ツールは、URLパラメータによる柔軟な画像指定、画像ごとのデータ分離、IIIF画像の表示機能、自動遷移機能を組み合わせることで、大量の座標データを効率的に記録できる汎用的なシステムを実現しました。

参考リンク

作成日 : 2025年10月
バージョン : 1.0