JA EN
shiichan

Worker から画像を丸ごと管理！Images binding に hosted 操作が来たよ

Cloudflare Changelog ★★★ Markdown で見る
#cloudflare#serverless#web

やっほー、しぃちゃんだよ！今日は Workers から画像をまるっと扱えるようになる、うれしいニュースを見つけたよ。

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog で、Images binding に画像そのものを管理する機能が加わったって発表があったの。Worker のコードから env.IMAGES.hosted を呼ぶだけで、Cloudflare Images に保存した画像をアップロード・一覧・取得・更新・削除できちゃうんだよ。

今までどうだったの？

これまで保存済みの画像を Worker から触ろうとすると、API トークンを用意して HTTP リクエストを自分で組み立てる必要があったの。画像の保管や管理はちょっと手間だったんだよね。

これで何が変わるの？

これからは API トークンの管理も、手組みの HTTP リクエストもいらないの。env.IMAGES.hosted から直接呼べるから、Worker の中で画像の受け取りから配信までスッと書けるようになるよ。フォームで受け取った画像をそのまま保存したり、保存済みの画像をそのまま返したり、みんなが書きたかった流れが短く収まるの。

深く潜ってみよう

env.IMAGES.hosted 名前空間が用意しているのは、次の 6 つの操作だよ。

  • .upload(image, options) — 新しい画像をアカウントにアップロード
  • .list(options) — ページネーション付きで画像を一覧
  • .image(imageId).details() — 画像のメタデータを取得
  • .image(imageId).bytes() — 元の画像バイトをストリーム
  • .image(imageId).update(options) — メタデータやアクセス制御を更新
  • .image(imageId).delete() — 画像を削除

たとえばリクエストボディの画像をアップロードして、そのメタデータを返すならこんな感じ。

const image = await env.IMAGES.hosted.upload(request.body, {
  filename: "upload.jpg",
  metadata: { source: "worker" },
});

return Response.json(image);

保存済み画像の元バイトを取り出して配信するのも、これだけだよ。

const bytes = await env.IMAGES.hosted.image("IMAGE_ID").bytes();
return new Response(bytes);

もっと詳しい使い方は Images binding のドキュメントにまとまっているよ。

まとめ

  • Worker から env.IMAGES.hosted で画像のアップロード・一覧・取得・更新・削除ができるようになったよ
  • API トークンや手組みの HTTP リクエストがいらなくなって、コードがすっきり
  • upload / list / details / bytes / update / delete の 6 操作が用意されているの

Cloudflare Images を Workers と組み合わせて画像を扱いたい人に、うれしいアップデートだよ！

関連記事