--- title: "概要" url: https://docs.catalyst.zoho.com/ja/sdk/web/v4/overview/ description: "Catalyst Web SDKは、Catalystコンポーネントにアクセスし、Webクライアントアプリケーションを作成するためのツールとライブラリのセットです" last_updated: 2026-08-28T07:59:38Z service: All Services type: general related_links: - name: "Overview - Node.js SDK" url: /ja/sdk/nodejs/v2/overview/ - name: "Overview - Java SDK" url: /ja/sdk/java/v1/overview/ - name: "Overview - Python SDK" url: /ja/sdk/python/v1/overview/ --- # Web SDK ## 概要 Catalyst Web SDKには、クライアントWebアプリケーションからCatalystコンポーネントにアクセスするためのJavaScriptメソッドが含まれています。 ### 前提条件 * Catalyst CLI（[CLIのインストール](https://docs.catalyst.zoho.com/ja/getting-started/installing-catalyst-cli)を参照） * Catalystプロジェクト（[Catalystプロジェクト](https://docs.catalyst.zoho.com/ja/getting-started/catalyst-projects)を参照） * 任意のテキストエディタ（XcodeまたはSublime） ### 認証 Catalystは、Catalyst REST APIおよびSDKにアクセスするための簡単な認証メカニズムを提供しています。クライアントアプリケーションからCatalystコンポーネントを使用するには、Catalystが提供する認証メカニズムを統合することが必須です。 ### SDKの初期化 以下のコードスニペットをアプリケーションに含めることで、Catalyst認証をアプリケーションに統合できます。このスクリプトにより、Catalyst Web SDKのJavaScriptメソッドにアクセスできるようになります。 これにより、Web SDKが初期化され、`init.js`ファイルが参照されます。このファイルは、プロジェクトの一意のIDである[Project ID](https://docs.catalyst.zoho.com/ja/getting-started/set-up-a-catalyst-project/general-settings)や、プロジェクトのキーである[ZAID](https://docs.catalyst.zoho.com/ja/getting-started/set-up-a-catalyst-project/environment-settings)など、プロジェクトの基本情報を自動的に設定します。 > **Note:** リクエストパターン`/\_\_catalyst/ \*`は予約されています。この場所に独自のファイルを配置することはできません。 これらの値は、作業中の[環境](https://docs.catalyst.zoho.com/ja/deployment-and-billing/environments/introduction)に基づいて自動的に設定されます。つまり、このスクリプトがアプリの開発環境URLから呼び出された場合、適切なZAID値が設定されます。 ```xml <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"></script> <script src="/__catalyst/sdk/init.js"></script> <script> catalyst.auth.signIn("your element id here...."); </script> ``` このコードスニペットを使用して、アプリケーションのサインインフォームをiFrameとして構築できます。ただし、このコードスニペットをすべてのページに追加する必要があります。**`catalyst`**オブジェクトのスコープは単一ページに限定されているため、この初期化スクリプトはすべてのページで必要です。 コードには`catalyst.auth.signIn("Your elementID here");`という行が含まれています。`elementID`は、アプリケーションのログインページ内の任意のHTML要素または`div`要素のIDを指定できます。これをアプリケーションの`elementID`に置き換え、ユーザーログインを含むページに実装してください。 同じページ内でiFrame用のdivisionを次のように作成できます：_<div id="Your elementID here"> </div>_。これにより、同じページ内にユーザーログイン用のiFrameが展開されます。 たとえば、elementIDが「login」の場合、コードは次のようになります： * Web SDK初期化スクリプト内：_catalyst.auth.signIn("login");_ * ページのbody内：_<div id="login"></div>_ > **Note:** [Authentication](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/introduction/)のEmbedded Authenticationセクションから、Web初期化スクリプトの旧バージョン（v 1.0.0）にもアクセスできます。詳細については、[Embedded Authenticationヘルプページ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/authentication/native-catalyst-authentication/embedded-authentication/scripts-for-embedded/)を参照してください。 ### 環境変数の管理 以下のCatalystメソッドを使用して、コードから環境変数を管理できます： * **環境変数を`set`する場合**： ```json catalyst.setCatalystEnv(keyName,value) ``` * **環境変数を`get`する場合**： ```json catalyst.getCatalystEnv(key) ``` * **環境変数を`delete`する場合**： ```json catalyst.deleteCatalystEnv(key) ``` ### インスタンスオブジェクト 不要な場合にAPIアクセスを最小限に抑えることは常に効果的です。実際にAPIを呼び出すのではなく、コード内でコンポーネントを参照し、後続のアクセスに使用するためのAPI参照が必要な場合、Catalyst WebSDKはその機能を提供します。 たとえば、以下のコードは特定のファイルコンポーネントを参照する際にAPI呼び出しを実行しません。 ```javascript catalyst.file.folderId(folder_id).fileId(file_id); ``` ただし、以下のコードは選択したフォルダからファイルを削除するためにAPI呼び出しを実際に実行します。 ```javascript catalyst.file.folderId(folder_id).fileId(file_id).delete(); ``` > **Note:** 実際のAPI呼び出しの後に、指定されたオブジェクトとともにPromiseが返されます。そのため、**.then()**は実際のAPI呼び出しの後にのみ処理されます。API呼び出しを実行しないダミーオブジェクトでは、API呼び出しを使用できません。 ### レスポンスと例外 すべてのレスポンスは、データ、ステータスコード、およびステータスメッセージを含むJSONオブジェクトとして返されます。開発者はこれらのオブジェクトからレスポンスを簡単に追跡できます。 #### 例外 アプリケーション出力の不正な動作は、例外またはエラーと呼ばれます。**Catalyst Web SDK**は、**`appET, ServerET,`および` DeveloperET.`**と呼ばれる3種類のエラーをスローします。これらのエラーは、不正な動作がアプリケーションコード、サーバーエラー、またはその他の原因によるものかを定義します。 #### クライアントアプリケーションのコーディング 1. システムのターミナルを開き、空のリソースディレクトリを作成します。 2. [Catalystを初期化](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/)し、**client**オプションを選択します。 3. クライアントアプリケーションをデプロイするために、作成したプロジェクトを選択します。 4. 以下のようにボイラープレートのクライアントコードが生成されます。 ![web1](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web1.webp) 5. テキストエディタで開くと、以下のような構成になっています。 ![web2](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web2.webp) > **Note:** ボイラープレートコード（**client**フォルダおよび**catalyst.json**）が生成される場所が、**プロジェクトのホームロケーション**です。 以下の表は、リソースディレクトリ内のファイルとその目的の一覧です。
番号 ファイル/パッケージ 目的
1 client（フォルダ） クライアントアプリケーションの静的ファイル（js、css、htmlなど）を格納するフォルダです。
2 client-package.json クライアントアプリケーションの設定情報を含むJSONファイルです。
### client-package.jsonの構造 ```json { "name": "SampleApp", "version": "1.0.0", "description": "This is my sample app", "homepage": "index.html", "login_redirect":"home.html" } ``` 以下は** client-package.json**の属性です：
キー名 説明
name クライアントアプリケーションの名前です。
version クライアントアプリケーションのバージョンです。クライアントアプリケーションのバージョン管理の詳細については、Web Client Hostingヘルプページを参照してください。
description デプロイする現在のバージョンに関する簡単な説明です。
homepage アプリケーションのランディングページです（例：index.html）。
login_redirect ログインページ後にリダイレクトされるページです。アプリケーションにCatalyst Authenticationを統合する場合は必須です。詳細については、AuthenticationおよびAuthentication APIヘルプページを参照してください。
** Client **フォルダ内の適切なファイルに、WebアプリケーションのUI要素、JavaScriptファイル、およびCSSをコーディングできます。 ### クライアントアプリケーションのデプロイ Catalyst CLIを使用してクライアントアプリケーションをデプロイできます。詳細については、[リソースのデプロイヘルプページ](https://docs.catalyst.zoho.com/ja/cli/v1/deploy-resources/introduction)を参照してください。 1. システムのターミナルを開きます。 2. **プロジェクトのホームロケーション**から、以下のコマンドを使用してクライアントアプリをデプロイします： ```sh catalyst deploy --only client ``` > **Note:** [Catalyst Webコンソールを使用してクライアントをデプロイ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction)することもできます。 デプロイが完了すると、クライアントアプリケーションにアクセスするためのURLエンドポイントが取得できます。 ![web3](https://catalyst-docs-development.zohostratus.in/images/sdk/web/v4/web3.webp)