Zenn
⛳

DTS Viewerの更新：ページネーションへの対応

に公開
Next.js
TEI
DTS
tech

概要

DTS (Distributed Text Services)ビューアについて、ページネーションへの対応を行ったので、備忘録です。

https://dts-viewer.vercel.app/ja/

背景

DTSで多数のリソースなどを提供する際に、以下のように、viewプロパティを使って、ページネーションに関する情報を提示するようでした。

https://distributed-text-services.github.io/specifications/versions/unstable/#collection-endpoint

{
    "@context": "https://distributed-text-services.github.io/specifications/context/1-alpha1.json",
    "dtsVersion": "1-alpha",
    "@id" : "lettres_de_poilus",
    "@type" : "Collection",
    "collection": "/api/dts/collection/{?id,page,nav}",
    "totalParents": 1,
    "totalChildren": 10000,
    "title": "Lettres de Poilus",
    "dublinCore": {
        "publisher": ["École Nationale des Chartes", "https://viaf.org/viaf/167874585"],
        "title": [
            {"lang": "fr", "value" : "Lettres de Poilus"}
        ]
    },
    "member": [
      "..."
    ],
    "view": {
        "@id": "/api/dts/collection/?id=lettres_de_poilus&page=19",
        "@type": "Pagination",
        "first": "/api/dts/collection/?id=lettres_de_poilus&page=1",
        "previous": "/api/dts/collection/?id=lettres_de_poilus&page=18",
        "next": "/api/dts/collection/?id=lettres_de_poilus&page=20",
        "last": "/api/dts/collection/?id=lettres_de_poilus&page=500"
    }
}

そこで、DTS Viewerについて、上記のviewプロパティに対応できるように改修しました。

表示例

コレクションがviewプロパティを持つ時、以下のように、ページネーションに関するボタンを表示するようにしました。

まとめ

DTS (Distributed Text Services) APIを用いたデジタルテキストのコレクションの配信にあたり、参考になりましたら幸いです。

Discussion