# Clipnote 画像アップロード＆配信機能 アイデアメモ ## 背景・課題 - 現状のClipnoteはMarkdown/HTMLのテキストコンテンツの保存・公開が中心で、画像を貼りたい場合は外部でホスティングしたURLを`<img>`で埋め込むか、base64埋め込みするしかない - base64埋め込みはコンテンツサイズが肥大化し、MCP経由のアップロードでも扱いにくい（実際、令和最新型記事でLPスクリーンショット2枚をbase64で埋め込もうとして失敗した） - 記事・ブログ的な使い方（LP改修の実例リンクなど）が増えるほど、画像配信のニーズは高まる見込み ## 想定する機能像 - クリップ本文とは別に「画像アセット」をアップロードできるようにし、アップロード後に配信用URLが発行される - 発行されたURLをMarkdown/HTML本文中に``や`<img src="url">`として貼る運用 - 1クリップに複数画像を紐づけられるようにする（記事内で複数枚使うケースがあるため） ## 実装方式の選択肢 ### 選択肢A: Cloudflare R2 + Workers配信 - 画像バイナリをR2バケットに保存 - 配信用WorkerでR2から画像を返す（既存のcontent配信Worker、apps/content と同じ構成に相乗り可能） - Clipnoteは既にCloudflare Workers上でweb/content/mcpの3アプリ構成・D1利用というインフラなので、追加サービスなしで完結しやすい - 画像メタデータ（どのクリップに紐づくか、アップロード日時など）はD1で管理 ### 選択肢B: Cloudflare Images - リサイズ・最適化・複数バリアント配信をCloudflareの画像専用サービスに任せる - 実装コストは低いが、Cloudflare Imagesの従量課金が発生する - 大量の画像を扱うようになった場合はこちらの方が運用が楽 ### 選択肢C: 外部サービス連携（imgur/Cloudinary等へのアップロード代行） - Clipnote側では画像を保持せず、外部サービスにアップロードしてURLだけ保存 - インフラはシンプルだが、外部サービス側の規約・永続性に依存するリスクがある → 現状のインフラ構成（Cloudflare Workers + D1 + 別オリジンcontent配信）との親和性から、選択肢A（R2 + Workers配信）が第一候補 ## アップロード経路 - Web UI: クリップ編集画面にドラッグ&ドロップ or ファイル選択でアップロード - MCP: `upload_image`のようなツールを新設し、Claudeなど外部AIから直接画像を渡してアップロードできるようにする（今回のような「AIが生成/取得した画像をそのまま記事に貼りたい」ケースに対応） ## 検討事項・懸念点 - 画像サイズの上限設定（MCP経由の場合は特にペイロードサイズの制約に注意） - 公開範囲（private/public）をクリップ本体と連動させるか、画像単体でも管理するか - 既存のMVP方針（タグ管理・自動割当は対象外）と同様に、まずは最小機能（アップロード→URL発行→本文に貼る）に絞り、リサイズや最適化は後回しにするのが現実的 - 保守・成長 管理ボードの活動候補（PWA対応、LP改修等）と並ぶ形で、優先度を検討する項目として追加する ## 次のアクション（案） - 保守・成長 管理ボードに「画像アップロード＆配信機能」の項目を追加 - 選択肢AをベースにMVP要件を詰める（R2バケット設計、Workers側のアップロード/配信エンドポイント設計、D1スキーマ追加）