Render.comを使ってCloudflare R2 内の画像を簡単にIIIF対応させよう！
概要
Cloudflare の R2 に置いてある画像を、どうにかこうにか無料で IIIF 対応画像として配信したい！
と思った話です。
個人的に一番簡単そうだったので、今回は Render.com に IIIF サーバーを設置する方法を試してみました。
Web系にはあまり詳しくないので、もっと良い方法があったらすみません🙏
はじめに
今回使うあれこれ
- Cloudflare R2 オブジェクトストレージ：画像の保存・公開用
- Render.com：IIIF Image Server をホストするためのサービス
- Cantaloupe：今回使う IIIF Image Server。Docker コンテナで動作させます。
IIIFとは？
IIIF（International Image Interoperability Framework） とは、ざっくり言うと「画像へのアクセス方法を共通化し、相互運用できるようにするためのフレームワーク」です。
主にデジタルアーカイブの分野で使われています。
詳しくは本題じゃないので割愛しますが、公式はこちら：
👉 https://iiif.io/
IIIFで画像を公開するメリットはこんな感じです：
- 複数機関・複数画像の横断的な比較・活用がしやすくなる
- タイル画像形式で配信されるので、高解像度画像も軽快に表示できる
manifestを使って画像をアルバムのようにまとめられる
他にも色々ありますがこの辺で
コード
今回使ったサンプルを GitHub に公開しています。
ご自由にどうぞ！
使い方
1. R2 の API トークンを取得
Cloudflare ダッシュボードの
「R2 オブジェクトストレージ」 > 「API」 > 「APIトークンの管理」 から
「Account APIトークン」を作成します。
- 権限は「管理者読み取り（Read-only）」で多分OK。
- 発行後に表示される「アクセスキーID」と「シークレットアクセスキー」を控えておきます。
2. アカウントIDとバケット名を控える
「R2 オブジェクトストレージ > API > R2 を使用する」から
アカウントIDとバケット名を確認しておきます。
3. cantaloupe.properties を修正
GitHub のサンプル内にある cantaloupe.properties を以下のように修正します：
S3Source.endpoint = https://<Your_Account_ID>.r2.cloudflarestorage.com
S3Source.BasicLookupStrategy.bucket.name = <Your_Bucket_Name>
4. Render.com にデプロイ
Render.com にログインし、「New Web Service」を選択します。
手順の詳細は以下のQiita記事が参考になります：
👉 https://qiita.com/tks_00/items/73cf04c225e5f6113cd8
GitHub リポジトリを接続
Language：Docker
Instance Type：Free でOK
環境変数の設定
以下のように、環境変数（Environment Variables）を設定します：
| Key | Value |
|---|---|
AWS_ACCESS_KEY_ID |
Your Access Key ID |
AWS_SECRET_ACCESS_KEY |
Your Secret Access Key |
これで Docker 側が勝手に使ってくれます（仕組みは正直よくわかってない...S3由来っぽい？）。
5. デプロイして確認
「Deploy Web Service」ボタンを押して、しばらく待ちます。
完了したら、以下のURL形式でアクセスできるはず：
https://<Your_Render_Service>.onrender.com/iiif/3/<Your_Image_Name>/full/max/0/default.jpg
例：
画像が表示されれば成功です！お疲れさまでした 🎉
最後に
今回 IIIF 対応させた画像を使った manifest.json をこちらで公開しています：
Mirador などの IIIF ビューワーで読み込むと、閲覧できます：
参考動画：
Discussion