画像コレクション管理ツール 技術アーキテクチャ解説

概要 以下の記事で、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 @ @ @ l s ] I @ i t l i I c i t a e " " I c d y a t I o d y b q @ c I o " p b e F n " p e u t a F n : e e m t : e l e y n t " l s v e " " n p v v e " : " " 2 x " : : c e a 3 x h : : の t h e " s の t t " 構 " t " " s : e 構 " t M { [ 造 : t s タ " s 造 : p a . p c イ : " " s n " . " s : ト s : " : i j . h : M ル [ c h / f a ] t / a " { : [ t / e " t / n , S . t e s : p e i e . p x t : x f q . : a " [ / a e u ] / m , " c / m s e / p タ a i p t n i l イ n i l " c i e ト v i e , e i . ル a f . " f c " s . c , . o ] の i o i m 配 o m o } 列 / / m , a m a a p a p n i n i i / i / f p f p e r e r s e s e t s t s " e " e , n , n t t a a t t i i o o n n / / 2 3 / / c c o o n n t t e e x x t t . . j j s s o o n n " " , , 2. マルチ言語対応 v3では、ラベルや説明文を言語別に管理できます: ...

2025年8月24日 · 19 分 · Nakamura

「画像コレクション管理」ツールの使い方ガイド

概要 IIIFの機能を簡単に試すことを目的とした、「画像コレクション管理」ツールを作成しました。 https://pocket.webcatplus.jp https://pocket.webcatplus.jp/ 本ツールの使い方について紹介します。 コレクション管理 コレクションの作成 ダッシュボードで「新規コレクション」ボタンをクリック 必要情報を入力: コレクション名 (必須): わかりやすい名前を付ける 説明 (任意): コレクションの内容を説明 公開設定 : 公開/非公開を選択 「作成」をクリック コレクションの編集 コレクション一覧から編集したいコレクションの「⋮」メニューをクリック 「編集」を選択 情報を更新して「保存」 コレクションの削除 コレクション一覧から削除したいコレクションの「⋮」メニューをクリック 「削除」を選択 確認ダイアログで「削除」をクリック ⚠️ 注意 : コレクションを削除すると、含まれるすべてのアイテムも削除されます アイテム(画像)管理 アイテムの追加 方法1: ドラッグ&ドロップ コレクションページを開く 「新規アイテム」ボタンをクリック 画像ファイルをドラッグ&ドロップエリアにドロップ タイトルと説明を入力 「作成して編集」をクリック 方法2: ファイル選択 「ファイルを選択」ボタンをクリック アップロードしたい画像を選択(複数選択可) タイトルと説明を入力 「作成して編集」をクリック 方法3: URLから追加 「URLから追加」タブを選択 画像のURLを入力 「追加」をクリック 方法4: IIIF画像の追加 「info.jsonから追加」タブを選択 IIIF info.jsonのURLを入力 「追加」をクリック アイテムの編集 アイテム一覧から編集したいアイテムをクリック 編集画面で以下の情報を更新: 基本情報 : タイトル、説明、公開設定 位置情報 : 緯度、経度、場所の名前 詳細情報 : 帰属表示、権利情報 追加情報 : カスタムフィールド(作成年、作者など) 「保存」をクリック ...

2025年8月22日 · 1 分 · Nakamura

IIIF Georeference ViewerのMapLibre GL移行と機能改善

本記事はAIが作成し、人間が追記しました。 概要 IIIF Georeference ViewerにおけるマップコンポーネントをLeafletからMapLibre GLへ移行し、複数の機能改善を実施しました。本記事では、実装した主要な機能とその技術的詳細について説明します。 https://nakamura196.github.io/iiif_geo/ 主要な改善点 1. 画像の自動回転機能 IIIF画像を地図上に正しい向きで表示するため、コントロールポイント(対応点)から自動的に回転角度を計算する機能を実装しました。 機能概要 画像座標と地理座標の対応点から、画像を北が上になるように回転させる角度を自動計算 2点間または3点以上の分布パターンから最適な回転角度を決定 URLパラメータによる回転角度の保存と復元 実装のポイント e } x p c ) c c c r u o ; o o o e t r n f n n n t i t 最 s . 画 s s 北 s u l も t p 像 t t を t r s f 離 r 座 基 n / u れ v o 標 i g 準 r c n た a p 系 m e と o n a c 2 l e で g o し t o l t 点 i r の V V た a r c i を d t ベ e e 角 t m u o 見 F i ク c c 度 i a l n つ e e ト t t の o l a け a s ル o o 差 n i t c る t ? と r r を D z e a ( u . 地 計 e e I l よ r r 理 = = 算 g A m c り e e 座 n a u 正 s s 標 { { = g g l 確 o 系 l e a な = u で x x g e R t 角 r の : : e ( o e 度 f c ベ o r t I 計 e e ク i g A o a m 算 a C ト m e n t t a の t o ル g o g a i g た u o か 2 2 l t o e め r r ら . . e i n R ) e d 回 x l F o . o s s 転 n r n t t . 角 - g o D s a f & 度 m e t i & を i - N g i l 計 m o ) o t f 算 g g r ; n e . 1 e t ( r g . o h f ( e x 1 D e ( o , . e a f m l g t ) e y n u t : g - r = r , e > y i i s ? m y m : . g : g c 2 A F o . g n e o y e g a r o l t d - 2 e u i . D r n i l e e a m a g [ t g t ; ] e 1 ) s . - : y g R } e o ; o t 1 a . t l i a o t n C } a ; l c u l a t i o n R e s u l t | n u l l { UI実装 自動回転ボタン(🔧アイコン)をOSDビューアーに配置 rotationパラメータが未指定の場合は自動的に回転角度を計算 手動での角度調整用スライダーも提供 2. LeafletからMapLibre GLへの移行 移行の背景 パフォーマンス向上 : MapLibre GLはWebGLベースのレンダリングにより、大量のマーカー表示時のパフォーマンスが向上 スムーズなアニメーション : 地図の移動やズーム時のアニメーションがより滑らかに ベクタータイルのサポート : ラスタータイルに加えてベクタータイルの表示が可能 実装のポイント i i c m } m m o a ) p p n p c s c z a ; o o s M I o t e o t r r t a n n y n o t t t p s t l t m r m L t a e e : i { " a i a i : r b m p b n n : z u M a I r c e m o t a p n e e r a i o i p l s . : p n m o , i t G v S i _ n b a L a m t t . C N r n 初 l a y i v o a e c 期 u p l a a n v - e 化 e C e l l t i g o s C u r g l = = n . e e o a / t v n , l t d r n a a t : i i e e i l e o s f w n u r f n t < e e , a C M M r [ l m a a . 0 s n a p p v ] e t p ( a . r l | { l s o i u t l b n e y , r u ! l e l , e M - l , a g > r l ( k . n e c u r s l , s l " ) P ; ; o p u p } f r o m " m a p l i b r e - g l " ; 3. 現在地表示機能 ブラウザのGeolocation APIを使用して、ユーザーの現在地を地図上に表示する機能を実装しました。 ...

2025年8月20日 · 12 分 · Nakamura

Omeka Sテーマの多言語化

はじめに Omeka Sのテーマ開発において、多言語化の実装方法に関する日本語の情報は限られています。本記事では、Omeka Sのカスタムテーマを多言語対応させる具体的な手順と、実装時の注意点について解説します。 目次 Omeka Sの翻訳システムの仕組み テーマの多言語化に必要なファイル ステップバイステップガイド よくある間違いと解決方法 実装例 トラブルシューティング 1. Omeka Sの翻訳システムの仕組み Omeka Sはgettext という標準的な翻訳システムを使用しています。このシステムでは: .poファイル:人間が読み書きできる翻訳ソースファイル .moファイル:コンパイル済みのバイナリファイル(実際に使用される) $translate()関数:PHPテンプレート内で翻訳を適用 2. テーマの多言語化に必要なファイル 必要なディレクトリ構造 y ├ │ ├ │ │ │ └ o ─ ─ ─ u ─ ─ ─ r - c └ l ├ ├ └ v └ t o ─ a ─ ─ ─ i ─ h n ─ n ─ ─ ─ e ─ e f g w m i t u t j j / ( e g h a e a a 各 / / e g m . . 種 m e p p m テ e l o o ン . a プ i t レ n e ー i . ト p フ o ァ t イ ル ) # # # # 日 日 重 翻 本 本 要 訳 語 語 : テ 翻 翻 h ン 訳 訳 a プ ソ バ s レ ー イ _ ー ス ナ t ト リ r ( a オ n プ s シ l ョ a ン t ) i o n s = " t r u e " を 追 加 3. ステップバイステップガイド ステップ1:theme.iniの設定 config/theme.iniファイルの[info]セクションに以下の行を追加します: ...

