このレッスンでやること
前回の動画で動画のアップロードができるようになりました。今回はサムネイル画像のアップローダーを bunny.net のストレージ機能を使って実装していきます。あわせて、講座の作成時や編集時にサムネイル画像を後からアップロードできるようにします。
Claude Codeへの依頼
まずはClaude Codeに以下のように依頼します。
bunny.netでサムネイルのアップローダー機能を追加したい。
講座作成時や、すでに作成している講座に対して編集でサムネイルを後からアップロードできるようにしてください。コンテキストが50%を超えてくる場合は、/compactコマンドで圧縮するか、/clearコマンドでリセットすると出力品質が安定します。Opus 4の1Mコンテキストでもまだ余裕はありますが、長時間のセッションでは意識しておくと良いでしょう。
bunny.net Storageの作成手順
1. Storage Zoneの作成
- bunny.net管理画面で「Storage」をクリック
- Create your first storage zoneを選択
- Storage Zone Name: 任意の名前を入力（例:
video-platform-yourname） - Storage Tier: Standardを選択
- Main Storage Region: 一番近いリージョン（日本ならシンガポール等）を選択
- Add Storage Zoneをクリック
2. APIキーの取得
作成したStorage Zoneの「Access」タブを開き、Password（Read/Write用）をコピーします。Read-onlyキーは画像の読み取りのみなので、アップロードも行う場合はPassword（フルアクセス）が必要です。
3. Pull Zoneの作成
Pull Zoneは、ストレージにあるファイルをグローバルCDN経由で配信するための仕組みです。
- Connect Pull Zoneをクリック
- Create Pull Zoneを選択
- 名前を入力（例:
video-platform-yourname） - Storage Zone: デフォルト選択のまま
- Pricing Zone: アジアのみで十分（他は外してOK）
- Bunny Shield: コストがかかるので必要なければ外す
- Create Pull Zoneで作成完了
4. ホストネームをコピー
作成後に表示されるHostnameをコピーし、.env.localなどの環境変数に貼り付けます。
レプリケーションが必須なケース
シンガポールのみだとアップロード時に 401 Unauthorized エラーが返ることがあります。その場合は Replication を有効にする必要があるため、もうひとつリージョン（例: Sydney）を追加してください。追加後、Storage Hostnameが sg.storage.bunnycdn.com のような形式に変わるので、その新しいホスト名で環境変数を更新します。
動作確認
講座編集画面からサムネイル画像をアップロードしてみましょう。成功するとファイルマネージャーのthumbnailsディレクトリ配下にアップロードした画像が確認できます。
追加で実装したい機能
アップロードができるようになったら、表示側も整えていきます。
アップロードできたので、コース一覧のところにもサムネイルを適切に表示してください。
詳細ページにも表示するようにしてください。このように依頼すれば、コース一覧・詳細ページ両方でサムネイルが表示されるようになります。ローカルだけでなく外部ストレージに保存されているので、本番公開時に他のユーザーからも閲覧できるようになります。
講座プラットフォームに追加したい機能例
運用していく中で「こんな機能が欲しい」と感じたものは、すべてClaude Codeに依頼するだけで実装できます。例えば次のような機能が考えられます。
- レッスン動画への質問機能（Q&A）
- 管理画面で受け取った質問への回答機能（コメント管理）
- 紹介管理・掲示板・法人管理（B2B向け）
ハーネス設計をしっかり行っていれば、これらの機能は質問するだけでまとめて実装してくれます。
まとめ
これで講座プラットフォームの主要機能はひととおり完成です。次のセクションからは「アプリを公開する前の準備」について解説していきます。デプロイ前のチェック項目を一緒に整理していきましょう。