Overview
As a learning exercise for Headless CMS, I attempted to generate IIIF manifests from information registered in a CMS.
Here are the results. (That said, the server-side processing details are not visible from the app below.)
https://iiif-headless-cms.vercel.app/
This article serves as a memorandum of the above effort.
Contentful
I created a Content model called iiif as shown below. For associating image data (url, width, height), both the “JSON object” and “Reference” fields seemed usable, but I chose “Reference” here and created a separate Content model called image to manage image data information.
The API that converts and returns data in IIIF manifest format was created using Nuxt 3.
I was able to connect easily by using the following library.
https://www.npmjs.com/package/contentful
microCMS
I created a similar schema in microCMS as well.
I created a custom field to store image data as shown below.
By adding this custom field to the iiif schema in a repeatable format, I was able to store image-related information as shown below.
The exported schema data is as follows.
{
"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"
}
]
}
The processing to convert to IIIF manifest format is as follows.
https://github.com/nakamura196/iiif-headless-cms/blob/main/server/api/iiif/microcms/[id]/manifest.ts
The code is slightly different from Contentful, but I was also able to connect easily using the following library.
https://www.npmjs.com/package/microcms-js-sdk
Summary
This time I tried using two Headless CMS services. Although I only used them at a basic level, I found them very easy to use.
I thought it could also be useful to create a digital archive system like Omeka using a frontend framework + Headless CMS.
Regarding the app introduced at the beginning, since server-side program execution was required, it was implemented using Nuxt 3’s SSR. For hosting, I used Vercel, but since it was my first time, I was a bit confused about build settings and enabling CORS, so I plan to introduce the configuration methods in a separate article.