Skip to content

ファイルストレージとコンテンツ管理

アプリケーションには、画像、ドキュメント、PDF、動画などのユーザーアップロードファイルを保存するための専用のコンテンツファイルシステムがあります。これはアプリケーションコードとは別で、ユーザーがアプリを使用する際に作成またはアップロードする動的コンテンツ用に設計されています。

コンテンツファイルシステムができること

コンテンツファイルシステムは、アプリケーションに強力なファイル管理機能を提供します:

  • ユーザーアバター、プロフィール写真、画像ギャラリーの保存
  • ドキュメントのアップロードを受け付ける - 履歴書、契約書、PDFなど
  • ファイル共有機能の構築 - アプリ内のユーザー間で
  • 画像を多用するアプリケーションの作成 - 自動最適化機能付き
  • ユーザーがファイルをダウンロードできる - 自分がアップロードしたファイルや所有するファイル
  • 管理ツールの構築 - ユーザーに代わってファイルを管理

仕組み

ファイルストレージが必要な機能をAIに説明すると、実装全体を自動的に処理します:

アップロードインターフェースの設定 — ユーザーがデバイスからファイルを選択できるフォームやドラッグ&ドロップゾーンを作成

アクセス制御の構成 — 構築内容に基づいて、誰がファイルの表示、アップロード、削除ができるかを決定

画像最適化の実装 — 画像を自動的にリサイズし、効率的に配信してアプリの読み込みを高速化

ストレージ構造の作成/content/uploads//content/avatars/ のような論理的なフォルダにファイルを整理

バックエンドの処理 — 実際のファイルの保存、取得、配信を管理し、考える必要がない

ファイルは /content/uploads/photo.jpg のようなパスに保存され、アプリ内で直接参照できます。システムは、誰がファイルをアップロードしたか、いつ作成されたかを追跡し、アクセスルールを適用します。

ファイルのアクセス制御

データベーステーブルやエッジ関数と同様に、ファイルには誰がアクセスできるかを制御するセキュリティポリシーがあります。ファイルはデフォルトでプライベートです — 権限を設定するまで誰もアクセスできません。AIは構築内容に基づいてこれらを設定します:

公開ファイル

ログインなしでも誰でも閲覧できます。ログインユーザーはアップロードでき、ファイルをアップロードした本人のみが削除できます。フォトギャラリー、公開画像共有、ユーザー生成コンテンツサイトに最適です。

プライベートファイル

ファイルをアップロードしたユーザーのみが閲覧または削除できます。機密文書、プライベート写真、医療記録、他のユーザーに見られたくないものに使用されます。

組織共有ファイル

同じ組織のユーザーは、組織内の誰がアップロードしたファイルでも閲覧できます。個人は自分がアップロードしたファイルのみ削除できます。チームのドキュメント共有、会社のリソース、共同作業スペースに最適です。

オーナーのみのアクセス

あなた(アプリ作成者)のみがこれらのファイルにアクセスでき、エンドユーザーはアクセスできません。システムファイル、テンプレート、アプリを動かす管理リソースの保存に便利ですが、ユーザー向けではありません。

高度なアクセス制御

AIはファイルメタデータに基づいて洗練されたアクセスルールを作成できます。例えば:

  • 公開された記事は公開されますが、下書きは著者のみに表示
  • 部署でタグ付けされたファイルは、その部署のユーザーのみに表示
  • プレミアムコンテンツには、ユーザーアカウントのサブスクリプションフラグが必要
  • 共有ファイルは、ファイルのメタデータにリストされている協力者に表示

画像最適化

コンテンツファイルシステムにアップロードされた画像は、高速読み込みのために自動的に最適化されます。画像を表示する際、特定の幅をリクエストすると、システムが残りを処理します:

html
<!-- サムネイル(200px幅) -->
<img src="/content/gallery/photo.jpg?w=200" />

<!-- 標準表示(800px幅) -->
<img src="/content/gallery/photo.jpg?w=800" />

<!-- ヒーロー画像(1920px幅) -->
<img src="/content/gallery/photo.jpg?w=1920" />

<!-- オリジナルのフルサイズ画像 -->
<img src="/content/gallery/photo.jpg" />

最適化の仕組み

プログレッシブ読み込み — 最適化されたサイズが初めてリクエストされると、システムは最も近い利用可能なバージョンを提供し、バックグラウンドで正確なサイズを生成します。その後のすべてのリクエストは、完璧にサイズ調整された最適化された画像を取得します。オリジナルファイルは常に保持されます。

モダンフォーマット配信 — システムは、サポートしているブラウザに自動的にモダンな画像フォーマット(AVIFまたはWebP)を提供し、古いブラウザには自動的にJPEGまたはPNGにフォールバックします。これは透過的に行われます — 幅を指定するだけで、ユーザーのブラウザが処理できる最速読み込みバージョンが提供されます。

パフォーマンス最適化 — 小さい幅を使用してパフォーマンスを向上させます。200pxのサムネイルは、元の4000px画像よりはるかに速く読み込まれ、帯域幅の使用量も少なくなります。画像の表示方法に合わせて幅を選択してください。

アプリケーションでのファイルの使用

