🎉

Headless CMSを使ってIIIFマニフェストファイルを作成する

2023/02/03に公開

iiif

tech

概要

Headless CMSの学習のため、CMSに登録した情報からIIIFマニフェストを生成する試みを行いました。

以下がその結果です。（といっても、以下のアプリからはサーバ側の処理内容は見えないです。）

https://iiif-headless-cms.vercel.app/

本記事は上記の取り組みの備忘録です。

Contentful

https://www.contentful.com/

以下のようなiiifというContent modelを作成しました。画像データ（url, width, height）の紐付けには、フィールド「JSON object」と「Reference」が使用できそうでしたが、ここでは「Reference」を選択し、画像データの情報を管理するimageというContent modelを別途作成しました。

IIIFマニフェストの形式に変換して返却するAPIについては、Nuxt3を用いて作成しました。

以下のライブラリを使用することで、簡単に接続することができました。

microCMS

https://microcms.io/

microCMSにおいても同様のスキーマ作成を行いました。

以下のような画像データを格納するカスタムフィールドを作成しました。

このカスタムフィールドを繰り返しありの形でiiifスキーマに追加することで、以下のように、画像に関する情報を格納できるようになりました。

スキーマをエクスポートしたデータは以下です。

{
    "apiFields": [
        {
            "idValue": "ZRdeXxiWOB",
            "fieldId": "label",
            "name": "ラベル",
            "kind": "text",
            "isUnique": false
        },
        {
            "fieldId": "image",
            "name": "画像",
            "kind": "repeater",
            "customFieldCreatedAtList": [
                "2023-02-03T00:42:08.118Z"
            ]
        }
    ],
    "customFields": [
        {
            "createdAt": "2023-02-03T00:42:08.118Z",
            "fieldId": "iiif_image",
            "name": "iiif画像に関するフィールド",
            "fields": [
                {
                    "idValue": "Y1B3C_tC1c",
                    "fieldId": "url",
                    "name": "URL",
                    "kind": "text"
                },
                {
                    "idValue": "kS9afBRRHr",
                    "fieldId": "width",
                    "name": "幅",
                    "kind": "number"
                },
                {
                    "idValue": "SpLhBEapVh",
                    "fieldId": "height",
                    "name": "高さ",
                    "kind": "number"
                }
            ],
            "position": [
                [
                    "Y1B3C_tC1c",
                    "kS9afBRRHr",
                    "SpLhBEapVh"
                ]
            ],
            "updatedAt": "2023-02-03T00:45:50.426Z",
            "viewerGroup": "H7Y"
        }
    ]
}

IIIFマニフェストの形式に変換する処理は以下です。

Contentfulと記述が少し異なりますが、こちらも以下のライブラリを使用することで、簡単に接続することができました。

まとめ

今回は2つのHeadless CMSを利用してみました。初歩的な利用しかできていませんが、とても使いやすく感じました。

Omekaのようなデジタルアーカイブシステムを、フロントエンドフレームワーク + Headless CMSで作成してみるのも有用かと思いました。

なお、冒頭で紹介したアプリについては、サーバサイドでプログラムを実行する必要があったため、Nuxt3のSSRで実現しています。このホストティングにあたり、Vercelを使用しましたが、ビルドの設定やCORSの有効かなど、初めてで少し戸惑った部分がありましたので、別の記事で設定方法等を紹介したいと思います。

概要

Contentful

microCMS

まとめ

Discussion