---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/payslip-generator-app/nodejs/configure-client/
description: "Catalystコンポーネントを使用して、動的なカスタム給与明細テンプレートからPDFドキュメントを生成し、生成したドキュメントをエンドユーザーにメールで送信する基本的なWebアプリを構築します。"
last_updated: 2026-03-05T06:13:24Z
service: All Services
type: tutorial
related_links:
  - name: "クライアントディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/client-directory/
  - name: "Webクライアントホスティング"
    url: /ja/cloud-scale/help/web-client-hosting/introduction/
---

# クライアントの設定

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

* フロントエンドアプリケーションのHTMLコードを含む`index.html`ファイル
* フロントエンドアプリケーションのCSSコードを含む`main.css`ファイル
* JavaScriptコードを含む`main.js`ファイル
* `client-package.json`設定ファイル

`index.html`、`main.css`、`main.js`をコーディングします。

> **Note:** このセクションのコードをよく読んで、完全に理解してください。

以下のコードをコピーして、IDEを使用してプロジェクトの`client/directory`にある各ファイルに貼り付けて保存します。

**index.html**

```xml
<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="main.js"></script>
    <link
      rel="stylesheet"
      type="text/css"
      href="main.css"/>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        // 入力要素を取得
        var basicSalaryInput = document.getElementById("basicSalary");
        var allowancesInput = document.getElementById("allowances");
        var deductionsInput = document.getElementById("deductions");
        var netSalaryInput = document.getElementById("netSalary");
        // 入力フィールドにイベントリスナーを追加
        basicSalaryInput.addEventListener("input", calculateNetSalary);
        allowancesInput.addEventListener("input", calculateNetSalary);
        deductionsInput.addEventListener("input", calculateNetSalary);
        // 手取り給与を計算する関数
        function calculateNetSalary() {
          // 入力フィールドから値を取得
          var basicSalary = parseFloat(basicSalaryInput.value) || 0;
          var allowances = parseFloat(allowancesInput.value) || 0;
          var deductions = parseFloat(deductionsInput.value) || 0;
          // 手取り給与を計算
          var netSalary = basicSalary + allowances - deductions;
          // 手取り給与の入力フィールドを更新
          netSalaryInput.value = netSalary.toFixed(2);
        }
      });
    </script>
  </head>
  <body>
    <div class="container mt-5 mb-5">
      <h2>Payslip Generator</h2>
      <form onsubmit="generatePayslip();return false;">
        <div class="row">
          <div class="form-group col-md-6">
            <label for="employeeName">Employee Name:</label>
            <input type="text" id="employeeName" name="employeeName" required />
          </div>
          <div class="form-group col-md-6">
            <label for="employeeId">Employee ID:</label>
            <input type="text" id="employeeId" name="employeeId" required />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="designation">Employee Designation:</label>
            <input type="text" id="designation" name="designation" required />
          </div>
          <div class="form-group col-md-6">
            <label for="employeeEmail">Employee Email:</label>
            <input
              type="text"
              id="employeeEmail"
              name="employeeEmail"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="basicSalary">Basic Salary:</label>
            <input type="number" id="basicSalary" name="basicSalary" min="0" oninput="validity.valid||(value='');" required />
          </div>
          <div class="form-group col-md-6">
            <label for="allowances">Allowances:</label>
            <input type="number" id="allowances" name="allowances" min="0" oninput="validity.valid||(value='');" required />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="deductions">Deductions:</label>
            <input type="number" id="deductions" name="deductions" min="0" oninput="validity.valid||(value='');" required />
          </div>
          <div class="form-group col-md-6">
            <label for="netSalary">Net Salary:</label>
            <input type="number" id="netSalary" name="netSalary" readonly />
          </div>
        </div>
        <div class="row">
          <div class="form-group col-md-6">
            <label for="paymentMethod">Payment Method:</label>
            <select id="paymentMethod" name="paymentMethod" required>
              <option value="">Select</option>
              <option value="Bank Transfer">Bank Transfer</option>
              <option value="Cheque">Cheque</option>
              <option value="Cash">Cash</option>
            </select>
          </div>
        </div>
        <input
          type="submit"
          value="Submit"
        />
      </form>
    </div>
  </body>
</html>

```