2025年8月14日 · 14 分 · Nakamura

Cantaloupeでdelegate scriptを使ってAzure Storage上のファイルパスを動的に変換する方法

はじめに IIIFサーバーのCantaloupeでAzure Storageを使用している際、IIIF URLのidentifierと実際のAzure Storage上のファイルパスが異なる場合があります。本記事では、この問題をdelegate scriptを使って解決する方法を詳しく解説します。 課題 以下のようなファイル構造で画像を管理しているとします: A ├ │ │ │ │ │ │ │ z ─ u ─ r e i ├ │ │ │ │ └ m ─ ─ S a ─ ─ t g o e c ├ │ └ c └ r s ─ ─ o ─ a l ─ ─ l ─ g l l e e i └ i └ e c t ─ t ─ c C t e ─ e ─ t o i m m i n o 0 i 0 i o t n 0 t 0 t n a 1 1 e 2 e 2 i / / m / m / n 0 0 e 0 0 r 1 2 : _ _ 0 0 m 0 0 y 1 1 c . . o j j n p p t g g a i n e r しかし、IIIF URLでは以下のようにアクセスしたい: ...

2025年8月12日 · 14 分 · Nakamura

Omeka Sの使い方を調べる

概要 Omeka Sの使い方を調べる方法に関する備忘録です。 調べ方 公式マニュアル 公式マニュアルです。こちらが最も充実しており、最新の内容が反映されていると思います。 https://omeka.org/s/docs/user-manual/ Chat With Copilot 次に、自然言語で調べる方法として、「Chat With Copilot」を使用する方法です。 以下のリポジトリにアクセスして、 https://github.com/omeka/omeka-s-enduser 「Chat With Copilot」をクリックします。 以下のようなチャット画面において、質問を行うことができます。 DeepWiki Chat With Copilotと同様、自然言語で問い合わせることができる環境として、DeepWikiサイトを作成しました。 https://deepwiki.com/omeka/omeka-s-enduser 以下のように、日本語による問い合わせも可能です。 公式マニュアルの日本語版:最新版ではありません。 英語の公式マニュアルを機械翻訳によって日本語化したサイトを以下で公開しています。 https://nakamura196.github.io/omeka-s-enduser/ja/ 最新でなかったり、フォーマットが崩れているなど、不完全な点が多いですが、参考になりましたら幸いです。 Zennの本 こちらも不完全ですが、個人的にOmeka Sの使い方をまとめています。こちらも参考になりましたら幸いです。 https://zenn.dev/nakamura196/books/70ab821362fe2f まとめ LLMのおかげで、OSSリポジトリの使い方を調べる手間が大幅に減少していると思います。LLMの発展に感謝いたします。

2025年8月10日 · 1 分 · Nakamura

RELAX NGとSchematronを組み合わせたTEI XMLスキーマの実装ガイド

! 人手で検証を行った後、AIが記事を執筆しました。 はじめに TEI(Text Encoding Initiative)XMLを編集する際、要素や属性の構造検証だけでなく、より複雑なビジネスルールの検証が必要になることがあります。本記事では、RELAX NG(RNG)とSchematronを組み合わせて、構造検証と内容検証の両方を実現する方法を、実際のプロジェクトで直面した課題を例に解説します。 解決したい課題 日本の古典文学テキストをTEI XMLで校訂する際、以下のような要求がありました: ID参照の動的検証 : corresp属性で参照するIDが、実際に文書内のwitness要素に存在することを検証したい Oxygen XML Editorでの補完機能 : 編集時にIDの候補を自動表示したい 複数ID参照のサポート : スペース区切りで複数のIDを指定可能にしたい 特定要素のみ参照を許可 : witness要素のIDのみを参照可能とし、person要素のIDが含まれる場合はエラーにしたい なぜRNG + Schematronなのか? RELAX NGの得意分野 要素・属性の構造定義 データ型の指定 基本的な内容モデルの定義 Schematronの得意分野 XPathベースの複雑な検証ルール 文書内の相互参照チェック カスタムエラーメッセージの提供 この2つを組み合わせることで、構造と内容の両面から厳密な検証が可能になります。 実装例 1. 基本的なRNGスキーマ構造 < < ? g / x r < < < < < g m a ! s ! s / ! r l m - c - t < s - a m - h - a r t - m v a : r e a m e r S n こ t f r R a r c s こ > t N r s x x x d n h に n > G > i m m m a s e p S a に o l l l t = m r c m よ n n n n a " a e h e る = s s s t h t f e = 構 " = : : y t r i m " 造 1 " a s p t o x a T 定 . h = c e p n = t E 義 0 t " h L : 名 " r I " t h = i / 前 t o " p t " b / 空 e n / e : t h r w 間 i ル > n / p t a w 宣 " ー c : t r w 言 ル r / p y . u を d e / : = t r 埋 i l r / " e i め n a e / h i = 込 g x l p t - " む = n a u t c h " g x r p . t U . n l : t T o g . r p F r . / g : - g c w / / 8 r l w n / " n g c w s w ? s . . / w > n o w 1 w s s r 3 . . t / g . 0 t r c o " e u d r > i c m s g - t p d / c u a l 2 . r t / 0 o e i s 0 r / b c 1 g 1 i h / / . l e X n 0 i m M s " t a L / y t S 1 / r c . a o h 0 n n e " n " m / o a > t - a d t a i t o a n t s y / p 1 e . s 0 " " 2. ID定義とanyURI型の活用 Oxygen XML Editorで自動補完を実現するために、anyURI型を使用します: ...

2025年8月9日 · 17 分 · Nakamura

Docker環境でDrupal 10にWDBモジュールをセットアップする手順

概要 この記事では、Docker環境でDrupal 10を構築し、言語学データベース用のWDBモジュールをインストールする手順を解説します。 前提条件 Docker Desktop がインストールされていること Git がインストールされていること 手順 1. Docker環境の構築 まず、docker-compose.ymlファイルを作成します: s e o r m d l m v a r u a i r i r e u i d p r m r c i m e o n p m o e o e e i e a a s l - v M M M M a a l p - r - s s a s d g t u i Y Y Y Y l g u e t t : d : b e a m m r S S S S : e m n m s 8 a b : : r e a o Q Q Q Q : e / d a : 0 r : t s r n L L L L s d d d d s r 8 t m : : i m _ _ _ _ d : r r r r _ i 0 : { a a e R D U P r u u u u o a : } r a d n O A S A u p p p p n d 8 a i l b t O T E S p a a a a : b 0 l a w : : T A R S a l l l l w d a / _ B : W l / / / / a b y v P A O : f m t p y : s a A S d R 1 i o h r s l r S E r D 0 l d e i a / S : u : . e u m v t l W p 2 s l e a e i O d a d . : e s t s b R r l r 7 / s : e t / D u u - o : : m : p p p p o / y a a h t p o s d l l p p t p q r 8 d t t l u . r d / p 2 u d r d a - p r u r l a a u p u p l p a p a / a l a c w l l h e w / e b w e p - / e b r b s b i u i t v l t m h a l e o e t s s d m e e / u e y d l s e e e f s a u l t / f i l e s 次に、必要なディレクトリを作成し、コンテナを起動します: ...

2025年8月7日 · 6 分 · Nakamura

生成AIを用いてプロジェクトに特化したrngファイルを作成する