AIは、コンテンツファイルシステムをReactアプリケーションに自動的に統合します。ファイルに関する機能を依頼すると、UIコンポーネントを作成し、アップロード/ダウンロードロジックを接続し、エラーを処理します。

AIが実装する一般的なパターン

アバターアップロード — 画像タイプを検証し、アップロード進行状況を表示し、画像をプレビューし、パスをユーザープロフィールに保存するプロフィール写真アップロードインターフェース。

ドキュメントギャラリー — アップロードされたドキュメントをリストし、画像のサムネイルを表示し、ダウンロードリンクを提供し、フィルタリングや検索を可能にするファイルブラウザ。

ドラッグ&ドロップアップロード — ユーザーがデスクトップからファイルをドラッグでき、アップロード進行状況を確認し、進行中のアップロードをキャンセルし、無効なファイルのエラーメッセージを取得できる直感的なアップロードゾーン。

ファイルピッカー — ユーザーが以前にアップロードしたファイルを表示し、再利用のために選択でき、サムネイルとファイル名を表示するモーダルまたはサイドバー。

エッジ関数の統合

エッジ関数(サーバーサイドコード)は、コンテンツファイルシステムにアクセスして、ファイルを処理したり、プログラムでファイルを生成したり、カスタムファイル処理ロジックを実装したりできます。

エッジ関数がファイルでできること

  • PDFレポートを生成し、ユーザーがダウンロードできるように保存
  • アップロードされた画像を処理(ウォーターマークの適用、サムネイルの作成、メタデータの抽出)
  • アップロードされたドキュメントを受け入れる前に機密データをスキャン
  • カスタムバックアップまたはアーカイブロジックの実装
  • ファイルの内容を分析し、構造化データを抽出
  • 特定のファイルがアップロードされたときにワークフローをトリガー

重要なセキュリティ注意事項

エッジ関数は通常のアクセス制御をバイパスします。関数がファイルにアクセスする際、ユーザーに適用される「公開」または「オーナー」ルールに制限されません。これは、ユーザーが見るべきファイルにのみアクセスできることを確認するために、関数コードで独自の認可チェックを実装する必要があることを意味します。

たとえば、ユーザーがファイルをリクエストする関数を呼び出す場合、内容を返す前に、そのファイルを所有しているか、アクセス権限があるかを確認する必要があります。AIは関数を構築する際にこれを処理しますが、関数コードは昇格された権限で実行されることを理解することが重要です。

ストレージの整理

AIは、構築内容に基づいてファイルを論理的なフォルダに整理します。フォルダ構造を手動で作成する必要はありません — 必要なものを説明するだけで、AIが適切なパスを設定します。

一般的な整理パターン

  • /content/uploads/ — 一般的なユーザーアップロード
  • /content/avatars/ — ユーザープロフィール写真
  • /content/documents/ — PDFとドキュメント
  • /content/gallery/ — フォトギャラリー画像
  • /content/private/ — プライベートユーザーファイル
  • /content/public/ — 公開アクセス可能なファイル
  • /content/temp/ — 削除可能な一時ファイル

AIは、ユースケースに適した場合、/content/uploads/2024//content/users/[username]/ のようなネストされたフォルダを作成できます。ファイルはフルパスで追跡されるため、ファイルの移動や名前変更はすべての参照を自動的に更新します。

モニタリングとデバッグ

すべてのファイル操作がログに記録されます — アップロード、ダウンロード、アクセス拒否、エラー。管理インターフェースでこれらのログを表示して、ファイルストレージがどのように使用されているかを把握できます:

  • 最も頻繁にアップロードされるファイルを確認
  • 失敗したアップロードと原因を特定
  • ダウンロードパターンと人気のあるファイルを追跡
  • 時間の経過に伴うストレージ使用量と成長を監視
  • ユーザーが期待するファイルにアクセスできない場合のアクセス制御の問題をデバッグ

システムはストレージメトリクスも追跡します — 保存されているファイルの総数、総サイズ、成長率、最大のファイル。これにより、アプリのストレージフットプリントを理解し、スケーリングを計画できます。

制限と制約

デフォルトでは、個々のファイルは最大500MBです。これは設定可能です — AIは構築内容に基づいて制限を調整できます。ほとんどのアプリケーション(画像アップロード、ドキュメント共有、PDF)では、デフォルトの制限で十分です。

ファイルは信頼性のために冗長に保存されます。ファイルを削除すると、システムから完全に削除されます — ゴミ箱やリサイクルビンはないため、削除は即座に最終的なものになります。

AIとの作業

ファイルストレージが必要な機能を説明する際は、以下を具体的に:

  • 誰がファイルにアクセスできるか — 公開、プライベート、組織共有、またはカスタムルール
  • どのタイプのファイルか — 画像のみ、PDF、任意のファイルタイプ、サイズ制限
  • ファイルの整理方法 — フォルダ、命名規則、ユーザーがサブフォルダを作成できるか
  • アップロード後の処理 — ギャラリーに表示、レコードに添付、関数で処理

AIはこの情報を使用して、ストレージを正しく構成し、アクセスポリシーを設定し、ニーズに合ったインターフェースを作成します。


関連ドキュメント:

Built by Kliv with VitePress