---
title: "はじめに"
url: https://docs.catalyst.zoho.com/ja/tutorials/photo-store-app/nodejs/introduction/
description: "Stratusのバケットに画像をアップロードし、他の登録ユーザーと画像を共有するReactギャラリーアプリを構築します。AppSailでアプリをホストし、GitHubと同期してPipelinesでアプリをデプロイします。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "プロジェクトディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/introduction/
  - name: "Upload Object to Bucket"
    url: /ja/cloud-scale/help/stratus/objects/upload-object/
  - name: "Stratus SDK"
    url: /ja/sdk/nodejs/v2/cloud-scale/stratus/overview/
  - name: "Stratus API"
    url: /ja/api/code-reference/cloud-scale/stratus/get-all-buckets/#GetAllBuckets
---

# PhotoStore App

### はじめに

このチュートリアルでは、**PhotoStore App**というReact Webアプリケーションを構築します。このアプリケーションでは、クライアントから画像のアップロードとダウンロードが可能です。また、以下の機能も備えています：

* すべてのログイン機能。
* アップロードされた画像を、サムネイル、リスト、フルサイズなどの異なるビューで表示できます。
* ダッシュボードの表示を**Grid**または**List**ビューに切り替えることができます。
* アップロードした画像を、アプリケーションにサインアップした他のユーザーと共有できます。
* 2つのダッシュボードが提供されます：
  - **Your Gallery**: 自分がアップロードした画像を表示します。
  - **Shared Gallery**: 他の登録ユーザーから共有された画像を表示します。
* 以前共有した画像に対するユーザーのアクセスを管理するオプションもあります。

アプリケーションのクライアント側は以下のようになります：
![catalyst_tutorials_photostore_app_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/catalyst_tutorials_photostore_app_first_look.webp)

このアプリケーションのロジックは、以下のCatalystサービスとそれぞれのコンポーネントを使用してコーディングされています：
1. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/):
   - [**AppSail**](https://docs.catalyst.zoho.com/ja/serverless/help/appsail/introduction/): フロントエンドとクライアントコードをバンドルし、*AppSail*にデプロイしてアプリケーション全体をホストします。

2. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/):
    - [**Authentication**](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/introduction/): アプリケーションにエンドユーザーを追加します。認証要件の処理には[Hosted Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/hosted-authentication-type/introduction/)タイプを実装します。
    - [**Data Store**](https://docs.catalyst.zoho.com/ja/cloud-scale/help/data-store/introduction/): アプリケーション内の画像に関する各種詳細情報を保存します。
    - [**ZCQL**](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction/): *Data Store*へのデータの投稿と取得に使用します。
    - [**Stratus**](https://docs.catalyst.zoho.com/ja/cloud-scale/help/stratus/introduction/): アプリケーションからアップロードされる画像を保存します。

3. [**Catalyst Pipelines**](https://docs.catalyst.zoho.com/ja/pipelines/help/pipelines/introduction/): 開発ライフサイクルを漏れなく管理しながら、[GitHub](https://github.com/)リポジトリでプロジェクト全体をシームレスに維持します。さらに重要なのは、PipelinesでこのCatalystアプリケーションをデプロイすることで、プラットフォーム依存パッケージの[Sharp](https://www.npmjs.com/package/sharp)を使用して、アップロードされた画像をサムネイルに変換できることです。Pipelinesは、Linuxマシンで動作するCatalyst上でパッケージを使用してホストするために必要なすべての依存関係を処理します。

このアプリケーションの構築には、[Catalyst Webコンソール](https://console.catalyst.zoho.com/)と[Catalystコマンドラインインターフェース](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用します。

> **Note:** このチュートリアルでは、ファンクションおよびクライアントコンポーネントに含めるファイルのコードが提供されます。提供されたコードをコピーして、指示に従って適切なファイルに貼り付けるだけです。

### アプリケーションワークフロー

アプリケーションのワークフローは以下のとおりです：

* エンドユーザーがアプリケーションにサインアップします。
* クライアントで画像の表示、ダウンロード、またはアップロードを行えます。
* 画像の表示を選択した場合、デフォルトではサムネイルビューで表示されます。画像のコンテキスト情報を提供するための詳細は*DataStore*で管理されます。
* ユーザーがクライアントから画像をアップロードすると、画像は*Stratus*にアップロードされ、その[Object URL](https://docs.catalyst.zoho.com/ja/cloud-scale/help/stratus/objects/introduction/#object-url)で参照されます。
* 新しくアップロードされた画像はサムネイルサイズで名前とともに表示され、クリックするとフルサイズで表示できます。
* さらに、アプリケーション開発サイクルに加えた変更は、*Catalyst Pipelines*の助けにより、GitHubリポジトリ内のアプリケーションに自動的に反映されます。

![catalyst_tutorials_photostore_deployment_flow](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/PhotoStoreApp-AppArchitecture-updated.webp)

#### デプロイフロー

![catalyst_tutorials_photostore_app_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/photo-store/PhotoStoreApp-DeploymentFlow.webp)