概要 TEI/XMLファイルを編集する際、検証に使用するrngファイルを変更することで、使用するタグや属性を限定することができます。これにより、作業者が使用するタグに混乱しない、作成されるTEI/XMLのばらつきが軽減する、といった利点が考えられます。 rngファイルを編集する方法として、以下の記事で紹介したように、Romaを使用する方法が一般的です。 この方法はトップダウン的に使用するタグや属性を限定していく方法ですが、今回は、すでに作成済みのTEI/XMLから、生成AIを用いて、ボトムアップ的にrngファイルを作成してみます。 対象データ 校異源氏物語テキストDBで公開されている以下のXMLファイルを対象とします。 https://kouigenjimonogatari.github.io/tei/01.xml このファイルでは、以下のtei_all.rngを使用しています。 http://www.tei-c.org/release/xml/tei/custom/schema/relaxng/tei_all.rng そのため、以下のように、挿入可能な多くのタグがサジェストされることがわかります。 生成AIによるrngファイルの作成 以下のようなプロンプトにより、対象とするXMLファイルのタグの使用状況などに応じて、rngファイルを作成します。 # # - - # - # 1 2 3 4 # - - # 1 2 # # # . . . . # # . . X 作 作 フ 不 必 M 目 業 業 提 ァ 要 制 要 須 期 カ 簡 L 的 効 者 供 イ 望 * * * * 約 な 属 待 ス 潔 フ 率 が す ル 現 最 入 コ ・ 要 性 す タ な ァ 向 タ る 名 在 小 力 メ 方 素 を る ム 使 イ 上 グ フ : の 限 補 ン 針 は 明 成 R 用 ル の 選 ァ X か 完 ト 除 確 果 N ガ 用 た 択 イ 0 M つ ・ 付 外 に 物 G イ カ め に ル 1 L 必 バ き ( 定 フ ド ス 、 迷 . フ 要 リ * 例 義 ァ タ 使 わ x ァ 十 デ * : イ ム 用 ず m イ 分 ー で ○ ル R す 、 l ル な シ 、 ○ ( N る 一 を 要 ョ 各 、 . G 要 貫 分 素 ン 要 × r ス 素 し 析 セ * 素 × n キ ・ た * ッ * の は g ー 属 構 * ト が 用 使 ) マ 性 造 し * 効 途 用 作 を で 、 * 果 を し 成 限 編 実 で 的 明 な 依 定 集 際 R に 記 い 頼 し で に N 働 ) た き 使 G く R る 用 ス よ N 環 さ キ う G 境 れ ー 設 ス を て マ 計 キ 構 い を ー 築 る 作 マ 要 成 を 素 作 ・ 成 属 性 を 特 定 結果、以下のrngファイルが作成されました。 ...

2025年8月1日 · 30 分 · Nakamura

Omeka S Docker の紹介:デジタルコレクションのための最新かつセキュアなソリューション

! 本記事はAIが作成しました。 Omeka S Docker へようこそ!このプロジェクトは、大学、ギャラリー、図書館、アーカイブ、博物館向けの Web パブリケーションシステムである Omeka S の本番環境対応 Docker セットアップを提供します。 📦 GitHub リポジトリ : https://github.com/nakamura196/omeka-s-docker なぜ Omeka S Docker なのか? デジタルコレクションの管理は複雑である必要はありません。そのため、Omeka S のデプロイと管理を簡素化する Docker ベースのソリューションを作成しました。 主な機能 🚀 クイックセットアップ : シングルコマンドで数分以内に Omeka S を稼働 🔒 セキュリティファースト : 非 root コンテナとセキュアなデフォルト設定を含むセキュリティベストプラクティスで構築 📦 モジュール管理 : 人気の Omeka S モジュールの自動インストールとアップデート 🔄 簡単なアップグレード : データの永続性を保ちながらシームレスなバージョンアップグレード 🐳 本番環境対応 : 開発環境と本番環境の両方に最適化 🌐 Traefik 統合 : リバースプロキシと SSL 終端のビルトインサポート はじめに 前提条件 Docker と Docker Compose がインストールされていること コマンドラインの基本的な知識 (オプション)SSL 付き本番環境デプロイ用のドメイン名 セットアップオプションの理解 この Docker セットアップは2つのデプロイモードを提供します: ...

2025年7月30日 · 3 分 · Nakamura

IIIF 3D Viewerを試作しました。

! 本記事はAIが作成しました。 はじめに デジタルヒューマニティーズの分野において、文化財や歴史的資料の3Dデジタル化が急速に進んでいます。しかし、3Dモデルを単に閲覧するだけでなく、学術的な分析や教育に活用するためには、適切なツールが必要です。本記事では、IIIF(International Image Interoperability Framework)規格に準拠した3Dモデルビューア「IIIF 3D Viewer」について紹介します。 IIIF 3D Viewerとは IIIF 3D Viewerは、IIIF Manifestフォーマットに基づいて3Dモデルを表示し、アノテーション機能を提供するウェブアプリケーションです。 主な特徴 標準規格への準拠 IIIF Presentation API 3.0に準拠 既存のIIIFエコシステムとの親和性 インタラクティブな3D表示 GLB/GLTFフォーマットのサポート マウスやタッチ操作による直感的な操作 WebGLを活用した高速レンダリング アノテーション機能 3Dモデル上の任意の点にアノテーションを追加 3DSelectorタイプによる空間座標の記録 学術的な注釈や解説の付与が可能 多言語対応 日本語・英語のインターフェース 国際的な研究プロジェクトでの利用を想定 静的サイト生成 Next.jsの静的エクスポート機能を活用 GitHub PagesやNetlifyなどで簡単にホスティング可能 技術的な実装 アーキテクチャ 本アプリケーションは、以下の技術スタックで構築されています: フロントエンドフレームワーク : Next.js 15(App Router) 3Dレンダリング : React Three Fiber + Three.js 国際化 : next-intl スタイリング : Tailwind CSS 型安全性 : TypeScript IIIF Manifestの構造 3Dモデルを含むIIIF Manifestの例: { } " " " " " ] @ i t l i c d y a t { } o " p b e n : e e m " " " ] t " l s i t i e " : " " d y t { } x h : : " p e t t " : e m " " " ] " t M { [ " s i t i : p a " : " d y t { } s n " h : " p e " : i j t " : e m " " " " } " h / f a t C [ " s i t m b , t t / e " p a " : " d y o o " " " a t e s : s n h : " p t d i t f r p x t : t " : e i y d y o g : a " [ / a t A [ " v " " p r e / m , " / s p n " : a : : e m t / p 石 e " s n h t " a " i l 淵 x , : t " i { " : t : i e 家 a t t A o h " i . 地 m / a p n n t " : " f c 球 p e t s n " t M h . o 儀 l x i : : p o " t i m " e a o t s d m t o ] . m n / a " : e o p m c p P e t p / l d s a a } o l a x i a / " e : p n , m e g a o i e , l / i i / . e m n n x / / / f c c " p " t a g e p e a o , l , i m l x r s n m e n p t a e t v / . g l f m s . a a c " e - p e j s n o , . b l n s / n m c i e t o 1 o / o n . a n " t a m a c t " , a n / r o i , t n m y m o i o o " / n o t d c / n a e a 3 p t l n / a i . v c g o g a o e n l s n / / b / t 1 1 " 1 e " " , " x , , t . j s o n " , アノテーションの実装 3D空間におけるアノテーションは、以下のような構造で表現されます: ...

2025年7月29日 · 4 分 · Nakamura

「前近代日本-アジア関係資料デジタルアーカイブ」のビューアを試す

