ホーム 記事一覧 ブック DH週間トピックス 検索 このサイトについて
English
Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う

Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う

概要 Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う方法を紹介します。 背景 2025年3月現在、Mirador 4の開発が進められています。alpha版を以下で確認することができます。 https://github.com/ProjectMirador/mirador/releases おそらくMirador 4からの機能かと思いますが、以下のFAQで初期設定の方法が記述されています。 https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area 具体的には、以下のように、initialViewerConfigを用いることで、初期設定ができました。 https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js export default { id: 'mirador', windows: [{ canvasId: 'https://iiif.harvardartmuseums.org/manifests/object/299843/canvas/canvas-47174892', initialViewerConfig: { thumbnailNavigationPosition: 'far-bottom', x: 934, y: 782, // you need to specify zoom for this to look good zoom: 0.0007, }, manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843', }], }; 応用 上記を応用して、以下のような初期設定を行ってみました。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>Mirador - Table of contents</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> </head> <body> <div id="mirador" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;"></div> <script type="module"> import Mirador from '../../../src'; // import config from './mirador-configs/initial-viewer-config.js'; const xywh = '9554.0,8213.0,1000,1000'; const spl = xywh.split(','); // Box to zoom to const boxToZoom = { height: Number(spl[3]), width: Number(spl[2]), x: Number(spl[0]), y: Number(spl[1]) }; const zoomCenter = { x: boxToZoom.x + boxToZoom.width / 2, y: boxToZoom.y + boxToZoom.height / 2 }; const config = { id: 'mirador', windows: [{ canvasId: "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/187cc82d-11e6-9912-9dd4-b4cca9b10970/canvas/p2", initialViewerConfig: { rotation: 180, x: zoomCenter.x, y: zoomCenter.y, zoom: 1 / Math.max(boxToZoom.width, boxToZoom.height) }, // manifestId: 'https://purl.stanford.edu/sn904cj3429/iiif/manifest', manifestId: "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/187cc82d-11e6-9912-9dd4-b4cca9b10970/manifest", }], }; Mirador.viewer(config); </script> </body> </html> これにより、わかりにくいですが、以下のように、180度回転しつつ、xywhにフォーカスした形で初期読み込みできました。 ...

mdx Iのオブジェクトストレージに対するproxyサーバの構築

mdx Iのオブジェクトストレージに対するproxyサーバの構築

概要 mdx Iのオブジェクトストレージに対するproxyサーバの構築に関する備忘録です。 背景 mdx Iの利用手引きにおいて、以下のように説明されています。 https://docs.mdx.jp/ja/index.html#オブジェクトストレージ mdxが提供するS3データサービス(DDN EXAScaler S3 Data Service)で取り扱うAPI仕様を記載したDataDirect Networks社のマニュアルです。 Tipsのオブジェクトストレージの利用方法例 と合わせてご確認ください。 https://docs.mdx.jp/ja/_downloads/b5d961f2c152387fa10ed951d5278f47/S3 Data Services 5.2.7 API Reference Guide.pdf こちらをGoogle NotebookLMに読み込ませ、corsの実装状況について確認しました。以下が回答です。 回答 資料 でBucket CORS Featureが未実装 であることが明記されているため、EXAScaler Access S3 APIに対して、ウェブブラウザ上で動作するJavaScriptなどから直接、異なるオリジン (例えば、APIのエンドポイントとは異なるドメインで提供されているウェブサイトのJavaScript)を通してリクエストを行うと、CORS(Cross-Origin Resource Sharing)の問題が発生し、通常はリクエストがブロックされます 。 これは、ウェブブラウザのSame-Origin Policy というセキュリティ上の仕組みによるものです。異なるオリジンからのリソースへのアクセスは、サーバー側が明示的に許可しない限り制限されます。CORSは、この許可の仕組みを提供するものですが、EXAScaler Access S3においては、この機能がまだ実装されていないため、サーバー側からのCORSヘッダーなどのレスポンスがなく、ブラウザはクロスオリジンリクエストを拒否する と考えられます。 したがって、プロキシサーバー などを利用して、クライアントサイドのリクエストを一旦プロキシサーバーに送り、そこからEXAScaler Access S3 APIにリクエストを行うことで、オリジンが一致するように見せかけるなどの回避策が必要になる場合があります。プロキシサーバーは、APIからのレスポンスに必要なヘッダーを付与する役割を担うこともできます。 ただし、これはCORSの問題を回避するための一つの一般的な方法であり、他にもサーバーサイドでAPIを公開する際にオリジンを一致させるなどの方法も考えられます。重要なのは、EXAScaler Access S3 API自体がCORSの仕組みをサポートしていない ため、クライアントサイドから直接クロスオリジンリクエストを行う際には、何らかの対策が必要になるということです。 対策 理解が間違っている点もあるかもしれませんが、上記の回答から、mdx Iのオブジェクトストレージに対するproxyサーバの構築を行うこととしました。 構築したproxyサーバのリポジトリは以下です。 https://github.com/nakamura196/s3-proxy 例えば、以下で指定したバケット上のファイルにアクセスできます。 https://s3-proxy.vercel.app/public/CETEIcean.css 一方、以下が直接アクセスした例です。 https://s3ds.mdx.jp/satoru196/public/CETEIcean.css 前者では、以下のようなレスポンスヘッダーが確認でき、CORSの設定がなされていることが確認できます。 access-control-allow-origin: * age: 0 cache-control: public, max-age=0, must-revalidate content-encoding: br content-type: text/css date: Sun, 23 Mar 2025 03:11:27 GMT etag: W/“3d5c-psb8jsgRM3DKYLgMVwi7Ns/AIhg” server: Vercel strict-transport-security: max-age=63072000; includeSubDomains; preload x-powered-by: Express x-vercel-cache: MISS x-vercel-id: hnd1::iad1::zbdgm-1742699486592-2b286aacd062 実装 Expressを用いて、以下のように実装しました。aws-sdkについては、AWS SDK for JavaScript v3に移行する必要があるようなので、この点はご注意ください。 ...

