Cloudflare Images はImages, Image Resizing, Polishの３つのサービスから構成されるサービス群です。これから３回にわたってその内容を紹介していく予定ですが、その分量によっては回数が増えるかもしれません。３つの簡単なまとめは以下です。
Images:
Cloudflare サーバー上に画像配信環境を構築して、
画像の保存や、配信、サイズ変更、最適化を実現します。
Image Resizing:
必要に応じて画像のサイズ変更、品質の調整、
WebP または AVIF 形式への変換を実現します。
Polish:
サイト内の画像を自動的に最適化して配信します。
第一回のこの記事ではImagesを取り上げます。
Imagesの価格
Imagesはすべてのアカウントプランで利用が可能です。画像格納10万点あたり$5、画像配信10万点あたり$1となります。リサイズや最適化、下り通信（エグレス）料金は発生しません。CloudflareではCDNやその他サービスもそうですが、下り通信は課金対象とはならないのが特徴です。これにより画像配信を多用するサイトは大きなコスト削減が期待できます。
WorkersはPagesと異なりクレジットカードの登録は必要です。
さっそくやってみる
では早速触ってみましょう。
まずCloudflareのアカウントIDを特定します。アカウントIDはマネージメントコンソールのURLに含まれていますが、明示的に確認する場合左ペインの"Overview"をクリックし右ペインの"AccountID"をコピーしておきます。
その後"Get your API token"をクリックします。
"Create Token"を押します。
画面一番したの"Custom Token"を押します。
以下の画面のように設定し、"Continue to Summary"を押します。
この例では権限を"Edit"としていますが、Edit権限は自動的にReadも包含しますので注意してください。
"Create Token"を押せば完成です。
表示されるトークンは大切に保管しておいてください。
それでは早速テストを行います。
curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
-H "Authorization: Bearer <token>" \
-H "Content-Type:application/json"
の値は先ほどのものに置き換えてください。JSONが戻ってきますが"This token is valid"と出てくれば成功です。
尚Windowsで作業する場合、必ずcurl.exeを入力してください。Windows環境で実行されるcurlはcurlという名の別プログラムです。（私も常にWindowsで作業しているので恐れることはありません！）
では次に画像のPOSTも試します。適当なjpgを準備し以下を実行します。
curl -X POST \
"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v1" \
-H "Authorization: Bearer <token>" \
-F file=@./test.jpg
以下のようなJSONが戻ってきたら成功です。
この例だと
"https://imagedelivery.net/5v1HJYxUmB5cn9GF7iGU5g/9be51082-fc2a-4982-3f61-f05b0ec88c00/public"
で画像が公開されています。（みちゃだめ、絶対）
マネージメントコンソールを見ると画像が管理されています。
"9be51082-fc2a-4982-3f61-f05b0ec88c00"の部分が画像固有のIDです。
画像がデフォルトでPublicに公開されますが、特定のサイトからの呼び出しのみに対応させるSigned URLの機能も存在しています。これについては機会があればご紹介したいと思います。
One time Upload URL
サイトによってはユーザーに動画を直接アップロードさせる機能を実装したいケースがあります。しかしながらユーザーにはAPI Tokenを見せるべきではありません。
アップロードを一度受け取り、その後Workersなどで上記の手順で画像をアップロードすることもできますが、プログラムは無いに越したことはありません。Imagesでは一時的な画像アップロードURLを生成することができます。
curl --request POST \
--url https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/images/v2/direct_upload \
--header 'Authorization: Bearer <token>'
を実行すると以下のJSONが戻ります。
{
"result": {
"id": "bd418941-3bc7-4679-abf4-53539905eb00",
"uploadURL": "https://upload.imagedelivery.net/5v1HJYxUmB5cn9GF7iGU5g/bd418941-3bc7-4679-abf4-53539905eb00"
},
"success": true,
"errors": [],
"messages": []
}
id が画像の一意識別子、uploadURLが画像アップロード用URLです。
curl.exe -X POST "https://upload.imagedelivery.net/5v1HJYxUmB5cn9GF7iGU5g/bd418941-3bc7-4679-abf4-53539905eb00" -F file=@./test.jpg
を実行すると画像がAPI token不要でUpload可能です。ためしに２回連続実行してみて下さい。２回目は"ERROR 5409: Resource already exists"エラーが戻ります。
再度One time Upload URLを生成すると別のidが生成され専用アップロードURLとなります。
meta dataのセット
Imagesでは画像をIDをもとにして一意性を判別しますのでファイル名は重複が可能です。S3と挙動が違うポイントです。
またmetaデータのセットも可能です。
curl.exe -X POST "https://api.cloudflare.com/client/v4/accounts/709e3d845e10aafe52a88a8336178220/images/v1" -H "Authorization: Bearer <token>" -F file=@./test.jpg --form 'metadata={\"test\":\"test\"}'
こうすることでMeta Dataがセットされます。
Macであれば、エラーが出る人は{"test":"test"}部分のバックスラッシュを消してみて下さい
対応フォーマットやファイルサイズ
2023/04/01時点で対応フォーマットとファイルサイズは以下の通りです。
・PNG
・GIF
・JPEG
・WebP（ただしアニメーションは未サポート）
・SVG
・最大12,000ピクセル、10メガバイト
最新情報や詳細はこちらをご覧ください。
次回はImagesの画像編集機能などについてまとめます。（３回じゃ終わりませんでした！）