概要 「前近代日本-アジア関係資料デジタルアーカイブ」が2025年7月25日に公開されました。 https://asia-da.lit.kyushu-u.ac.jp/ また、以下でビューアが公開されています。 https://github.com/localmedialabs/tei_comparative_viewer 本記事では、本ビューアを試した記録を共有します。 結果、以下のように、セルフホストすることができました。 https://tei-comparative-viewer.aws.ldas.jp/ 以下の「海東諸国紀」のXMLファイルを読み込んでいます。 https://asia-da.lit.kyushu-u.ac.jp/viewer/300 ローカルで起動する 以下に丁寧な説明がなされていますので、手順にしたがって起動させることができました。 https://github.com/localmedialabs/tei_comparative_viewer/blob/main/docs/SETUP.md サーバで起動する サーバで起動するにあたり、Dockerを用いて起動しました。 フォークしたリポジトリは以下です。 https://github.com/nakamura196/tei_comparative_viewer/tree/docker-traefik-setup 以下のようなファイルを用意しました。 F # R # R # R # C # W # C # R # R # R # C R # C # C # R # R # R # E # R # C R U U U O O O U U U O U O O U U U X U M O I N C N I N G P S R C P I N I N R N C P N C P C P C N G N O N E P C N S D M n l n e Y e K o Y n n e o Y o Y o Y r e p x O r t s a g c l l l z u n n n s e a s d t t D p s c s n m r p l p p e m & & & n p t p p p p S e m a [ p t p i u i i i i n o p g u a p t o I y . t o t p o m y d n y d y d a k & & & e h i h h h o E a k r " h a t t r b b b p z d m i p r t a c l - w R a m a m v o o o t d r p m p p p s t d t / p l - l p o x i e n e - l k a f o e l p l e - n c - P c s c e i c c c a i e 8 e i u : l g n n m \ p j \ x r c g l e t r r x v l o l i f g k s H k u k r h h h t a z a a a 0 r s s 8 e g i l s v a e r e o k v i a s n d i e P e p e n o m m e r e r r r p P u r . s t - g 2 \ i c t P - s m i a s r d e a s e / n r - r e r e - w o o t t t t o H - p / 2 y d - - s h H p t = n r t / e r n t f e x e F / r / c p n d d k i L i i i r P p e b - s u e d d o e c P h c g / i w p d a a t n t P p s e e s a s s s t - r i f t p v e e r l p C o w n w e i l u c c g c M h i u s - - - y a r a a a F v n p e d v v e e - o m d w g w n n b l l / o i / p s p s v R R R n a n n n 8 P v i / m m a a x e m p i w d s u t n n n n c o e a a v 0 M a s s t n t x p o r a e t i & g f x g w r r r r w 7 7 k e c r v r o u d e e t o s e p n a l & n i i / i n w v y / w 5 5 e l o o i s r p e & n - s e c p c l d g n g a n f w c i l w 5 5 y n u e r d e p & & s i e r t l i l n i x p x i . o s d o - : f t w c u r e & i n r : o i e f p n / p g c n o i g d g i e : k n v n r o s l r c s r m x s . s o f r r / a v e g : c e / i d a m n t a y a - o i c i n i / e s t a a n : c a t p s e p s a t t n n r s t o t f g s c u a r r e c a c h o n t - l e i o t u i e n e u t p : / / r a c h d p r c - r l s o - e n t s f s / p o e w w w a c h e i d i g f t n d n e - - u e r r w w w t h e r " e e m e d b e / a s r i v w w w e e e , s t b / d v u n e v r v e i - / / & c v s u i a i a t a / i s s d s b & & t " i a t s r s l b c i l s o a t o & o - n r r r e s d l / l o o a r t o o \ r c s / i / c o e e n a c r n a r t \ y " t l n b t p t d g b a d d \ a s , a i g i o t s / i l l . g t l b n r i d n e / c s v e r " l / e / y m e x e o e a a / a x c i f a t n t r \ p e - p i o c z a s p c f / / t y t f m o e u i p / p w c c / p n - l t . p / e w a / \ l p o t a t e c h e r w c s i c s e u s o p t m h u s n e n t - n - c i \ e p t t r t o a f f / s e s l s l v p s s r / / o a / m u i v * b u a i e . p o i c s d l t d e n s m r e a c / r s o a / r b / w v r t b l n w i / h i e g w s c n / i . o o g / a n c r n d c p x o / f o p n c . m . s f o d p c i n / o o t f s s n e . u e f s d p r - / e e s r n u v a p i b e s l r o e v r d i d / s . o c r o d n . f c " o ] n f s n e e r a t t v p w r i p b c r e n l o a e c : u o e n o e a r e x e i c d n s v l t - b - # - - - - # - - - - # - - - - - - - # - k f t s l o o t t _ u w e s i e : d n c a a f . m t l " H " " " " H " " " " S " " " " " " " A " : k r : t k i r i e e r r s t T t t t t T t t t t e t t t t t t t p t - n e e n t l n s s p k a : r T r r r r T r r r r c r r r r r r r p r n a x r e : e v : t u s e a P a a a a P a a a a u a a a a a a a l a e l t f r : . o b : f e e e e e S e e e e r e e e e e e e y e t : : i _ u e r l i f r f f f f f f f f i f f f f f f f f w l n n x a i k i o i i i i r i i i i t i i i i i i i m i o t . e a l t g c - k u k k k k o k k k k y k k k k k k k i k r r : m e e e / n . t . . . . u . . . . . . . . . . . d . k u e s r : a e e e h h h h t h h h h h h h h h h h h d h : e D : s n / s t n r t t t t e t t t t e t t t t t t t l t o - a v s w a t t t t r t t t t a t t t t t t t e t c t s l a e o b ( p p p p p p p p d p p p p p p p w p k e t r t r l r . . . . . . . . e . . . . . . . a . e i o / s k e e r r r m r r r s r m m m m m m m r r r _ p w : = d o o o i o o o e s i i i i i i i e o f v p w / t i u u u d u u u r d d d d d d d s u i i e w r r t t t d t t t v d d d d d d d t l e d / a u e e e e l e e e i l l l l l l l e e w s r e c r r r e r r r c e e e e e e e r . e t " t s s s w s s s e w w w w w w w s p r w s . . . a . . . s a a a a a a a . r _ r w a a a r a a a . r r r r r r r a o a a w t p p p e p p p a e e e e e e e p d p g / o p p p s p p p p s s s s s s s p . p e p - - - . . . . p . . . . . . . . t u H i i i h r e t . a a a a a a a m r b T n n n t u n l l p p p p p p p i a l T s s s t l t s o p p p p p p p d e i P e e e p e r . a - - - - - - - d f c S c c c s = y c d h h h h h h h l i / ) u u u - H p e b e e e e e e e e k a r r r r o o r a a a a a a a a w s e e e e s i t l d d d d d d d a s . . . d t n r a e e e e e e e r e r e m i ( t e n r r r r r r r e t u n i r ` s s c s s s s s s s s s l t d e x = o e . . . . . . . = e r d c x w l r h h h h h h h a = y l t x e v . e e e e e e e p H p e . . b e s a a a a a a a p o o w r y s r e d d d d d d d - s i a e y e = r e e e e e e e h t n r d y c m v r r r r r r r e ( t e i . u y e s s s s s s s a ` s s r z r r r . . . . . . . d x = = e z e e . f c b r s s s e x w h c z " s p r o r e t t t r x e t t ` o o a n o f s s s s . b t s ) l r m t w e S I P " y " p c " v t e e s r e n r y s h e = D n e r c c e y - e r 8 e t r e o l l . r m " 0 n T X r n u o z e e " y y s P d d a z d . = p s o s e d z i s t e F l = S = ` r c r N i i 3 u t ) e h u o l c 1 b r " c e e s t y 5 d u t m " n e = 3 o e " e i r s 6 m " = f = t 0 a h f t r 0 i t = r i 0 n t t u c " s p r e t = s u " - t " e o r " r u i e g " i n - w h e n - c r o s s - o r i g i n " # A A A A # D # D # S C # L # M # P P P P O B E A O A A P P P P D M D _ S S C L G M I O p _ _ _ _ o A a C e S H o _ a L t p E D K U m I t O s I E g C i _ h l N E E R a N a N s O _ g H l M e i V B Y L i = b N i N D i A A r c = U = = n x a E o _ R n N ( I a p G h x s C n D I g N i L L t r = t C x e T R V E f E a i o f t o . I a I E L R r o d a p n y O n V R = n = a n u l s f y N d E = s e s v c s : i y = R f t e m e E t e / g . s C = i a d t l n i / u z q a f l c e p v o x r z l c i e k d c i n x a z i h l ) o r x t t e e n o . i e f n y o i m y n g e y u n . ( r t z u a z s t z e i d o n i s n a d s o c n k e e e r d - e c d o m p o s e l a b e l s ) # e # i f # e e e e e e e e e r # e # e i f e # e m m m m # e c # e i f # e d # e s # e i f # e d # e d d d # e i e f e e e e e e e e e e e e e e e e e e e ! c f i c c c c c c c c c e x c f i c c k k k k c p c f i c o c l c f i c o c o o o c f l i c c c c c c c c c c c c c c c c c c c / h . 設 h h h h h h h h h a . p t h h 必 h d d d d ま h D h コ h c 起 h e ア h 権 h c 設 h c c c ア h s h h h h h h h h h h h h h h h h h h h b o e [ 定 o o o o o o o o o d e o r o ! o 要 o i i i i ず o . o o ! ン o k 動 o e プ o d 限 o k 定 o k k k プ o d e o o o o o o o o o o o o o o o o o o o i n e c # e d # A s r e の n r a e e e e e e な r r r r . e c e d テ e 確 p リ o e d を e キ e e e リ o e e e n " v ! c p c o P e m c 確 " " " " " " " " " - v t e " d c c c c c x " デ " e " n k " d c o ナ " r 認 " ケ " c c o 設 " r ャ " r r r ケ " c c c c " " " " " " " " " " " " " " " " " " " / = . h ア h c 生 P d h 認 " ⚠ " N w " p フ f C o h h h h h i ✅ ィ C - - - - n C v e B o h c を S W 1 ー C k h c 定 S ッ C ー C k h h h " ✅ " A ( " T " T " T " 📝 b = e - o . プ o k 成 _ a o ️ o i ァ $ i h c o o o o o t レ r p p p p v o . r u c o k 起 t c a 5 シ h e o k e c シ l c c c シ h e o o o p a o o o a = x f e リ e - p p し K - p t t " イ ( k e k t ク e フ p e イ i k e 動 a o i ョ e r e t o ュ e o o o ョ e r S p s d d C N 1 2 3 s t " n ケ " r w h h た E i p " 1 2 3 e h P ル c - c e " " " " " 1 r ト a s s s b ァ y x メ l e " r r m t ン c " r t m を a m m m ン c " " " e l s s o v o c h e . . . h T e . C v ー G p p キ Y . _ A I . . . : r を a n k r ❌ P " I a リ t t t t o イ i t ー d r ❌ t p i キ k c G i p ク r p p p の k c ✅ ❌ t i u t c i c h e x E r e r . シ e r $ : ー = b k p M t e ロ t e i l f e を i o o o o ル n e ジ i c i o n ー i o e c n o リ i o o o 状 i o u c m o k e k e c t E U E I n n e e ョ n u ( v 8 a を $ a e p P D A A T h s ー t n n E e d f 作 n r r r t を g r を n c D o n s g が n m n o g s ア n s s s 態 n m A A d p a i p e w e c k d p n a v a x ン e n p a . r . ( k y l O O P S h e s ド . w g e r a y o i 成 g a a a s コ n ビ g o o m g e 設 g p e m e g e e e 確 g p p p o t n r r k s i d s C l . t t キ r w r 2 t e c . i R M P S i e o t r s o c k g g g t ピ e a ル m c p f 定 o r p p 認 o p p c c i g t l y t t a u o フ e i e ー a d / - i n a " t c T A _ E s ' E n r i w o e u k - n e e e r ー n l ド D p k o c - o さ a s a o e - c - - - a s l l k o o h c o c T o e t r m ァ x n r を t - ) w c s v t s m a A I U T t n v k f o r e n e / / / a v ( o o e s o f r れ n e t s r f o f f f p e i i e m n y e o g o r u p . e e p イ t g n 生 i r : w l a . / p t N N R _ s r t . が r : e n r e c a f l p i . キ c s r e n て d i e m n p c c r p o m s m a r s e a ル e a 成 n m / w i n e a A i T = L U e a e e 存 t k n e t e p r o / r e ー k e t d s い - n i d f d d d l - a a l s u a p , p e : n d D r が r . l g x p P . o : y = R t e r x 在 r t s e n w s p a g c o n 生 e b - a o e な g f g - s o i o o o i f t t c e h r p o o f T " v o N a 存 n e . \ a \ \ k t p P e n o h L u f t す a l r u d e o s / m s a n v 成 r - u f i c r い e f s c g c c c c i i o t o p s r s i r . c S t 在 a n e a r e e _ _ n P u t = p i t e る e s a r t r a p e c m な f i n k v 場 n d n i k u k k k a d o o m e u e l e u e k a e k i し l v x p / y r k K v k l r t h k o r か f e e t w k r u w h e し i l d e e i 合 e o e d o e r e e e t o n n p ! l x i n e x e i v な . a p w : n e E . e e - p t a - n 確 i | f o o y b o e n の m d d o r r c は r c w o n r a r r r i c o " d t c - : - r f t r s e い ] e m l w g a y Y e y a d s t s n c a 認 k i y r f l r t D a o c s - e 生 a k c s - t - - - o k c c s e a f " f o i e - 場 ; x p i w e l . = x s o : p s e o l - g k o c k o d i k o g c f k . c s 成 t e a k . c i c c c n e o o e b r t u k r c p V 合 t l c n に t / t g e m / s u t n n r - u r u i c / f c e k a e . o i r p e . o o o o o r n n e n i d d t n o r i は t e e a \ e 設 m A e e a / : m w t | e e n r e c n r { i k s e i r . m t n - p r . m n m m m s - t t - a o o o i d a m o e 作 h r t r 定 p P r n e i y e o i t p e a r d e c l e . r l - " p o g c l - " p p p p t c a a f a l n c c n a l p p w 成 e n . i a ) P n e d n / s r n g w t e t e ! c a e r . - e c o o i c o c o o o a o i i v , k k g s o e e n a e o t _ a r i . u y k u r o - w x e a " t c . f . c d o s b a m c o s a s s s t m n n d a T e e h w s r r l n n e K l a t c r o y ' e e r q o t t o h . i " o . m e e p p a m e c e e e u p e e o i r r r r ( b i e l v E . t o - u o p k r e t e r e . l m p - p o t p - h - - - s o r r c l a u - - i o t - y S f . k Y b e . m d r u a w t k r h i , " e p T o e r l s i o e e e e e . s k a e n c c f a h e e i e e - = a d e o - l i e r n e t e s を o r s x e i e o s x . x x x . e i m e b f : o o r x c t l x y e b k n ( m d h r t x a n a r s e 使 s y e t a c - n e t . t t t . - s a r l i " m m d d y t o u e t . n a s v y a o a e h i e o l n a . s 用 e i - e d a e - e . e e e " e y - e k p p a o e n p . e . v s u . o i m v a s f t e e . s ) - n e r y t x k e r " r r r x r c o o s f u r f . r . = e c e u n a e d t ^ t i T t f . i e g x n . i t e x n n n n t u h o a i s s h o r n i w . n " p 6 c x r . i y h # s k f r w i " o x t a . o e y t a a a a e n a m t s e e b r a g i " a r 4 e t c n a e ' . - o a o k n t w e l . n r . e l l l l r n v p - - o a l u t l o : s e a o . n c . n u e r - s e i r . " n . r . . . . n i e o y p e e a t c . r h d $ s r c m c r c | . e n f k n , r t n y k a . n y y y y a n s o r x x r h t y e u A f n t o e e u " t d i e v n h a m e l " a m m m m l g i e u o t t d e u m d E c P u a u ( m x a r x w ! k m t i a o l l y . l l l l l . ! s - r p e e a l x t P l l a w t t r a o " a w e l u . y . y " s e e r r i n l f t i _ l l i ( e e e r r i n o w . t y u i m y e e e e m u x c r n n s e T o e o K y a t f r d n g k s u r s y m p f l m x x x x l e t o l a a w d r r r n E ! n d h o n . t s ; a k } m c l l e e e e s e n y l l a o a n Y " d o r a " ) r l " l a - n e c c c c p . r f . . c r m e y a / m H l s t u l c b d e x e s n i c y y c o a f o l - " c a T p e h n y b h u e e x a a a a C a g o m m e u i i u s o i T r T t e n : u e i d c e p p p p | h l u n l l s t n k r T h . n n P o r t n i " i . l e c p p p p e . r f s e r o e f ) S p a i n l . d d a g c y e i d l i s s l d a w n i " ) e e n g d . . p a c p p p r k m d g o o b " e a o e v g " r f g ; " . p p h h h h e l u w g l t b m f | . u i s w - . p o p p p p l d r n s e t e a i e r a k . i t n " p w o l o e " ) i l i k s x e s . t h o h p n a a a - g o m d - : n s n e t s i . h e - p h r r r q s g a f " g " = d e t e n " n c p - t t t : s i a s w = r h t s t a a R i i i " " n n a " i = ' n e t r c r a s s s U a d p t " s a l a a h t r w a a a p p ( p h / l f o n e e i t w n n n " p H S " b o a c f s i w ; " T S y a l d e i a s - c c r T L o s l i k n a d o o o t P u e o n r - n a n n u h S c r 6 w g u n k t f f t e ) e 4 i ) n e e k a i i e n " r d : n " n t y e : g g : t o / g i w : y w : : c i m / : n o g : w c c l f a ' " g r e g w l a e i i " k n e - e c a c n > e n d a h r a " c r e a r e t a r a r t e p e t a a s p a e t _ t e a k e v r e d - a e y . s - r . " h f / s t o o w e m w r w t p c w | e / u s p g t ) r o " e r p a g - e q " v b a a r s / e w 6 w 4 w : / " b ; o o t t h s e t n r a p / c a c h e e c h o " P e r m i s s i o n s e t t i n g c o m p l e t e d " まとめ 間違っている点もあるかもしれませんが、参考になりましたら幸いです。 ...