Next.jsでUniversal Viewerのnpmパッケージを使用する

Next.jsでUniversal Viewerのnpmパッケージを使用する

概要 Next.jsでUniversal Viewerのnpmパッケージを使用する方法の備忘録です。 インストール 以下でインストールします。 npm i universalviewer 実装 useEffectを使うため、クライアントコンポーネントとして実装する必要があるようでした。 またdivタグにuvクラスを与えることで、cssが当たるようになりました。 'use client' import { useEffect } from 'react' import dynamic from 'next/dynamic' interface ViewerProps { manifest: string cv?: number xywh?: string } // コンポーネントの実装 function ViewerComponent({ manifest, cv, xywh }: ViewerProps) { useEffect(() => { // universalviewerをインポートして初期化 const { init } = require('universalviewer') require('universalviewer/dist/esm/index.css') init('uv', { manifest, canvasIndex: cv, xywh }) }, [manifest, cv, xywh]) return ( <div id="uv" className="uv" style={{ width: '100%', height: '60vh' }}></div> ) } // SSRを無効化し、クライアントサイドでのみレンダリングするコンポーネント const Viewer = dynamic(() => Promise.resolve(ViewerComponent), { ssr: false, loading: () => ( <div style={{ width: '100%', height: '60vh', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#f0f0f0', }} > ビューワーを読み込み中... </div> ), }) export default Viewer 他にも使用可能なオプションがあるかと思いますが、cvで処理ロードするcanvasのインデックス、xywhで表示する矩形を指定することができました。 まとめ Universal Viewerの利用にあたり、参考になりましたら幸いです。

GakuNin RDMのAPIを用いて、連携したストレージのファイルを検索する

GakuNin RDMのAPIを用いて、連携したストレージのファイルを検索する

概要 以下の記事で、GakuNin RDMのAPIを用いたアプリケーション構築について紹介しました。 本記事では、GakuNin RDMのAPIを用いて、連携したストレージのファイルを検索する方法を紹介します。 実装例 次のような形で、検索APIを実装しました。なお、https://rdm.nii.ac.jp/api/v1/search/file/にクライアントから直接アクセスした際には、CORSによるエラーが発生したため、Next.jsのAPI Routesとして実装しています。 import { NextResponse } from "next/server"; import { authOptions } from "@/app/api/auth/[...nextauth]/authOptions"; import { getServerSession } from "next-auth"; export async function GET(req: Request) { const session = await getServerSession(authOptions); // URLからクエリパラメータを取得 const url = new URL(req.url); const query = url.searchParams.get("filter[fulltext]") || ""; const offset = parseInt(url.searchParams.get("page[offset]") || "0", 10); const size = parseInt(url.searchParams.get("page[limit]") || "20", 10); const accessToken = session?.accessToken; const apiUrl = "https://rdm.nii.ac.jp/api/v1/search/file/"; const params = { api_version: { vendor: "grdm", version: 2 }, sort: "created_desc", highlight: "title:30,name:30,user:30,text:124,comments.*:124", elasticsearch_dsl: { query: { filtered: { query: { query_string: { default_field: "_all", fields: [ "_all", "title^4", "description^1.2", "job^1", "school^1", "all_jobs^0.125", "all_schools^0.125", ], query, analyze_wildcard: true, lenient: true, }, }, }, }, from: offset, size, }, }; const res = await fetch(apiUrl, { method: "POST", headers: { "Content-Type": "application/json", Authorization: `Bearer ${accessToken}`, }, body: JSON.stringify(params), }); const data = await res.json(); return NextResponse.json(data); } 利用例 以下のURLからお試しいただけます。(利用にあたっては、GakuNin RDMへのログインが必要です。) ...

GakuNin RDMのストレージに、mdx.jpのオブジェクトストレージを追加する

GakuNin RDMのストレージに、mdx.jpのオブジェクトストレージを追加する

概要 GakuNin RDMのストレージに、mdx.jpのオブジェクトストレージを追加する方法です。 手順 mdx.jp mdx.jpのオブジェクトストレージの利用申請を行い、アクセスキーとシークレットキーを控えます。 GakuNin RDM S3 Compatible Storageを有効にします。 S3互換サービスとしてmdx S3DSを選択して、控えたアクセスキーとシークレットキーを入力します。 バケットの一覧が表示されるので、接続したいバケットを選択します。 結果として、「ファイル」メニューからアクセスできるストレージに、mdx.jpのオブジェクトストレージが追加されます。 今後、ドラッグ&ドロップにより、ファイルのアップロードなどを行うことができます。 まとめ GakuNin RDMとmdx.jpのオブジェクトストレージの接続にあたり、参考になりましたら幸いです。

LEAF WriterとGakuNin RDMを用いたTEI/XMLファイルの編集環境の試作

LEAF WriterとGakuNin RDMを用いたTEI/XMLファイルの編集環境の試作

