第30章: Images & Stream によるメディア最適化配信

画像や動画をサーバー経由でアップロードさせると、サーバーのメモリや帯域を著しく圧迫します。 Cloudflare Images / Stream では、Workersから「署名付きアップロードURL（Direct Creator Upload）」を発行し、クライアントからCloudflareへ直接アップロード させるアーキテクチャが基本です。

---

本チュートリアルのゴール

• Workers から Direct Creator Upload URL を発行するAPIの実装
• Cloudflare Images による自動WebP/AVIF変換とリサイズ配信
• Cloudflare Stream による適応型ビットレート（HLS）動画配信

---

Step 1: アップロード用ワンタイムURLの発行API

import { Hono } from 'hono';

const app = new Hono<{ Bindings: { CF_ACCOUNT_ID: string; CF_IMAGES_TOKEN: string } }>();

app.post('/api/images/get-upload-url', async (c) => {
  // Cloudflare Images APIへワンタイムURLを要求
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/accounts/${c.env.CF_ACCOUNT_ID}/images/v2/direct_upload`,
    {
      method: 'POST',
      headers: { Authorization: `Bearer ${c.env.CF_IMAGES_TOKEN}` },
    }
  );

  const data: any = await response.json();
  // クライアントはこの uploadURL に対して FormData で直接POSTする
  return c.json({ uploadUrl: data.result.uploadURL, id: data.result.id });
});

export default app;

---

Step 2: エッジでの自動最適化配信

アップロードされた画像は、URLの末尾にバリアント（例: public, avatar, thumbnail）を付けるだけで、ユーザーのブラウザに合わせて最適なフォーマット（WebP/AVIF）で即座にリサイズ配信されます。

https://imagedelivery.net/<ACCOUNT_HASH>/<IMAGE_ID>/thumbnail

ストレージ容量と転送帯域を最小化し、Core Web Vitals（LCP）を極限まで高めることができます。

---

💡 用語解説コラム

[!NOTE] Direct Creator Upload
一時的な署名付きURLを発行し、重い画像や動画ファイルを自社サーバーを経由させずにクライアントからCloudflareストレージへ直接アップロードさせる技術。

[!NOTE] HLS (HTTP Live Streaming)
動画を数秒ごとの細切れファイルに分割し、ユーザーの通信速度に応じて最適な画質（ビットレート）に自動切り替えしながら再生する動画配信規格。