---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/document-processor/nodejs/configure-client/
description: "Zia ServicesのOCR、バーコードスキャナー、およびIdentity Scannerを使用して、入力ドキュメントからデータを検出・抽出し処理するReact Webアプリを作成します。"
last_updated: 2026-08-17T12:16:04Z
service: All Services
type: tutorial
related_links:
  - name: "クライアントディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/client-directory
  - name: "Install Tailwind CSS"
    url: https://tailwindcss.com/docs/guides/create-react-app
---

# クライアントの設定

次に、クライアントコンポーネントを設定しましょう。初期化した[クライアントディレクトリ](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory/)（`/app`）には、以下が含まれています。

* `/src`ディレクトリ内のアプリケーションソースファイル
* `/public`ディレクトリ内のパブリックファイル
* Nodeモジュール
* `client-package.json`設定ファイル
* `[package.json](https://docs.npmjs.com/files/package.json)`および`[package-lock.json](https://docs.npmjs.com/configuring-npm/package-lock-json.html)`依存関係ファイル

設定済みのコードを含むクライアントディレクトリ全体を、先ほどダウンロードした[こちらのgitリポジトリ](https://github.com/catalystbyzoho/tutorial-catalyst-zia-services)から取得できます。

IDEを使用して、このディレクトリの`src`フォルダを展開したZIPファイル内のものに置き換え、ファイルを保存してください。

> **Note:** 各ファイルのコードを十分に理解するために、必ず一通り確認してください。

### Reactパッケージのインストール

Document Processorアプリケーション用に、以下の追加Reactモジュールをインストールします。

* **`react-hot-toast`**: このライブラリは、クライアントアプリケーションでステータス通知としてトーストメッセージを表示するために使用します。

* **`react-router-dom`**: このパッケージは、URLに基づいてクライアントアプリケーション内のコンテンツを動的に読み込むためのルーティングに使用します。

* **`axios`**: このクライアントライブラリは、クライアント側からサーバー側のAPIと通信するためにHTTPリクエストを行うために使用します。

* **`classnames`**: この属性は、React内の要素のclass属性の値を設定または返すために使用します。

これらのReactパッケージをインストールするには、ターミナルでプロジェクトのクライアントディレクトリ（`/app`）に移動し、以下のコマンドを実行します。

```sh
npm i react-hot-toast react-router-dom axios classnames
```

![react-install](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/react-install.webp)

これにより、モジュールがインストールされ、すべての依存関係が保存されます。

以下の情報は`package.json`ファイルにも更新されます。

![package-details](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/package-details.webp)

#### Tailwind CSSのインストール

すべてのHTMLファイルとJSコンポーネントをスキャンし、プロジェクト用の静的CSSファイルを生成するビルド済みCSSクラスを実装するため、[Tailwindフレームワーク](https://tailwindcss.com/)を使用しています。

ターミナルでプロジェクトのクライアントディレクトリ（`/app`）に移動し、このフレームワークをインストール・初期化するには、ターミナルで以下の2つのコマンドを実行する必要があります。

1. Tailwind CSSをインストールするには:

```sh
npm install -D tailwindcss@3
```

![tailwind](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind.webp)

2. プロジェクトで`tailwind.config.js`ファイルを初期化するには:

```sh
npx tailwindcss init
```

![tailwind-init](https://catalyst-docs-development.zohostratus.in/images/tutorials/document-processor/nodejs/tailwind-init.webp)

これにより、クライアントディレクトリに`tailwind.config.js`ファイルが作成されます。ファイルを開き、以下のコードを貼り付けて保存してください。Tailwindのインストールの詳細については、[こちらのページ](https://tailwindcss.com/docs/guides/create-react-app)をご覧ください。

```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

```

クライアントディレクトリの設定が完了しました。

Functionとクライアントコンポーネントの動作を簡単に確認しましょう。

ユーザーがクライアントアプリケーションで処理する入力画像またはデジタルドキュメントを入力します。

`index.js`ファイル内の`/:model` APIがトリガーされ、呼び出すモデルを定義します。入力ドキュメントのタイプに基づいて、対応するモデル（`pan`、`cheque`、`ocr`、`barcode`、または`passbook`）のロジックが実行されます。

以下に記載するすべてのモデル（barcodeを除く）は、[Catalyst Zia Services Node.js SDKパッケージ](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/zia-services/ocr/)の[zia.extractOpticalCharacters()](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/zia-services/ocr/)メソッドを使用して、入力ドキュメントまたは画像からデータを抽出し、JSON形式でレスポンスを返します。

* **`/pan`**: このドキュメントの場合、`modelType`は`PAN`に設定されます。ユーザーがPANカードのスキャンコピーを入力として提供すると、レスポンスにはカード所有者の名、姓、生年月日、PANカード番号が含まれます。

* **`/ocr`**: 一般的なOCR処理の場合、`modelType`は`OCR`に設定されます。入力ドキュメントから抽出されたテキストと信頼度スコアがレスポンスとして送信されます。信頼度スコアは、入力ドキュメントにおけるテキスト認識と予測の精度を示すパーセンテージ値です。

* **`/cheque`**: このドキュメントの場合、`modelType`は`CHEQUE`に設定されます。ユーザーが小切手リーフレット（CTS-2010形式のみ）を提供すると、レスポンスには小切手番号、銀行名、支店、IFSCコード、口座番号、金額、発行日などの銀行情報が含まれます。

* **`/barcode`**: ユーザーが1Dまたは2Dバーコードを入力として提供すると、エンコードされた情報がレスポンスとして返されます。この操作には、[Catalyst Zia Services Node.js SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/zia-services/ocr/)の`[zia.scanBarcode()](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/zia-services/barcode-scanner/)`メソッドを使用しています。サポートされているバーコード形式の詳細については、[こちらのページ](https://docs.catalyst.zoho.com/ja/zia-services/help/barcode-scanner/introduction/)をご参照ください。

* **`/passbook`**: ユーザーが通帳ドキュメントを入力として提供すると、レスポンスには口座番号、銀行名、支店、住所などの情報が含まれます。

6. `index.js`ファイル内の`/aadhaar` APIは、ユーザーがクライアントアプリケーションでAADHAARカードの処理を選択したときにトリガーされます。ユーザーはカードの表面と裏面の画像を別々に提供する必要があり、両方が処理されます。このモデルはドキュメントの言語を自動的に認識して処理します。このAPIは、SDKパッケージの`[zia.extractAadhaarCharacters()](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/zia-services/identity-scanner/aadhaar/)`メソッドを実装しており、AADHAARカードで認識されたカード所有者の名前、住所、性別、AADHAARカード番号などのパラメータを抽出します。

クライアントコンポーネントの詳細を確認しましょう。

* クライアントのルートディレクトリには、クライアントのデフォルト設定を含むCatalyst固有の[`client-package.json`](https://docs.catalyst.zoho.com/ja/cli/v1/project-directory-structure/client-directory)ファイルがあります。

* `src`フォルダには、Reactアプリをコンパイルする際にビルドフォルダに含まれるJavaScriptおよびCSSファイルを含む、アプリケーションのソースファイルが格納されています。`App.jsx`は、アプリケーションのフロントエンドの動作を制御します。changeイベントやshrinkイベントを処理し、先に定義したAPIを使用してデータの送受信を行います。`views`フォルダ内のファイルは、クライアントアプリケーションでレスポンスを出力としてレンダリングする役割を担っています。

* `public`フォルダは、ブラウザからパブリックURLを通じて自由にアクセスできるファイルを格納するために使用します。以下のファイルが含まれています。

    1. `index.html`: アプリケーションのデフォルトエントリポイントです。

    2. `manifest.json`: `start_url`が"."に設定されたWebアプリケーションの情報を含みます。これにより、ユーザーが入力するURLの短縮バージョンがすべて、アプリがホスティングされた際のベースURL [Catalyst_web_app_URL/app/](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/key-concepts/#default-web-application-url)から始まるようになります。

* `tailwind.config.js`: このファイルには、プロジェクトに実装されたCSSスタイルなど、アプリケーションのクライアント側のすべてのカスタマイズが含まれています。