概要 LEAF WriterとGakuNin RDMを用いたTEI/XMLファイルの編集環境の試作を行いましたので、備忘録です。 参考 以下の記事で、LEAF WriterをNext.jsから使用する方法を紹介しました。 特に、以下のnpmパッケージを使用しています。 https://www.npmjs.com/package/@cwrc/leafwriter 上記で編集対象とするTEI/XMLファイルの入出力にあたり、GakuNin RDMを使用してみます。GakuNin RDMのAPIをJavaScriptから使用する方法について、以下も参考になりましたら幸いです。 使い方 以下がプロトタイプシステムのURLです。(色々と不具合が含まれる点にご注意ください。) https://rdm-leaf-editor.vercel.app/ UIはClaude 3.7 Sonnetに作成してもらっています。 「サインイン」ボタンを押すと、認証画面に進むので、ログインします。 ログイン後、リダイレクトされ、プロジェクトの一覧が表示されます。 TEI/XMLファイルが含まれるディレクトリまで移動します。ファイル名に「.xml」が含まれる場合、「Leaf Writer」の列に「編集」ボタンが表示されます。 LEAF Writerの編集画面に遷移するので、テキストを編集します。作業が完了したら、画面右上の「保存」ボタンを押します。 GakuNin RDMのUIから確認してみると、バージョンごとに保存されていることが確認できます。 実装 GakuNin RDMからのファイルの取得および更新は以下で行っています。 /** * ファイルの内容を取得する */ export async function fetchFileContent( url: string, accessToken: string ): Promise<string> { const response = await fetch(url, { method: "GET", headers: { Authorization: `Bearer ${accessToken}`, }, }); if (!response.ok) { throw new Error( `ファイルの取得に失敗しました。ステータスコード: ${response.status}` ); } return await response.text(); } /** * ファイルの内容を更新する */ export async function updateFileContent( url: string, content: string, accessToken: string, contentType: string = "application/xml" ): Promise<void> { const blob = new Blob([content], { type: contentType }); const response = await fetch(url, { method: "PUT", headers: { Authorization: `Bearer ${accessToken}`, }, body: blob, }); if (!response.ok) { const errorText = await response.text(); console.error("保存に失敗しました。ステータスコード:", response.status); console.error("レスポンス:", errorText); throw new Error(`保存に失敗しました。ステータスコード: ${response.status}`); } } 上記で使用するURLは以下です。 ...

GakuNin RDM(OSF)のAPIで、フィルタを使う

GakuNin RDM(OSF)のAPIで、フィルタを使う