2025年7月29日 · 32 分 · Nakamura

Next.js 15対応 多言語・ダークモード対応SSGテンプレート

この記事は人間が実装を確認し、AIが記事を作成しました。 概要 このテンプレートは、Next.js 15を使用した静的サイト生成(SSG)に対応し、多言語対応とダークモードを標準装備したWebアプリケーション開発の出発点です。TypeScript、Tailwind CSS、next-intl、next-themesを組み合わせています。 https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ 主な機能 1. 静的サイト生成(SSG) output: 'export'によるフルスタティックエクスポート 高速なページロードとSEO最適化 ホスティングコストの削減 2. 国際化対応(i18n) next-intlによる完全な多言語サポート 日本語・英語対応(簡単に言語追加可能) URLベースの言語切り替え(/ja/about、/en/about) 型安全な翻訳キー 3. ダークモード next-themesによるシステム連動ダークモード ユーザーの好みを自動検出 スムーズなテーマ切り替えアニメーション LocalStorageによる設定の永続化 4. 開発者体験の向上 TypeScriptによる型安全性 Tailwind CSSによる効率的なスタイリング ESLintによるコード品質管理 統一されたコンポーネント構造 技術スタック { } " } d e " " " " " " p n r n n t @ e e e e e a t n x a x x i a d t c t t l i e " t - - w l n : " i t i w c : n h n i i " t e d n e ^ " l m c d s 1 ^ " e s c " 5 1 : s s s : . 9 " " s 4 . " : : / { . 1 ^ t 4 . 4 " " y " 0 . ^ ^ p , " 3 0 4 o , . . . g 4 4 1 r " . . a , 6 1 p " 1 h , " y , " : " ^ 0 . 5 . 1 6 " プロジェクト構造 s ├ │ │ │ │ │ │ │ ├ │ │ │ │ │ │ │ ├ │ └ r ─ ─ ─ ─ c ─ ─ ─ ─ / a ├ │ │ │ │ ├ └ c ├ │ │ │ │ │ └ i └ m ├ └ p ─ ─ ─ o ─ ─ 1 ─ e ─ ─ p ─ ─ ─ m ─ ─ 8 ─ s ─ ─ / p n s [ ├ ├ ├ └ i s o l ├ ├ ├ ├ └ p / r a e j l ─ ─ ─ ─ c i n a ─ ─ ─ ─ ─ a o g n a o ─ ─ ─ ─ o t e y ─ ─ ─ ─ ─ g u e . . c n e n o e t s j j a l p a e . m t u H F P T T i / s s l a a b x s a s t e o a o n o o e y g o a v p / a o g g g g n n ] e u m g . d t e g g . u . t p t e e L l l t t t / l s r r a e e s . s e . . y T L t x / t t o h a s s s u e n x x x t m g . e u t . a s t g x s e x . # # # t # # # # # # # s フ サ レ x ペ i 翻 ル ホ A サ ァ イ イ ー 1 訳 ー ー b ン ビ ト ア ジ 8 フ ト ム o プ コ マ ウ 固 n ァ レ ペ u ル ン ッ ト 有 設 イ イ ー t ペ プ コ コ 定 ル ア ジ ペ ー 生 ン ン ウ ー ジ 成 ポ ポ ト ジ ー ー ネ ネ ン ン ト ト 特徴的な実装 1. sitemap.ts の静的エクスポート対応 e e e } x x x p p p o o r r r t t t 実 装 c c d o o e n n f s s a t t u l d r t y e n v f a a u m l n i i c c d t a i = t o e n ' f = s o i r f t c a e e l m - s a s e p t ; ( a ) t : i c M ' e ; t a d a t a R o u t e . S i t e m a p { 2. 統一されたページレイアウト < P / a b t d < P g r i e Y a e e t s o g L a l c u e a d e r r L y c = i C a o r { p o y u u t t n o t m ( i t u b ' o e t I t n n > t i = t e t { m l t s e ( = ' ' { ) d b } e r s e c a r d i c p r t u i m o b n I ' t ) e } m s } 3. 環境変数による設定 # N N E E . X X e T T n _ _ v P P . U U e B B x L L a I I m C C p _ _ l S B e I A T S E E _ _ U P R A L T = H h = t t p : / / l o c a l h o s t : 3 0 0 0 使い方 インストール g c n i d p t m n c e i l x n o t s n j t e s a - l [ i l r 1 e 8 p n o - s t i h t e o m r e y s - - u s r s l g ] - t e m p l a t e 開発 n p m r u n d e v ビルド n p m r u n b u i l d カスタマイズポイント 言語追加 : src/i18n/routing.tsとmessages/ディレクトリ ページ追加 : src/app/[locale]/配下に新規ディレクトリ テーマカスタマイズ : tailwind.config.jsとグローバルCSS メタデータ : 各ページのgenerateMetadata関数 ベストプラクティス コンポーネント命名 : PascalCaseを使用 翻訳キー : ネストした構造で整理 型安全性 : TypeScriptの型を最大限活用 パフォーマンス : 静的生成を活用したキャッシュ戦略 まとめ 国際化対応とダークモード機能を標準装備し、SEOに最適化された静的サイトを素早く構築できるよう目指しています。開発者の生産性を向上させながら、エンドユーザーに優れた体験を提供していきたいと思います。 ...

2025年7月26日 · 5 分 · Nakamura

Next.js 15 で output: 'export' 使用時の sitemap.ts 実装方法

この記事は人間が実装を確認したのち、AIが記事を執筆しました。 背景 Next.js 15で静的サイト生成(output: 'export')を使用する際、sitemap.tsの実装でエラーが発生する場合があります。 E r r o r : e x p o r t c o n s t d y n a m i c = " f o r c e - s t a t i c " / e x p o r t c o n s t r e v a l i d a t e n o t c o n f i g u r e d o n r o u t e " / s i t e m a p . x m l " w i t h " o u t p u t : e x p o r t " . 解決方法 この問題は、sitemap.tsに以下の2つのエクスポートを追加することで解決できます: ...

2025年7月26日 · 5 分 · Nakamura

Next.js × Search UI × Fuse.js 検索アプリケーション

概要 Next.js、Elastic Search UI、Fuse.jsを組み合わせた検索アプリケーションの技術構成と実装について説明します。 作成したサイトは以下です。 https://nsf-psi.vercel.app/ja/ GitHubリポジトリは以下です。 https://github.com/nakamura196/nsf サンプルデータとして、「東京帝國大學本部構内及農學部建物鳥瞰圖(東京大学農学生命科学研究科・農学部)」を使用します。 https://da.dl.itc.u-tokyo.ac.jp/portal/assets/187cc82d-11e6-9912-9dd4-b4cca9b10970 以下はAIが作成しました。 アプリケーション概要 このアプリケーションは、東京大学の建物画像データを対象とした検索システムです。IIIF(International Image Interoperability Framework)プロトコルに対応した建物画像を検索し、地理情報(緯度・経度)やメタデータを表示します。 主な特徴 多言語対応 next-intlによる日本語・英語の多言語対応機能を実装しています。 検索機能 簡易検索 : キーワードによる直感的な検索 詳細検索 : 複数条件を組み合わせた精密な検索(AND/OR条件) ファセット検索 : subject(学部)などカテゴリー別の絞り込み機能 ソート機能 : スコア、タイトル、属性値での並び替え 曖昧検索 : Fuse.jsによる入力ミスに寛容な検索(閾値0.3) UI/UX Tailwind CSSによる洗練されたデザイン ダークモード対応 レスポンシブデザインでモバイルフレンドリー React IconsによるアイコンUI カスタム検索コネクタ Elastic Search UIとFuse.jsを組み合わせたカスタムコネクタを実装し、フロントエンドのみで全文検索機能を実現しています。 地理情報対応 各建物データには緯度・経度情報が含まれています。 技術スタック フロントエンド Next.js 15 (App Router) React 19 TypeScript Tailwind CSS 4.0 検索システム Elastic Search UI(検索インターフェース) Fuse.js(全文検索エンジン) カスタムAPIConnector(独自実装) 国際化 next-intl その他 ...

2025年7月25日 · 1 分 · Nakamura

IIIF認証API 2.0の動作確認

概要 以下のIIIF認証API 2.0の動作確認を行う機会がありましたので、備忘録です。 https://iiif.io/api/auth/2.0/ 以下のようなデモサイトを作成しました。 https://iiif-auth-nextjs.vercel.app/ja リポジトリは以下です。 https://github.com/nakamura196/iiif-auth-nextjs 以下、AIによる説明です。なお、Miradorではうまく動作させることができなかったため、今後の課題です。 概要 本記事では、IIIF Authentication API 2.0 の認証フローを、実際のHTTPリクエスト/レスポンスのレベルで詳細に解説します。各ステップでどのようなリクエストが送信され、どのようなレスポンスが返されるのかを追跡していきます。 アーキテクチャ概要 ┌ │ │ └ ─ ─ ─ ─ ─ ( ─ ─ C B ─ ─ l r ─ ─ i o ─ ─ e w ─ ─ n s ─ ─ t e ─ ─ r ─ ─ ) ─ ─ ─ ─ ─ ┐ │ │ ┘ ─ ◀ ─ ─ ─ ─ ─ ─ ▶ ─ ┌ │ │ └ ─ ─ ─ I ─ ─ I ─ ─ I ─ ─ F ─ ─ ─ ─ S ─ ─ e ─ ─ r ─ ─ v ─ ─ e ─ ─ r ─ ─ ─ ┐ │ │ ┘ ─ ◀ ─ ─ ─ ─ ─ ─ ▶ ─ ┌ │ │ └ ─ A ─ ─ u ─ ─ t ─ ─ h ─ ─ ─ ─ S ─ ─ e ─ ─ r ─ ─ v ─ ─ i ─ ─ c ─ ─ e ─ ─ ─ ┐ │ │ ┘ 認証フローの詳細 Step 1: 初回の画像情報リクエスト(未認証) リクエスト: ...

2025年7月25日 · 52 分 · Nakamura

Recogitoを用いたテキストアノテーションを試す

概要 Recogitoを用いたテキストアノテーションを試す機会がありましたので、備忘録です。 Recogitoは以下です。 https://recogito.pelagios.org/ 以下のように説明されています。 Semantic Annotation without the pointy brackets. Recogito is an annotation tool for texts and images - not just for Digital Humanities scholars. (機械翻訳)タグを使わないセマンティックアノテーション。デジタル人文学の研究者だけでなく、誰でも使えるテキストと画像のアノテーションツール サンプルデータ 国立国会図書館が公開する以下を例とします。 https://dl.ndl.go.jp/pid/2585164/1/1 使い方 Recogitoにアクセスし、画面右上の「ログイン」ボタンからログインします。 ログイン後、画面左部の「New」ボタンを押し、「From IIIF manifest」を選択します。 今回、サンプルデータとして使用する以下のマニフェストファイルを入力します。 https://dl.ndl.go.jp/api/iiif/2585164/manifest.json 以下のように、編集画面に遷移します。 その後、矩形を作成し、「Transcribe…」の箇所にテキストを入力します。 ダウンロード 画面上部のダウンロードアイコンから、各種フォーマットでエクスポートすることができます。 JSON-LDフォーマットでダウンロードした結果は以下です。Open Annotationに形式でエクスポートされました。 [ ] { } { } , " " " " } " " ] " } " " " " } " " ] " } @ i t g , g b , t @ i t g , g b , t c d y e " " " " e o { } a " " " " ] c d y e " " " " e o { } a " " " " ] o " p n i t n h n d r s t l s o " p n i t n h n d r s t l s n : e e d y a o e y " " " " " g o y a e { } n : e e d y a o e y " " " " " g o y a e { } t " r " p m m r " t v c m p e u p b l t " r " p m m r " t v c m p e u p b l e " : a : e e e a : y a r o u t r e e e " " " e " : a : e e e a : y a r o u t r e e e " " " x h t " " p t p l e d r " c " l c t c v x h t " " p t p l e d r " c " l c t c v t t " o " : : a e [ e u a i p : e : " t y o a t t " o " : : a e [ e u a i p : e : " t y o a " t A r h g d " e t f o " : o p n l " t A r h g d " e t f o " : o p n l : p n " t " " e " : " o i s { : " r e f u : p n " t " " e " : " o i s { : " r e f u s n : t S R " : : r e e I " " " o e s n : t S R " : : r e e I " " " o e " : p o e : " " d " " m 5 : : r " " : p o e : " " d " " m 5 : : r " h t { s f c " T " : " : h a " m : h t { s f c " T " : " : h a " m : t / a : t o " 2 e 御 : t g , [ " s t / a : t o " 2 e 一 : t g , [ " s t r t / w g h 0 x 座 " " t e F T " t r t / w g h 0 x 筆 " " t e F T " p e i / a i t 2 t 候 h " t p " r o x p e i / a i t 2 t 啓 h " t p " r o x : c o r r t t 5 u 処 t 2 r s , a " y : c o r r t t 5 u 上 t 2 r s , a " y / n e e o p - a 貴 t 0 a : g : w / n e e o p - a 仕 t 0 a : g : w g " c " " s 0 l 地 p 2 n / m h g " c " " s 0 l 候 p 2 n / m h w i , o , , : 7 B 御 s 5 s / e " = w i , o , , : 7 B 寒 s 5 s / e " = w t g / - o 揃 : - c d n h p w t g / - o 湿 : - c d n h p w o i / 2 d 奉 / 0 r l t t i w o i / 2 d 不 / 0 r l t t i . . t r 3 y 仕 / 7 i . S t x . . t r 3 y 順 / 7 i . S t x w p o e T " 請 r - b n e p e w p o e T " 之 r - b n e p e 3 e . c 0 , 覚 e 2 i d l : l 3 e . c 0 , 気 e 2 i d l : l . l p o 6 重 c 3 n l e / : . l p o 6 儘 c 3 n l e / : o a e g : 候 o T g . c / 4 o a e g : ニ o T g . c / 4 r g l i 2 時 g 0 " g t w 1 r g l i 2 " g 0 " g t w 3 g i a t 3 御 i 6 o o w 0 g i a t 3 , i 6 o o w 1 / o g o : 座 t : . r w 3 / o g o : t : . r w 9 n s i . 5 候 o 1 j " . , n s i . 5 o 1 j " . , s . o p 9 " . 5 p , w 8 s . o p 9 . 2 p , w 9 o s e + , p : / 3 8 o s e + p : / 3 0 a r . l 0 e 0 a . 3 a r . l 0 e 4 a . 1 n g o a 0 l 1 p o , n g o a 0 l 5 p o , n r g : a + i r 3 n r g : a + i r 3 a g i 0 g 0 / g 4 a g i 0 g 0 / g 6 . n / o 0 i 0 i / 1 . n / o 0 i 0 i / 0 j n " s " o : i T , j n " s " o : i T , s o , . , s 0 i R 2 s o , . , s 0 i R 2 o t o . 0 f / 3 o t o . 0 f / 3 n a r o " / m 8 n a r o " / m 7 l t g r , 2 e 5 l t g r , 2 e 7 d i / g 5 d " d i / g 5 d " " o " / 8 i " o " / 8 i , n s 5 a , n s 5 a / a 1 - / a 1 - 8 t 6 f c t 6 f 2 o 4 r a o 4 r b r / a a r / a e u R g a u R g 9 1 0 s 6 1 0 s a 9 0 / 7 9 0 / 9 6 0 " 1 6 0 " 3 " 0 , f " 0 , - , 0 - , 0 3 0 7 0 3 5 9 5 2 " d " b , a , - - 4 4 7 a 3 1 1 9 - - a b 9 c a 9 4 3 - - 5 4 d 2 f a 8 5 3 5 5 0 9 2 e b b 4 1 e 9 f 7 a " " , , まとめ Recogitoを用いたテキストアノテーションにあたり、参考になりましたら幸いです。 ...

2025年7月24日 · 7 分 · Nakamura

GitHub File History Analyzerの紹介:ファイル編集履歴をAIで分析するツール

本記事はAIが作成しました。 はじめに GitHubリポジトリで管理されているファイルの編集履歴を分析したいと思ったことはありませんか?特に長期間にわたって更新されているファイルの変更パターンや、プロジェクトの進化の過程を理解したい場合があります。 GitHub File History Analyzerは、このようなニーズに応えるために開発したコマンドラインツールです。 ツールの概要 このツールは以下の機能を提供します: GitHubのAPIを使用して特定ファイルのコミット履歴を取得 変更内容の統計的な分析(追加・削除行数、変更タイプの分類など) OpenRouter経由でAI(Gemini 2.5 Proなど)による編集パターンの分析 分析結果のMarkdown/JSON形式での出力 開発の背景 デジタルアーカイブプロジェクトで、XMLファイルの長期的な編集作業を追跡する必要がありました。単純なgit logでは得られない、より深い洞察(編集の傾向、作業の質、進捗状況など)を得たいという要求から、このツールの開発に至りました。 技術的な実装 使用技術 言語 : Python 3.8+ 主要ライブラリ : PyGithub(GitHub API wrapper) requests(HTTP通信) python-dotenv(環境変数管理) アーキテクチャ ツールは主に2つのコンポーネントで構成されています: GitHubFileHistoryAnalyzer : GitHub APIを使用してファイル履歴を取得・分析 OpenRouterClient : AI分析のためのクライアント # a c a p n o n r 基 a m a o 本 l m l m 的 y i y p な z t s t 使 e s i 用 r s = 例 = = = a a n G n a a i a n l t l a y H y l z u z y e b e z r F r e . i . r g l g . e e e a n H t n e i _ a r s f l a t i y t o l z e r e e _ y _ _ a A h p i n i a _ a s t p l t c r y o h o z r e m e y s p r ( ( t ( " c ( g o o c i w m o t n m m h e i m u r t i b / s t _ r ) s t e , o p k o a e " n n , a ) l " y p s a i t s h ) / t o / f i l e . x m l " ) 実際の使用例 基本的なコマンド # p # p # p y y y フ t A t 結 t ァ h I h 果 h イ o 分 o を o ル n 析 n M n 履 の a 歴 m 実 m r m の a 行 a k a 取 i i d i 得 n n o n と . . w . 表 p p n p 示 y y 形 y 式 で - - 保 - r r 存 a e e n p p a o o l y o o z w w e n n e e r r - / / a r r i e e - p p o o o u t p - - u f f t i i l l a e e n a p p l a a y t t s h h i / / s t t . o o m / / d f f i i l l e e . . p p y y - a n a l y z e 分析結果の例 ツールは以下のような情報を提供します: ...

2025年7月24日 · 4 分 · Nakamura

Transkuribusを試す

概要 Transkuribusを用いたテキストアノテーションを試す機会がありましたので、備忘録です。 Transkuribusは以下です。 https://www.transkribus.org/ 以下のように説明されています。 Transkribus enables you to automatically recognise text easily, edit seamlessly, collaborate effortlessly, and even train your custom AI for digitizing and interpreting historical documents of any form. (機械翻訳)あらゆる形式の歴史的文書をデジタル化・解釈するために、テキストの自動認識、シームレスな編集、効率的なコラボレーション、さらにカスタムAIのトレーニングまでを可能にするツール 参考 Transkuribusの日本語による説明として、以下が大変参考になりました。 https://connectivity.aa-ken.jp/ja/newsletter/588/index.html 一方、上記のページでご紹介いただいているデスクトップ版である「Transkribus eXpert」は、deprecatedになっていました。 https://help.transkribus.org/downloading-and-installing-transkribus-expert-deprecated Please note that Transkribus eXpert (desktop software) is no longer being updated, and all new features will be exclusively available on the Transkribus web app. サンプルデータ Recogitoについても、以下の使い方の記事を作成しました。 ...

2025年7月24日 · 25 分 · Nakamura

grlc (git repository linked data API constructor)を試す

概要 grlcのGitHubリポジトリは以下です。 https://github.com/CLARIAH/grlc 以下のように説明されています。 grlc, the git repository linked data API constructor, automatically builds Web APIs using shared SPARQL queries. (機械翻訳)grlc(git repository linked data API constructor)は、共有されたSPARQLクエリを使用して自動的にWeb APIを構築するツールです。 このツールを試してみましたので、備忘録です。 ジャパンサーチのSPARQL Endpointを対象に作成したAPIエンドポイントは以下です。 https://grlc.io/api-git/nakamura196/grlc-jps 背景 Odeuropaを調査する過程で、以下のページで本ツールについて言及されていることを見つけました。 https://odeuropa.eu/nosebooks/ 使い方 以下が今回のAPI用に作成したGitHubリポジトリです。 https://github.com/nakamura196/grlc-jps 例えば、以下はタイプの一覧を取得するAPI用のSPARQLクエリです。 # # # # # # P S } O + + + + + + R E ? R E L c j G D e s d t F E h p R E n u e a I C o s O R d m s g - - X T : U p m c s a s P B o a r : タ メ j ? o Y i r i イ タ p t ? u B n y p プ デ s y t r Y D t : t 一 ー : p y c E : i 覧 タ e p e ? S 利 o < e I t C h 用 n h ( n y ( t 可 : t C ; f p ? t 能 t O o e c p な J p U o s 文 a s N ? u : 化 p : T s n / 財 a / ( o t / タ n / ? u ) j イ j c r p プ S p h c s 一 e s o e e 覧 a e ) a r a . r c r a c h c s h で h . 利 . ? g 用 g c o 可 o o . 能 . u j な j n p 文 p t / 化 / ) r 財 t d タ e W f イ r H / プ m E s の / R p 一 p E a 覧 r r を o { q 取 p l 得 e / し r ま t す y # > デコレータ構文を使用することで、swagger-uiに表示・設定する値を指定できるようでした。 ...

2025年7月24日 · 2 分 · Nakamura