---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/museum-finder/configure-client/
description: "Catalyst Functionsを使用して、評価や旅行者タイプの条件に基づいて博物館を検索するMuseum Finderウェブアプリケーションをビルドし、Catalyst Circuitsを使用してワークフローを自動化します。"
last_updated: 2026-08-28T07:59:38Z
service: All Services
type: tutorial
related_links:
  - name: "クライアントディレクトリ構造"
    url: /ja/cli/v1/project-directory-structure/client-directory
---

# クライアントの設定

次に、クライアントコンポーネントを設定しましょう。[クライアントディレクトリ](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/`ディレクトリにある各ファイルに貼り付けて、ファイルを保存します。

**index.html**

```xml
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Museum Finder</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
    <!-- Bootstrap core CSS -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
    <script src="https://static.zohocdn.com/catalyst/sdk/js/4.6.2/catalystWebSDK.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- JQuery -->
    <!-- Bootstrap tooltips -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</head>
<body>
    <div id="maindiv">
        <nav class="navbar navbar-expand-lg navbar-dark brown">
            <a class="navbar-brand" href="">Best Museum Finder ®</a>
        </nav>
        <br><br><br>
        <center>
            <h2>Get the list of best museums in the US based on your Choice and Rating !</h2>
            <br><br><br>
            <form id="myForm">
                <label for="Type">Traveller Type: </label>
                <select name="Type" id="Type">
                    <option disabled selected value> -- select an option -- </option>
                    <option value="Families">Families</option>
                    <option value="Couples">Couples</option>
                    <option value="Solo">Solo</option>
                    <option value="Business">Business</option>
                    <option value="Friends">Friends</option>
                    <option>----------------------</option>
                </select>                 
                <label for="Rating">Select the rating : </label>
                <select name="Rating" id="Rating">
                    <option disabled selected value> -- select an option -- </option>
                    <option value="Excellent">Excellent</option>
                    <option value="Very good">Very good</option>
                    <option value="Average">Average</option>
                    <option value="Poor">Poor</option>
                    <option value="Terrible">Terrible</option>
                    <option>----------------------</option>
                </select><br><br><br>
                Enter the number of Museums you want : <input type="text" id="count" required><br><br><br>
                Enter your Mail ID : <input type="email" id="mailid" required><br><br><br><br>
                <button type="button" id="button" class="btn btn-brown" data-toggle="modal"
                    data-target="#basicExampleModal" onclick="triggerCircuit()">Submit details</button></form>
        </center>
    </div>
    <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <center><br><p id="popuptext"></p><br>
                        <button type="button" class="btn btn-brown" data-dismiss="modal">Close</button>
                    </center>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

```

**main.css**

```css
.modal {
    padding-top: 350px;
  }

```

**main.js**

```javascript
function triggerCircuit() {
	var count = document.getElementById("count").value;
    var Rating = document.getElementById("Rating").value;
    var Type = document.getElementById("Type").value;
    var MailID = document.getElementById("mailid").value;
    document.getElementById("myForm").reset();

    if (count || Rating || Type || MailID) {
        console.log(count, Rating, Type, MailID);

        $.ajax({
            url: "/server/circuit/triggerCircuit",
            type: "post",
            contentType: "application/json",
            data: JSON.stringify({
                "count": count,
                "rating": Rating,
                "traveller": Type,
                "mail_id": MailID
            }),
            success: function (data) {
                console.log(data); // このログはCatalystコンソールのLogsから確認できます
                document.getElementById("popuptext").innerHTML = data.message;
            },
            error: function (error) {
                console.log(error);
                document.getElementById("popuptext").innerHTML = "Please try again after sometime";
            }
        });
    } else {
        document.getElementById("popuptext").innerHTML = "Please provide data in the all the fields";
    }
}

```

前のセクションで説明したように、`main.js` Functionはクライアントアプリケーションでユーザーが入力した値を取得し、APIをトリガーしてCircuit Functionに渡します。HTTP `POST`メソッドを使用してデータをCircuit Functionにポストします。

渡されるデータには、ユーザーが必要とする博物館の数、希望する評価と旅行者タイプ、およびユーザーのメールアドレスの値が含まれます。

クライアントディレクトリの設定が完了しました。次に、Functionおよびクライアントコンポーネントをリモートコンソールにデプロイします。