概要 GakuNin RDM(OSF)のAPIで、フィルタを使う方法の備忘録です。 対象データ 以下のようなファイル構造を持つ「NII Storage」を対象にします。 APIでは、以下のようなURLでアクセスできるものを対象にします。 https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/files/osfstorage/ JSONデータの例は以下です。 { "data": [ { "id": "67ce5b0b2fe4740010f753c0", "type": "files", "attributes": { "guid": "ungd3", "checkout": null, "name": "IMG_8269.png", "kind": "file", "path": "/67ce5b0b2fe4740010f753c0", "size": 952107, "provider": "osfstorage", "materialized_path": "/IMG_8269.png", "last_touched": null, "date_modified": "2025-03-10T03:22:51.750550Z", "date_created": "2025-03-10T03:22:51.750550Z", "extra": { "hashes": { "md5": "e57192b30103a7e995597ceaea39cbbf", "sha256": "5e282187067a53aaab0f1f00daaefb9519d60b064831403e671662cfbcf6f41f" }, "downloads": 0 }, "tags": [], "current_user_can_comment": true, "current_version": 1 }, "relationships": { "parent_folder": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/674034a483bdc200108b8a95/?format=json", "meta": {} } }, "data": { "id": "674034a483bdc200108b8a95", "type": "files" } }, "versions": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/67ce5b0b2fe4740010f753c0/versions/?format=json", "meta": {} } } }, "comments": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/comments/?format=json&filter%5Btarget%5D=ungd3", "meta": {} } } }, "metadata_records": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/67ce5b0b2fe4740010f753c0/metadata_records/?format=json", "meta": {} } } }, "node": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/?format=json", "meta": {} } }, "data": { "id": "wzv9g", "type": "nodes" } }, "target": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/", "meta": { "type": "node" } } }, "data": { "type": "node", "id": "wzv9g" } } }, "links": { "info": "https://api.rdm.nii.ac.jp/v2/files/67ce5b0b2fe4740010f753c0/", "move": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67ce5b0b2fe4740010f753c0", "upload": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67ce5b0b2fe4740010f753c0", "delete": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67ce5b0b2fe4740010f753c0", "download": "https://rdm.nii.ac.jp/download/ungd3/", "render": "https://mfr.rdm.nii.ac.jp/render?url=https://rdm.nii.ac.jp/download/ungd3/?direct%26mode=render", "html": "https://rdm.nii.ac.jp/wzv9g/files/osfstorage/67ce5b0b2fe4740010f753c0", "self": "https://api.rdm.nii.ac.jp/v2/files/67ce5b0b2fe4740010f753c0/" } }, { "id": "67da847416000900109e0454", "type": "files", "attributes": { "guid": "b45mp", "checkout": null, "name": "01.xml", "kind": "file", "path": "/67da847416000900109e0454", "size": 79397, "provider": "osfstorage", "materialized_path": "/01.xml", "last_touched": null, "date_modified": "2025-03-19T13:24:27.868078Z", "date_created": "2025-03-19T08:46:44.636107Z", "extra": { "hashes": { "md5": "a3824b2f49471842d1046a2abe623284", "sha256": "83d18a6e52a52597ebac6fa1eb8a137ed6e1e64b9c0e2c1a0b49cf746a777d0a" }, "downloads": 0 }, "tags": [], "current_user_can_comment": true, "current_version": 5 }, "relationships": { "parent_folder": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/674034a483bdc200108b8a95/?format=json", "meta": {} } }, "data": { "id": "674034a483bdc200108b8a95", "type": "files" } }, "versions": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/67da847416000900109e0454/versions/?format=json", "meta": {} } } }, "comments": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/comments/?format=json&filter%5Btarget%5D=b45mp", "meta": {} } } }, "metadata_records": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/67da847416000900109e0454/metadata_records/?format=json", "meta": {} } } }, "node": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/?format=json", "meta": {} } }, "data": { "id": "wzv9g", "type": "nodes" } }, "target": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/", "meta": { "type": "node" } } }, "data": { "type": "node", "id": "wzv9g" } } }, "links": { "info": "https://api.rdm.nii.ac.jp/v2/files/67da847416000900109e0454/", "move": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67da847416000900109e0454", "upload": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67da847416000900109e0454", "delete": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67da847416000900109e0454", "download": "https://rdm.nii.ac.jp/download/b45mp/", "render": "https://mfr.rdm.nii.ac.jp/render?url=https://rdm.nii.ac.jp/download/b45mp/?direct%26mode=render", "html": "https://rdm.nii.ac.jp/wzv9g/files/osfstorage/67da847416000900109e0454", "self": "https://api.rdm.nii.ac.jp/v2/files/67da847416000900109e0454/" } }, { "id": "67daca9916000900109e1d98", "type": "files", "attributes": { "guid": null, "checkout": null, "name": "test", "kind": "folder", "path": "/67daca9916000900109e1d98/", "size": null, "provider": "osfstorage", "materialized_path": "/test/", "last_touched": null, "date_modified": null, "date_created": null, "extra": { "hashes": { "md5": null, "sha256": null } }, "tags": [], "current_user_can_comment": true, "current_version": 1 }, "relationships": { "parent_folder": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/files/674034a483bdc200108b8a95/?format=json", "meta": {} } }, "data": { "id": "674034a483bdc200108b8a95", "type": "files" } }, "files": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/files/osfstorage/67daca9916000900109e1d98/?format=json", "meta": {} } } }, "node": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/?format=json", "meta": {} } }, "data": { "id": "wzv9g", "type": "nodes" } }, "target": { "links": { "related": { "href": "https://api.rdm.nii.ac.jp/v2/nodes/wzv9g/", "meta": { "type": "node" } } }, "data": { "type": "node", "id": "wzv9g" } } }, "links": { "info": "https://api.rdm.nii.ac.jp/v2/files/67daca9916000900109e1d98/", "move": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67daca9916000900109e1d98/", "upload": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67daca9916000900109e1d98/", "delete": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67daca9916000900109e1d98/", "new_folder": "https://files.rdm.nii.ac.jp/v1/resources/wzv9g/providers/osfstorage/67daca9916000900109e1d98/?kind=folder", "self": "https://api.rdm.nii.ac.jp/v2/files/67daca9916000900109e1d98/" } } ], "links": { "first": null, "last": null, "prev": null, "next": null, "meta": { "total": 3, "per_page": 10 } } } 検索例 JSON:APIに準拠しているので、filterパラメータを使用します。 ...

Nuxt Content: Cannot find name 'queryContent'.への対応

Nuxt Content: Cannot find name 'queryContent'.への対応

概要 Nuxt Contentにおいて、「Cannot find name ‘queryContent’.」というエラーが発生しましたので、対処方法に関する備忘録です。 原因 2025/1/16にNuxt Content v3がリリースされたようです。 https://content.nuxt.com/blog/v3 これにより、queryContentはqueryCollectionなどに変更されたようです。 対処方法 以下に記載があるように、content.config.tsを作成した上で、queryCollectionなどを使用するように変更する必要があるようです。 https://content.nuxt.com/blog/v3#️-content-collections 上記の対応により、エラーを解消できました。 まとめ Nuxt Content v2からv3への移行にあたり、参考になりましたら幸いです。

IIIF georeference extensionの可視化ツールの改修

IIIF georeference extensionの可視化ツールの改修

概要 IIIF georeference extensionの可視化ツールの改修を行いましたので備忘録です。 以下で公開しているツールです。 https://github.com/nakamura196/iiif_geo 以下のように、現代地図と画像の並列表示機能を提供します。 改修内容 IIIF georeference extensionに基づくデータ作成を支援するツールとして、Allmapsがあります。 https://allmaps.org/ 以下で使い方を紹介しています。 今回の改修では、上記ツールで作成されるデータを読み込めるようにしました。 https://annotations.allmaps.org/images/2e1d3f991aad6cb4 以下が表示例です。 https://nakamura196.github.io/iiif_geo/ja?u=https://annotations.allmaps.org/images/2e1d3f991aad6cb4 まとめ IIIF georeference extensionの応用にあたり、参考になりましたら幸いです。

AWSのRoute 53で設定したレコードを、さくらレンタルサーバで使用する(共有SSL)

AWSのRoute 53で設定したレコードを、さくらレンタルサーバで使用する(共有SSL)

概要 AWSのRoute 53で設定したレコードを、さくらレンタルサーバで使用する備忘録です。加えて、Let’s Encryptを用いて、無料SSLを使用します。 さくらレンタルサーバ ドメイン/SSLにアクセスして、「ドメイン新規追加」ボタンを押します。 画面下部の「他社で取得したドメインを移管せずに使う」の「追加」ボタンを押します。 独自ドメインを入力して、「追加」ボタンを押します。以下の例では、「aaa.example.org」としています。 追加後、追加したドメイン名の「設定」>「DNSレコード設定」を押し、AレコードのIPアドレスを控えます。 AWSのRoute 53 先ほど控えたIPアドレスを使って、レコードを追加します。 さくらレンタルサーバ SSLの設定を行います。 「SSL証明書の種類を選択」ボタンを押します。 「Let’s Encrypt (無料SSL)」の「利用する」ボタンを押します。 設定後、以下のような画面になります。少し待ちます。 その後、ドメイン設定において、以下のように設定します。 さらに、それぞれのドメインに対して、「WEB公開フォルダ」を設定することで、ルートディレクトリを変更することができました。 まとめ AWSのRoute 53以外でも同様の手続きを行うことができると思います。 間違っている点もあるかもしれませんが、さくらレンタルサーバでの独自ドメインおよびSSLの利用にあたり、参考になりましたら幸いです。

TEI/XMLから検索システムを構築する際のDTS(Distributed Text Services)のdts:wrapperの応用例

TEI/XMLから検索システムを構築する際のDTS(Distributed Text Services)のdts:wrapperの応用例

概要 TEI/XMLから検索システムを構築する際のDTS(Distributed Text Services)のdts:wrapperタグの応用例に関するメモです。 DTS(Distributed Text Services)は以下です。 Cayless, H., Clérice, T., Jonathan, R., Scott, I., & Almas, B. Distributed Text Services Specifications (Version 1-alpha) [Computer software]. https://github.com/distributed-text-services/specifications` 参考 DTSの構築例として、以下なども参考になりましたら幸いです。 例 以下の「デジタル延喜式」を例とします。 https://khirin-t.rekihaku.ac.jp/engishiki/ 本システムでは、TEIを用いて作成したXMLデータから、検索時の単位となる部分を抽出し、それをJSON形式のデータに変換した上で検索を行っています。JSONデータの例は以下です。JSON:APIに準拠した記述を採用しています。 http://khirin-t.rekihaku.ac.jp/engishiki/jsonapi/item/39100101.json { "jsonapi": { "version": "1.0", "meta": { "links": { "self": { "href": "http://jsonapi.org/format/1.0/" } } } }, "data": { "type": "item", "id": "39100101", "attributes": { "label": "正親 1 諸王年満条 項1", "jyo": [ "39-1-001 諸王年満" ], "shiki": [ "39-1 正親" ], "vol": [ "39" ], "updated": "2025-03-15", "category": [ "式" ], "manifest": "https://khirin-a.rekihaku.ac.jp/iiif/rekihaku/H-743-74-39/manifest.json", "member": "https://khirin-a.rekihaku.ac.jp/iiif/2/engishiki%2FH-743-74-39/page5069", "thumbnail": "https://khirin-a.rekihaku.ac.jp/iiif/2/engishiki%2FH-743-74-39%2F00002.tif/full/200,/0/default.jpg", "xml": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<TEI xmlns=\"http://www.tei-c.org/ns/1.0\">\n <dts:wrapper xmlns:dts=\"https://w3id.org/api/dts#\">\n <div type=\"original\"><p ana=\"項\" corresp=\"#page5069\" xml:id=\"o-item39100101\">\n 凡諸王年満十二、毎年十二月、\n<orgName sameAs=\"#京職\">京職</orgName>\n移\n<orgName sameAs=\"#宮内省\">宮内省</orgName>\n、\n<orgName sameAs=\"#宮内省\">省</orgName>\n以\n<orgName sameAs=\"#京職\">京職</orgName>\n移、即付\n<orgName sameAs=\"#正親司\">司</orgName>\n令勘会名簿、訖更送\n<orgName sameAs=\"#宮内省\">省</orgName>\n、明年正月待\n<orgName sameAs=\"#太政官\">官</orgName>\n符到、始預賜時服之例、</p></div><div type=\"japanese\"><note type=\"summary\">\n 衣替え手当ての受給年齢に達する皇族への支給開始手続きに関する規定\n </note><p ana=\"項\" corresp=\"engishiki_v39.xml#item39100101 engishiki_v39_en.xml#item39100101\" xml:id=\"ja-item39100101\">\n 皇族の年齢が数えで十二歳に達したら、十二月に\n<ruby>\n<rb>\n 京職\n </rb>\n<rt place=\"right\">\n きょうしき\n </rt>\n</ruby>\n が\n<ruby>\n<rb>\n 宮内省\n </rb>\n<rt place=\"right\">\n くないしょう\n </rt>\n</ruby>\n に通知し、宮内省は京職の通知書類を\n<ruby>\n<rb>\n 正親司\n </rb>\n<rt place=\"right\">\n せいしんし\n </rt>\n</ruby>\n に下して正親司が保管する皇族の台帳と照合させよ。正親司はこの作業が終わったら通知書類を宮内省に送れ。翌年正月に\n<ruby>\n<rb>\n 太政官\n </rb>\n<rt>\n だいじょうかん\n </rt>\n</ruby>\n の通達を受領してから、衣替え手当ての支給を開始せよ。\n</p></div><div type=\"english\"><note type=\"summary\">\n Age of Royal Recipients for Seasonal Clothing\n </note><p ana=\"項\" corresp=\"engishiki_v39.xml#item39100101 engishiki_v39_ja.xml#item39100101\" xml:id=\"en-item39100101\">\n Every year if\n<seg xml:id=\"footnote3910010101\">\n a\n prince or princess\n </seg>\n reaches\n<seg xml:id=\"footnote3910010102\">\n twelve years old\n </seg>\n , the Capital Office should report that\n information via\n<seg xml:id=\"footnote3910010103\">\n a parallel memorandum\n (\n<seg rend=\"italic\">\n i\n </seg>\n )\n</seg>\n to the Ministry of the Royal\n Household in the twelfth month. Then the Ministry should send the\n memorandum to the Royal Family Register Office to check the list against\n their existing roster. After finishing all of these procedures, the\n Royal Family Register Office should return the memorandum to the\n Ministry. The prince or princess in question will receive seasonal\n clothing after the Council of State's order is issued in the following\n New Year.\n</p></div>\n </dts:wrapper>\n</TEI>" } } } 検索結果は以下のように表示されます。校訂文(@type=“original”)、現代語訳(@type=“japanese”)、および英訳(@type=“english”)を表示しています。 ...

Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリ

Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリ

概要 TEI/XMLファイルを読み込み、Miradorで画像を表示し、CETEIceanでテキストを表示するサンプルアプリを作成しました。以下のURLからお試しいただけます。 デモサイト https://nakamura196.github.io/ceteicean-mirador/ 背景 これまでにも、同様の機能を提供するアプリケーションを開発してきました。 Next.js を使用した実装例 XSLT を使用した実装例 今回は、HTMLとプレーンなJavaScriptのみを使用して実装する方法をご紹介します。 対象データ 以下の校異源氏物語テキストDBを対象とします。 https://kouigenjimonogatari.github.io/ 実装方法 ソースコードは以下のリポジトリで公開しています。 https://github.com/nakamura196/ceteicean-mirador 実装のポイント 1. CETEIcean の behaviors を利用した pb タグの処理 以下のコードでは、CETEIcean の behaviors を利用して pb タグのクリック時の挙動を定義しています。 ct.addBehaviors({ tei: { // 不要な要素を非表示 graphic: () => document.createDocumentFragment(), figure: () => document.createDocumentFragment(), // pbタグの処理 pb: function (el) { let pb = document.createElement("tei-pb"); // 属性を引き継ぐ if (el.hasAttribute("n")) { pb.setAttribute("n", el.getAttribute("n")); } // corresp属性からzoneIdを取得 const corresp = el.getAttribute("corresp"); if (corresp) { const zoneId = corresp.replace('#', ''); pb.setAttribute("data-zone-id", zoneId); } // ページ番号を表示 const pageNum = el.getAttribute("n") || ""; pb.textContent = `[Page ${pageNum}]`; // クリックイベントを追加 pb.addEventListener("click", function() { const zoneId = this.getAttribute("data-zone-id"); if (zoneId) { const zoneElement = document.querySelector(`tei-zone[id="${zoneId}"]`); if (zoneElement) { const surfaceElement = zoneElement.closest("tei-surface"); if (surfaceElement && surfaceElement.hasAttribute("sameAs")) { goToPage(surfaceElement.getAttribute("sameAs")); } } } }); return pb; } }, }); 2. Mirador でのページ遷移処理 pb タグをクリックした際に、TEI/XML ファイルから Canvas の URI を取得し、Mirador のページ遷移を実行します。 ...

Omeka Sで非公開サイトを共有する

Omeka Sで非公開サイトを共有する

概要 Omeka Sで非公開サイトを共有する機会があったので、備忘録です。 関連モジュール まず以下のモジュールを確認しました。 https://omeka.org/s/modules/Guest/ 上記では、Guest Privateモジュールも紹介されており、使い分けの方法をChatGPTに問い合わせました。 Omeka S の Guest モジュール と Guest Private モジュール の使い分けについて説明します。 1. Guest モジュール guest ロール を追加し、ゲストユーザーとして登録できるようにする。 管理画面へのアクセス権限はなし 。 API経由でログイン・ログアウト・登録・パスワード更新などが可能。 公開サイトのみ閲覧可能 (非公開サイトや非公開ページは見られない)。 用途 : 公開サイトに一般ユーザーを登録させ、ログイン機能を提供する。 2. Guest Private モジュール このモジュールを追加すると、さらに2つのロールが追加される: (1) guest_private_site 公開サイト + 非公開サイトを閲覧可能 (ただし、非公開ページや非公開リソースは見られない)。 用途 : サイト全体を非公開にしつつ、特定のユーザーにサイトの閲覧権限を与えたい場合。 (2) guest_private 公開サイト + 非公開サイト + 非公開ページ + 非公開リソースを閲覧可能 。 用途 : 非公開リソースを含む、特定のコンテンツを許可されたゲストユーザーだけに見せたい場合。 質問: 非公開サイトに指定したユーザーだけ閲覧できるようにしたい 解決策 Guest Private モジュールをインストールする → 通常の Guest モジュールでは非公開サイトの閲覧ができないため、Guest Private が必要。 ...

AtoM(Access to Memory)のAPIを使って、オブジェクトを登録してみる

AtoM(Access to Memory)のAPIを使って、オブジェクトを登録してみる

概要 AtoM(Access to Memory)のAPIを使って、オブジェクトを登録する方法の備忘録です。 APIの有効化 以下にアクセスします。 /sfPluginAdminPlugin/plugins arRestApiPluginを有効にします。 APIキーの取得 以下に、APIキーを生成する方法が説明されています。 https://www.accesstomemory.org/en/docs/2.9/dev-manual/api/api-intro/#generating-an-api-key-for-a-user ユーザ名とパスワードでもAPI接続できるようですが、今回はREST API Keyを発行しました。 エンドポイント AtoMでは、「典拠レコード」や「機能」など、複数のメニューが提供されていますが、APIによって利用できるのは、以下のみのようです。 See the subsequent pages for more details on each endpoint, and available parameters. There are three endpoints available: Browse taxonomy terms Browse information objects Read information object Download digital objects Add physical objects この点は、ArchivesSpaceのほうが豊富なAPIが提供されており、軍配が上がるかもしれません。 https://archivesspace.github.io/archivesspace/api/ また、以下のソースコードを確認すると、CreateActionが可能なものは、informationobjectsとphysicalobjects、digitalobjectsに限定されているようでした。 https://github.com/artefactual/atom/tree/qa/2.x/plugins/arRestApiPlugin/modules/api/actions ただ機械的に一括登録を行いたい場面は、主にinformationobjectsだと考えられるため、これらの機能のみで十分かもしれません。 physical objectsの登録 以下のようなクラスを用意します。 #| export class ApiClient: def __init__(self): load_dotenv(override=True) self.url = os.getenv("atom_url") username = os.getenv("username") password = os.getenv("password") api_key = os.getenv("api_key") if api_key: self.headers = { "REST-API-Key": api_key, "Content-Type": "application/json" } else: # Basic 認証のヘッダーを作成 auth_string = f"{username}:{password}" auth_bytes = auth_string.encode('ascii') auth_b64 = base64.b64encode(auth_bytes).decode('ascii') self.headers = { "Authorization": f"Basic {auth_b64}", "Content-Type": "application/json" } def add_physical_objects(self, physical_objects): url = f"{self.url}/api/physicalobjects" print(url, self.headers, physical_objects) response = requests.post(url, headers=self.headers, json=physical_objects) # レスポンスを確認 if response.status_code in [200, 201]: print("物理オブジェクトが作成されました!") print(f"ステータスコード: {response.status_code}") print(f"レスポンス: {response.text}") # 作成されたオブジェクトの情報 result = response.json() print(f"作成された物理オブジェクトID: {result.get('id')}") print(json.dumps(result, indent=4)) else: print(f"エラー: {response.status_code}") print(f"レスポンス: {response.text}") 以下で実行します。 ...

AtoM(Access to Memory)をDockerで起動する

AtoM(Access to Memory)をDockerで起動する

概要 AtoM(Access to Memory)をDockerで起動する機会があったので、備忘録です。 マニュアル 以下に記載があります。 https://www.accesstomemory.org/es/docs/2.9/dev-manual/env/compose/ git clone -b qa/2.x https://github.com/artefactual/atom.git atom cd atom export COMPOSE_FILE="$PWD/docker/docker compose.dev.yml" docker compose up -d そして、以下を実行します。 docker compose exec atom php symfony tools:purge --demo これにより、63001ポートでAtoMが起動しました。 その他、マニュアルにはCompile Theme Filesの記述などがありますが、これを実行しなくても起動する場合と起動しない場合がありました。 日本語化 以下にアクセスして、日本語を追加します。 /settings/language そして、以下を実行します。 docker compose exec atom php symfony search:populate 結果、以下のように日本語が追加されました。 まとめ AtoMの利用にあたり、参考になりましたら幸いです。

ピラミッドTIFFの作成において、ImageMagickがうまく動作しないケースがある?

ピラミッドTIFFの作成において、ImageMagickがうまく動作しないケースがある?

概要 IIIFの画像配信に向けたピラミッドTIFFの作成において、ImageMagickがうまく動作しないケースがあり、調査してみました。 参考 以下のようなページで、変換方法が説明されています。 https://samvera.github.io/serverless-iiif/docs/source-images#creating-tiled-tiffs Using the VIPS command line # For a 3-channel source image vips tiffsave source_image.tif output_image.tif --tile --pyramid --compression jpeg --tile-width 256 --tile-height 256 # For a source image with an alpha channel vips extract_band source_image.tif temp_image.v 0 --n 3 \ && vips tiffsave temp_image.v output_image.tif --tile --pyramid --compression jpeg --tile-width 256 --tile-height 256 \ && rm temp_image.v Using ImageMagick convert source_image.tif -alpha off \ -define tiff:tile-geometry=256x256 \ -define tiff:generate-pyramids=true \ -compress jpeg \ 'ptif:output_image.tif' 対象データ 以下の画像を使用させていただきます。 ...

ArchivesSpaceをDockerで起動する

ArchivesSpaceをDockerで起動する

概要 ArchivesSpaceをDockerで起動する機会がありましたので、備忘録です。 方法 以下に記載されています。 https://docs.archivesspace.org/administration/docker/ 以下のようにcloneした上で、コンテナを起動します。 git clone https://github.com/archivesspace/archivesspace cd archivesspace docker compose up --detach ドキュメントでは、以下のように記載されていますが、Public User interfaceは3001ポート、Staff User Interfaceは3000ポート、およびバックエンドシステムには4567ポートでアクセスできました。 Using the default proxy configuration, the Public User interface becomes available at http://localhost/ and the Staff User Interface at: http://localhost/staff/ (default login with: admin / admin) 翻訳ファイルの更新 Public User interfaceはpublic/config/locales/ja.yml、Staff User Interfaceはfrontend/config/locales/ja.ymlの翻訳ファイルを更新することで、翻訳データを適用することができました。 以下、翻訳ファイルの更新前後の画面比較です。 まとめ ArchivesSpaceの利用にあたり、参考になりましたら幸いです。

Omeka Sのファイルをmdx.jpのオブジェクトストレージに保存する

Omeka Sのファイルをmdx.jpのオブジェクトストレージに保存する

概要 Omeka Sのファイルをmdx.jpのオブジェクトストレージに保存する方法に関する備忘録です。 ベースとするモジュール Amazon S3との連携を可能にする以下のモジュールをベースとします。 https://omeka.org/s/modules/AmazonS3/ 本モジュールでは、Omeka Sで取り扱う画像や動画といったメディアのファイルをAmazon S3に保存するための拡張機能を提供します。 一方、endpointの指定ができないため、mdx.jpのオブジェクトストレージなどを対象にすることはできませんでした。 モジュールのカスタマイズ 上述した背景を踏まえて、Amazon S3以外のオブジェクトストレージを利用できるように、モジュールをカスタマイズしました。カスタマイズした結果は、以下のリポジトリで公開しています。 https://github.com/nakamura196/Omeka-S-module-AmazonS3 なお、カスタマイズについては、エディタとしてCursorを使用し、s3互換のオブジェクトストレージにも対応したいという依頼をclaude-3.7-sonnetに提出し、その結果を反映しています。 結果、上記のモジュールを使用することにより、Omeka Sで登録したメディアが以下のようなURLでアクセス可能になりました。 https://s3ds.mdx.jp/<バケット名>/large/3e0a78e1cbc239f37cfff0e777c40c2f9b2f5c92.jpg 以下は、filesディレクトリを、mdx.jpに接続したCyberduckで表示した例です。 モジュールの設定内容は以下のとおりです。カスタムエンドポイントURLという項目が追加されており、https://s3ds.mdx.jpを指定することで、mdx.jpのオブジェクトストレージを利用できるようになりました。 なお、上記の画面キャプチャで表示されているとおり、mdx.jpのオブジェクトストレージにファイルが保存される設定をしても、現時点ではWrong region. Please use region of a bucket:と表示されてしまいます。この点は、今後修正予定です。 モジュールのインストール 今回フォークして作成したカスタムモジュールをインストールするには、以下の手順を踏む必要があります。 cd <モジュールが格納されているディレクトリ> git clone https://github.com/nakamura196/Omeka-S-module-AmazonS3 AmazonS3 cd AmazonS3 composer install --no-dev Omeka Sにおいて、ソースからモジュールを使用するには、おおよそ共通して上記のような手続きが必要になります。 参考 Omeka Sのモジュールにおいて、同様の機能を提供するものとして、Any Cloudがあります。 https://github.com/HBLL-Collection-Development/omeka-s-any-cloud こちらもAmazon S3との接続機能を提供しており、またカスタイズを行う必要がなく、AWS Endpointを入力する項目が提供されていました。 ただ、これらの項目に先述したmdx.jpのオブジェクトストレージの情報を入力したところ、アイテムなどを登録する画面で以下のエラーが表示されました。 原因や対処方法については引き続き調査したいと思いますが、このエラーが遭遇したため、Any Cloudではなく、Amazon S3モジュールをカスタマイズする選択を行いました。 まとめ 2025年度からmdx.jpのオブジェクトストレージは無料で使用可能になるということで、デジタルアーカイブにおける公開画像の格納先や、また長期保存のためのストレージとしても有効な選択肢になるかと思います。 https://mdx.jp/mdx1/news/4839 デジタルアーカイブの構築や活用にあたり、参考になりましたら幸いです。

mdx.jpのオブジェクトストレージとIIP Image(IIIF Image Server)を使ってIIIF画像を配信する

mdx.jpのオブジェクトストレージとIIP Image(IIIF Image Server)を使ってIIIF画像を配信する

概要 mdx.jpのオブジェクトストレージとIIP Image(IIIF Image Server)を使ってIIIF画像を配信する試行の備忘録です。 以下の記事の続きです。 Docker版IIP Image 以下で、IIPImage serverのDocker Imageが公開されていましたので、こちらを使います。 https://hub.docker.com/r/iipsrv/iipsrv 以下の記事などを参考に、Dockerをインストールします。 https://qiita.com/Marron-chan/items/570c7c7baaae3b4d6b11 実行 前回の記事に倣い、以下のようにmdx.jpのオブジェクトストレージをマウントします。 s3fs satoru196 ~/s3mount -o passwd_file=~/.passwd-s3fs -o url=https://s3ds.mdx.jp -o use_path_request_style -o allow_other 注意点として、前回の記事から、-o allow_otherを追加しています。これを追加しないと、次のコンテナ起動時に以下のエラーが発生しました。 docker: Error response from daemon: error while creating mount source path '~/s3mount/iip/images': mkdir ~/s3mount: file exists Run 'docker run --help' for more information -o allow_otherオプションを追加した上で、以下を実行します。無事に起動しました。 docker run -it -p 9000:9000 -p 8080:80 -v ~/s3mount/iip/images/:/images --rm iipsrv/iipsrv <-----------------------------------> Thu Mar 6 22:35:43 2025 IIPImage Server. Version 1.2 *** Ruven Pillay <ruven@users.sourceforge.net> *** Verbosity level set to 5 Running in standalone mode on socket: 0.0.0.0:9000 with backlog: 2048 Setting maximum image cache size to 10MB Setting filesystem prefix to '/images/' Setting filesystem suffix to '' Setting default JPEG quality to 75 Setting default PNG compression level to 1 Setting default WebP compression level to 50 Setting maximum CVT size to 5000 Setting HTTP Cache-Control header to 'max-age=86400' Setting 3D file sequence name pattern to '_pyr_' Setting default IIIF Image API version to 3 Setting Allow Upscaling to true Setting ICC profile embedding to true Setting up JPEG2000 support via OpenJPEG Setting image processing engine to CPU processor OpenMP enabled for parallelized image processing with 2 threads Setting URI mapping to iiif=>IIIF. Supported protocol: IIIF Memcached support enabled. Connected to servers: 'localhost' with timeout 86400 Initialisation Complete. <-----------------------------------> そして、今回の設定では、オブジェクトストレージの/satoru196/iip/imagesにtiled multi-resolution pyramid TIFFファイルを格納し、以下のようなURLでアクセスできることを確認します。 ...

s3fs を使用してmdx.jpのオブジェクトストレージをファイルシステムのようにマウントする方法

s3fs を使用してmdx.jpのオブジェクトストレージをファイルシステムのようにマウントする方法

概要 s3fs を使用してmdx.jpのオブジェクトストレージをファイルシステムのようにマウントする機会がありましたので、備忘録です。 1. 事前準備 Ubuntu を対象とします。 ✅ s3fs のインストール sudo apt update sudo apt install s3fs ✅ 認証情報の設定 mdx.jpのオブジェクトストレージの アクセスキー と シークレットキー を ~/.passwd-s3fs に保存。 echo “ACCESS_KEY:SECRET_KEY” > ~/.passwd-s3fs chmod 600 ~/.passwd-s3fs # セキュリティのため権限変更 2. S3 ストレージをローカルにマウント ✅ マウントポイントを作成 mkdir ~/s3mount ✅ s3fs でマウント s3fs your-bucket /s3mount -o passwd_file=/.passwd-s3fs -o url=https://s3ds.mdx.jp -o use_path_request_style オプションの説明 • -o passwd_file=~/.passwd-s3fs → 認証情報を指定 • -o url=https://s3ds.mdx.jp → オブジェクトストレージのエンドポイント • -o use_path_request_style → MinIO や Ceph のような “パススタイル” の S3 互換ストレージで必要 ...