--- title: "クライアントの設定" url: https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/configure-client/ description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。" last_updated: 2026-03-05T06:13:24Z service: All Services type: tutorial related_links: - name: "クライアントディレクトリ構造" url: /ja/cli/v1/project-directory-structure/introduction/ - 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.js`をコーディングします。 > **注意:** このセクションのコードを十分に理解するために、必ず目を通してください。 以下のコードをコピーして、IDEを使用してプロジェクトの`client/directory`にある各ファイルに貼り付け、保存してください。 **index.html** ```xml <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>AlientCityAppClient</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"> </script> <script src="main.js"></script> </head> <body> <br> <br> <center> <h1>ALIEN CITY</h1> </center> <div class="container"> <ul class="nav nav-tabs" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="check-tab" data-toggle="tab" href="#check" role="tab" aria-controls="check" aria-selected="true">Check My City</a> </li> <li class="nav-item"> <a class="nav-link" id="report-tab" data-toggle="tab" href="#report" role="tab" aria-controls="report" aria-selected="false">Report Alien Encounter</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="check" role="tabpanel" aria-labelledby="check-tab"> <br> <br> <form> <div class="form-group"> <label for="city-get-input"><b>Check if your city has aliens:</b></label> <input type="text" class="form-control" id="city-get-input" aria-describedby="checkCity" placeholder="Enter City Name"> </div> <button type="submit" class="btn btn-primary" onclick="getAlienEncounter();return false;">Check</button> </form> <br> <br> <div id="result-container"> <div id="result-text"> </div> <br> <div id="result-image"> </div> </div> <div id="loader" style="display: none;"> <div class="spinner-border" role="status"> <span class="sr-only">Loading...</span> </div> </div> </div> <div class="tab-pane fade" id="report" role="tabpanel" aria-labelledby="report-tab"> <br> <br> <form> <div class="form-group"> <div class="city-post-input"> <label for="exampleInputEmail1"><b>Enter the name of the city where you encountered an alien:</b></label> <input type="text" class="form-control" id="city-post-input" aria-describedby="cityPost" placeholder="Enter City Name"> </div> </div> <button type="submit" class="btn btn-primary" onclick="postAlienEncounter();return false;">Report</button> </form> </div> </div> </div> </body> </html> ``` **main.js** ```javascript // サーバーにAPIコールを実行し、報告された都市をエイリアン都市として追加します function postAlienEncounter() { var city = $("#city-post-input").val(); // index.js functionファイルで定義されたURLにAjaxコールを実行します // Advanced I/O functionへのすべてのURLは /server/{function_name}/{url_path} のパターンになります $.ajax({ url: "/server/AlienCityAIO/alien", type: "post", contentType: "application/json", data: JSON.stringify({ "city_name": city }), success: function (data) { alert(data.message); }, error: function (error) { alert(error.message); } }); } // サーバーにAPIコールを実行し、指定された都市がエイリアン都市かどうかを確認します function getAlienEncounter() { showLoader(); var positive = "https://media.giphy.com/media/Y1GYiLui9NHcxVKhdo/giphy.gif"; var negative = "https://media.giphy.com/media/fsPcMdeXPxSP6zKxCA/giphy.gif"; var city = $("#city-get-input").val(); // index.js functionファイルで定義されたURLにAjaxコールを実行します // Advanced I/O functionへのすべてのURLは /server/{function_name}/{url_path} のパターンになります $.ajax({ url: "/server/AlienCityAIO/alien?city_name=" + city, type: "get", success: function (data) { console.log(data); $("#result-text").text(""); $("#result-text").text(data.message); var imagesrc = negative; if (data.signal == 'positive') { imagesrc = positive; } $("#result-image").html(""); $("#result-image").html("<img src='" + imagesrc + "' />"); hideLoader(); }, error: function (error) { alert(error.message); } }); } function showLoader() { $("#result-container").hide(); $("#loader").show(); } function hideLoader() { $("#loader").hide(); $("#result-container").show(); } ``` クライアントディレクトリの設定が完了しました。 ここで、アプリケーションのfunctionコンポーネントとクライアントコンポーネントの動作を確認しましょう： 1. **GET操作** - クライアントで都市名を入力して過去のエイリアン遭遇の記録を確認すると、`index.html`の**Check**ボタンの`onClick`イベントが`main.js`で定義された`getAlienEncounter()`関数をトリガーします。 - これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。`AlienCityAIO.java`で定義された`GET` APIが`getDataFromCatalystDataStore`関数を呼び出し、リクエストクエリを渡します。 - この関数は、ZCQLクエリを実行してData Storeの_AlienCity_テーブルからデータを検索します。 - 都市名に一致する記録がテーブルに見つかった場合、`positive`シグナルがレスポンスとして送信されます。見つからない場合は、`negative`シグナルが送信されます。 - クライアントは、レスポンスに対応するメッセージを表示します。`main.js`で定義されたレスポンスに対応するGIFも表示されます。 2. **POST操作** - クライアントで都市名を入力してエイリアン遭遇を報告すると、`index.html`の**Report**ボタンの`onClick`イベントが`main.js`で定義された`postAlienEncounter()`関数をトリガーします。 - これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。`AlienCityAIO.java`で定義された`POST` APIが`getDataFromCatalystDataStore`関数を呼び出し、同じ都市名の記録が既に存在するかを確認するリクエストクエリを渡します。 - この関数は、ZCQLクエリを実行してData Storeの_AlienCity_テーブルからデータを検索します。記録が既に存在する場合、レスポンスが送信され、クライアントがユーザーに適切なメッセージを表示します。 - 都市名の記録が存在しない場合、ユーザーが入力した都市名で_AlienCity_テーブルに新しい行が作成されます。Data Storeへの記録の挿入を確認するポップアップボックスがクライアントに表示されます。適切なメッセージがログにも送信され、コンソールの*Monitor*セクションにある*Logs*から確認できます。