**main.css**

```css
.container {     
    background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    padding: 40px;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }

  h2 {
   
    background: linear-gradient(to right, #4caf50, #45a049);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    margin-bottom: 40px;
  }
  /* フォームラベルのスタイリング */
  label {
    transition: color 0.3s ease; /* ホバー時の微細なアニメーションを追加 */
  }
  
  label:hover {
    /* ホバー時に色を変更 */
    color: #4caf50;
  }
  
  /* フォーム入力フィールドのスタイリング */
  input[type="text"],
  input[type="number"],
  select {
    /* 入力フィールドの高さを拡大 */
    height: 40px;
    /* 微細なボックスシャドウを追加 */
  }
  
  /* フォーム入力グループのスタイリング */
  .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .form-group label {
    flex: 0 0 200px; /* ラベルに固定幅を設定 */
    margin-right: 10px; /* ラベルと入力フィールドの間にスペースを追加 */
  }
  
  .form-group input,
  .form-group select {
    flex: 1; /* 入力フィールドが残りのスペースを占有するように設定 */
  }
  /* 送信ボタンのスタイリング */
  input[type="submit"] {
    /* グラデーション背景を追加 */
    background-image: linear-gradient(to right, #4caf50, #45a049);
    /* ボックスシャドウを追加 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    margin-top: 15px;
    width: 150px;
    margin-left: 600px;
  }
  input[type="submit"]:hover {
    /* ホバー時に背景を暗くする */
    background-image: linear-gradient(to right, #45a049, #398e3d);
  }

```

> **Note:** Node.jsファンクションパッケージの名前`payslip_generator_function`は、`main.js`のコードの**13**行目に追加されています。別のパッケージ名を指定した場合は、適宜置き換えてください。

**main.js**

```javascript
  function generatePayslip() {
    // フォームの値を取得
    const employeeName = document.getElementById('employeeName').value;
    const employeeId = document.getElementById('employeeId').value;
    const designation = document.getElementById('designation').value;
    const paymentMethod = document.getElementById('paymentMethod').value;
    const employeeEmail = document.getElementById('employeeEmail').value;
    const basicSalary = parseFloat(document.getElementById('basicSalary').value);
    const allowances = parseFloat(document.getElementById('allowances').value);
    const deductions = parseFloat(document.getElementById('deductions').value);

    $.ajax({
      url: '/server/payslip_generator_function/generatepayslip', //ファンクションのエンドポイントをここに指定してください
      type: 'post',
      contentType: 'application/json',
      data: JSON.stringify({
        employeeName,
        employeeId,
        basicSalary,
        allowances,
        deductions,
        designation,
        paymentMethod,
        employeeEmail
    }),
      success: function (data) {
          alert(data);
          window.location.reload();
      },
      error: function (error) {
        console.log(error);
        alert(error.responseText);
        window.location.reload();
      }
  });
  }

```

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

ファンクションとクライアントコードの動作を確認しましょう：

* エンドユーザーがクライアント側で従業員の詳細情報を入力します。エンドユーザーが**Submit**をクリックすると、`main.js`の`POST`呼び出しが`/generatepayslip` APIエンドポイントをトリガーし、データがJSON形式でファンクションに渡されます。

* ファンクションが[PDF & Screenshot SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/smartbrowz/generate-pdfnscreenshot/#generate-visual-documents-using-template)をトリガーし、リクエストボディが渡されてPDFドキュメントが生成されます。PDFは一時的な場所に保存されます。

* [Send Mail SDK](https://docs.catalyst.zoho.com/ja/sdk/nodejs/v2/cloud-scale/mail/send-email/)がトリガーされ、一時的な場所からPDFドキュメントが読み込まれてメールに添付されます。[Mail](https://docs.catalyst.zoho.com/ja/cloud-scale/help/mail/introduction/)コンポーネントを使用して設定されたメールIDから従業員にメールが送信されます。

* PDFドキュメントがメール送信された後、確認メッセージを含むレスポンスがクライアント側に表示されます。