概要

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を用いて作成しました。

https://github.com/nakamura196/iiif-headless-cms/blob/main/server/api/iiif/contentful/[id]/manifest.ts

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

https://www.npmjs.com/package/contentful

microCMS

https://microcms.io/

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

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

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

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

{}"]"]a,cpuisF{}{}t{}i,oemlFd"""""""""]i""""]"]""sifnkifnkcecfnf,p,uv"diaisiaiulriaiopi:VemnUemnsdeemesdealednledt"salel{}{}{}i[]aw[ld""id""o2"td"d,,tteuI::qI::m0:eI:sieredudF2dd"odG""""e"""i3[A"":""""""""""""n"""Ar::ラt":画re-t:iifnkifnkifnk"YkStoベe:像el0"i[diaidiaidiai:1Sp"u""ルx""pd2:"iVemnVemnVemnB9L:pZl"tfi,eC-ifaledaledaled[3ah"Ra,"amar0"i画ld""ld""ld""CfB":db,late32i像uI::uI::uI::_BE2eesgeaT0fにedededtRa0"Xleert02_関""""""""""""CRp2Hx"""e03iす::Ut::幅n::高n1HV37i,,,d:-mるRe"uさucrh-YWA40aフ""Lx"",m"""m"""0"Ot22gィYu"tkwbSh,b,,2BL:-eー1r,"Siepee-"i00"ルBl9drLir0,s83,ド3"at"hg"3t.T"C,fhBhT"10,_B"Et0:10tR,a"08:CRp,:[Z41HV4"2crh5:""":0,,,580..141286ZZ"",,

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

https://github.com/nakamura196/iiif-headless-cms/blob/main/server/api/iiif/microcms/[id]/manifest.ts

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

https://www.npmjs.com/package/microcms-js-sdk

まとめ

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

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

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