--- title: "はじめに" url: https://docs.catalyst.zoho.com/ja/tutorials/payslip-generator-app/nodejs/introduction/ description: "Catalystコンポーネントを使用して、動的なカスタム給与明細テンプレートからPDFドキュメントを生成し、生成したドキュメントをエンドユーザーにメールで送信する基本的なWebアプリを構築します。" last_updated: 2026-11-03T07:48:52Z service: All Services type: tutorial related_links: - name: "プロジェクトディレクトリ構造" url: /ja/cli/v1/project-directory-structure/introduction/ - name: "Node.js SDK" url: /ja/sdk/nodejs/v2/overview/ --- # Payslip Generator App ### はじめに このチュートリアルでは、Catalystを使用して従業員の給与明細を生成するアプリケーションを構築します。このアプリケーションでは、会社の給与明細テンプレートのスタイルを設定し、フォームに従業員の詳細情報を入力し、メールで各従業員に給与明細を送信できます。 クライアントアプリケーションは以下のようになります： ![smartbrowz_tutorial_payslip_first_look](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look.webp) 従業員に送信されるメールは以下のようになります： ![smartbrowz_tutorial_payslip_first_look_email](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look_email.webp) 生成されてPDFとしてメールで送信される給与明細は以下のようになります： ![smartbrowz_tutorial_payslip_first_look_template](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/smartbrowz_tutorial_payslip_first_look_template.webp) 動作するアプリケーションにアクセスして機能をテストできます：[アプリを試す！](https://payslip.catalystserverlessapp.com/) Payslip Generatorアプリケーションは、以下のCatalystサービスとそのコンポーネントを使用します： 1. [**Catalyst SmartBrowz**](https://docs.catalyst.zoho.com/ja/smartbrowz/getting-started/introduction/) - **Templates**: [Templates](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/create-templates/)は、給与明細のカスタムテンプレートを作成するために使用します。 - **PDF & Screenshot**: [PDF & Screenshot](https://docs.catalyst.zoho.com/ja/smartbrowz/help/pdfnscreenshot/introduction/)は、テンプレートのテストおよびバックエンドでのテンプレートのPDF生成に使用します。 2. [**Catalyst Serverless**](https://docs.catalyst.zoho.com/ja/serverless/getting-started/introduction/) - **Advanced I/O Function**: [Advanced I/O function](https://docs.catalyst.zoho.com/ja/serverless/help/functions/advanced-io/)はNode.jsを使用してコーディングできます。カスタマイズしたテンプレートに詳細情報を入力し、Mailコンポーネントをトリガーして従業員にメールを送信するためのAPIが含まれています。 3. [**Catalyst CloudScale**](https://docs.catalyst.zoho.com/ja/cloud-scale/getting-started/introduction/) - **Web Client Hosting**: アプリケーションのフロント/クライアント側は、[Web Client Hosting](https://docs.catalyst.zoho.com/ja/cloud-scale/help/web-client-hosting/introduction/)を使用してCatalyst上でホストします。Catalystのネイティブプラグインを使用して、[基本的なWebアプリ](https://docs.catalyst.zoho.com/ja/cli/v1/initialize-resources/initialize-client/#basic-client-applications)としてWebクライアントを初期化・作成できます。 - **Mail**: [Mail](https://docs.catalyst.zoho.com/ja/cloud-scale/help/mail/introduction/)は、従業員への自動メールの送信元となるメールアドレスを設定するために使用します。 このアプリケーションの構築には、[Catalyst Webコンソール](https://console.catalyst.zoho.com/)と[Catalystコマンドラインインターフェース](https://docs.catalyst.zoho.com/ja/cli/v1/cli-command-reference/)（CLI）を使用します。 このチュートリアルでは、ファンクションおよびクライアントコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーして、指示に従って適切なファイルに貼り付けてください。 ### アプリケーションアーキテクチャ Payslip Generatorアプリケーションのロジックは以下のとおりです： ![catalyst_payslip_architecture](https://catalyst-docs-development.zohostratus.in/images/tutorials/payslip-generator/catalyst_payslip_architecture.webp) * **フォームの送信**: エンドユーザーは、クライアント側に表示されるフォームに、氏名、役職、ID、メールアドレス、基本給、控除額、手当、支払方法などの従業員の詳細情報を入力します。詳細情報の入力が完了したら、**Submit**をクリックします。 * **PDF & Screenshot SDKのトリガー**: バックエンドでは、[PDF & Screenshot SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/)がトリガーされ、[ヘッドレスブラウザ](https://docs.catalyst.zoho.com/ja/smartbrowz/help/headless/introduction/)が起動します。Catalystが生成した[Template ID](https://docs.catalyst.zoho.com/ja/smartbrowz/help/templates/create-templates/)を使用して、フォームで収集した詳細情報がテンプレートにレンダリングされ、PDFに変換されます。 * **メールの送信**: 生成されたPDFは、[Send Mail SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/cloud-scale/mail/send-email/)を使用して、フォームに入力されたメールアドレスに添付ファイルとしてメール送信されます。これにより*Mail*コンポーネントが呼び出されます。ユーザーにはメール送信完了が通知され、フォームがリフレッシュされて次のユーザー情報を受け付ける準備が整います。