クライアントの設定
次に、クライアントコンポーネントを設定しましょう。クライアントディレクトリには以下が含まれています：
- フロントエンドアプリケーションのHTMLコードを含むindex.htmlファイル
- フロントエンドアプリケーションのCSSコードを含むmain.cssファイル
- JavaScriptコードを含むmain.jsファイル
- client-package.json設定ファイル
index.html、main.css、main.jsをコーディングします。
以下のコードをコピーして、IDEを使用してプロジェクトのclient/directoryにある各ファイルに貼り付けて保存します。
<!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>
.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);
}
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をトリガーし、リクエストボディが渡されてPDFドキュメントが生成されます。PDFは一時的な場所に保存されます。
-
Send Mail SDKがトリガーされ、一時的な場所からPDFドキュメントが読み込まれてメールに添付されます。Mailコンポーネントを使用して設定されたメールIDから従業員にメールが送信されます。
-
PDFドキュメントがメール送信された後、確認メッセージを含むレスポンスがクライアント側に表示されます。
最終更新日 2026-03-05 11:43:24 +0530 IST