第11章見せる：配信と公開範囲

R2に入れた画像は、そのままでは誰にも見えません。倉庫は、鍵がかかっているのが初期状態です。この章で外に出します。ただし出し方が3つあって、選び方を間違えると事故になります。

この章でできるようになること

3つの公開方法の違いと、選び方が分かる
Workerを通して画像を配れるようにする
「全部見せる」と「選んで見せる」を自分で決められる

公開の方法は3つあります

横にスクロールできます

迷ったらWorker経由です。あとから他の方法に変えるのも簡単です。

2つめの r2.dev について、はっきり書いておきます。Cloudflareの公式ドキュメントは「r2.devサブドメイン経由の公開アクセスは速度制限があり、開発目的にのみ使うべきです」と明記しています。管理画面のボタン1つで有効にできるので、つい本番で使いたくなりますが、そこは我慢するところです。

Worker経由で配る、という考え方

倉庫の鍵は閉めたままにして、受付（Worker）に取りに行かせます。人は倉庫に直接入れません。受付に「この番号の荷物をください」と言い、受付が持ってきます。

この形の良いところは、受付で判断を挟めることです。「この画像は非公開だから断る」「この人には見せる」といった制御が、あとからいくらでも足せます。倉庫を開けっぱなしにすると、この判断ができません。

Claude Codeにこう頼みます

R2に保存した画像を、Worker経由で表示できるようにしてください。・/file/ のあとにキーを付けたURLで、その画像が表示されるようにする・保存したときのContent-Typeをそのまま使って返す・存在しないキーのときは、日本語のメッセージで404を返す・R2バケットは公開設定にしないでください。Worker経由だけで配ります作ったあと、動作確認用のURLを教えてください。

中心はこの部分です。

const object = await env.BUCKET.get(key);
if (!object) return new Response("見つかりません", { status: 404 });

const headers = new Headers();
object.writeHttpMetadata(headers);   // 保存時の種類の札を貼り直す
return new Response(object.body, { headers });

3行目が大事です。第10章で一緒に保存した種類の札を、返すときに貼り直しています。これがないと、ブラウザは「何だか分からないファイル」として扱い、画像を表示せずにダウンロードを始めます。

404（ヨンマルヨン）

「そんなものはありません」という返事です。エラーではなく、正しい返事の一種です。存在しないキーを頼まれたときに、黙って何も返さないのではなく、はっきり404と答えるのが行儀のよい作りです。

「全部見せる」か「選んで見せる」か

ここは、あとで揉めやすいところなので先に決めておきます。

いまの作りは、キーを知っている人は誰でも見られます。キーはでたらめな文字列なので、当てずっぽうで探し当てるのは現実的ではありません。ただ、URLを人に転送されたら、その人は見られます。

これで困らないもの（作品ギャラリー、公開したい写真）なら、このままで十分です。困るもの（限定公開の資料、個人の写真）を扱うなら、受付で判断を足します。

限定公開にしたくなったら

いまはキーを知っていれば誰でも画像を見られる状態です。これを、決められた人だけが見られる形に変えたいです。初心者でも運用できる方法を、簡単な順に2つか3つ提案してください。それぞれの長所と短所も日本語で説明してください。まだ実装はしないでください。

まず提案だけ聞いて、必要になってから実装する。この頼み方は、他の場面でも使えます。

うまくいったか確認する

/file/images/〜 のURLをブラウザで開くと、画像が表示される（ダウンロードが始まらない）
存在しないキーを指定すると、404のメッセージが出る
スマホでも同じURLで画像が見える
R2の管理画面で、バケットが公開設定になっていない（閉じたままである）

よくあるつまずき

画像が表示されず、ダウンロードが始まる: 種類の札（Content-Type）が付いていません。保存時に付け忘れたか、返すときに貼り直していないかのどちらかです。「Content-Typeが返せていないので直してください」と伝えてください。
いつも404になる: キーが1文字でも違うと見つかりません。images/abc.png と image/abc.png は別物です。一覧を出してもらって、実際のキーと見比べてください。
日本語のファイル名で保存したら開けない: URLの中で日本語は変換されるため、扱いが難しくなります。第9章のとおり、キーは英数字で作るのが安全です。
r2.devで公開したら、たまに表示されない: 公式が明記している速度制限に当たっています。本番で使う想定の窓口ではありません。Worker経由か独自ドメインに切り替えてください。

この章のまとめ

倉庫は閉じたまま、受付が取り出して渡す形にしました。種類の札を貼り直すことで、ブラウザがちゃんと画像として表示してくれます。そして、公開範囲は自分で決められる状態になっています。

次の章では、増えていくファイルを整理します。消す、並べる、情報を持たせる。地味ですが、ここができると急に実用的になります。

章末チェックリスト

Worker経由のURLで、画像がブラウザに表示された
存在しないキーで404が返ることを確認した
種類の札を貼り直す理由が分かった
r2.devは開発用で、本番では使わないと分かった