# Java



--------------------------------------------------------------------------------
title: "はじめに"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.538Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/introduction/"
service: "All Services"
related:
- プロジェクトディレクトリ構造 (/ja/cli/v1/project-directory-structure/introduction/)
- Java SDK (/ja/sdk/java/v1/overview/)
- Node.js SDK (/ja/sdk/nodejs/v2/overview/)
- Python SDK (/ja/sdk/python/v1/overview/)

--------------------------------------------------------------------------------


# Alien City

### はじめに

このチュートリアルでは、都市でのエイリアン遭遇を報告・検索できる**Alien City**というシンプルなWebアプリケーションを構築します。Alien Cityは、Catalystを使用したシングルページサーバーレスアプリケーションです。

クライアントアプリケーションは以下のように表示されます：



以下のリンクから、実際に動作するアプリケーションにアクセスして機能を確認できます：
アプリを試す

Alien Cityアプリケーションは、以下のCatalystサービスのコンポーネントを利用しています：

**Catalyst Serverless**:

* **Advanced I/O Function**: Advanced I/O functionは、Java、Node.js、またはPythonプラットフォームでビジネスロジックをコーディングできるコンポーネントです。都市でのエイリアン遭遇を報告または確認するためのAPIが含まれています。


**Catalyst Cloud Scale**:

* **Web Client**: Web Client Hostingを通じてCatalyst上にホストされるアプリケーションのフロントエンドです。

* **Data Store**: エイリアン遭遇が報告された都市のデータベースを保存します。

* **ZCQL**: クエリを使用してData Storeからデータを取得します。

このアプリケーションの構築には、Catalyst WebコンソールとCatalyst Command Line Interface（CLI）を使用します。

このチュートリアルでは、functionおよびclientコンポーネントに含めるファイルのコードが提供されます。ここに記載されたコードをコピーし、指示に従って適切なファイルに貼り付けるだけで完了します。

### アプリケーションアーキテクチャ

Alien Cityアプリケーションの動作は以下のとおりです：

* **エイリアン遭遇の報告**<br />ユーザーがエイリアンに遭遇した都市の名前を入力します。その都市が以前に報告済みの場合、クライアントはその旨を通知するメッセージを表示します。未報告の都市の場合、そのデータがData Storeのテーブルに追加されます。

* **エイリアン遭遇の確認**<br />ユーザーが都市名を入力して、その都市でのエイリアン遭遇の記録を確認します。Data Storeにその都市の記録が存在する場合、クライアントは肯定的なレスポンスを表示します。存在しない場合は、否定的なレスポンスを表示します。




--------------------------------------------------------------------------------
title: "前提条件"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.539Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/prerequisites/"
service: "All Services"
related:
- Catalyst CLIドキュメント (/ja/cli/v1/cli-command-reference/)

--------------------------------------------------------------------------------


# 前提条件

アプリケーションの構築を始める前に、以下の前提条件をシステムにインストールしておく必要があります：

1. **Catalyst CLI**<br />Catalyst CLIには、ローカルマシンからアプリケーションのコンポーネントを初期化、開発、テスト、デプロイするためのツール一式が含まれています。このチュートリアルではCatalyst CLIを使用します。<br /><br />以下のアクションを実行する必要があります：

    * **Catalyst CLIのインストール**: Catalyst CLIはNPMを通じてインストールします。そのため、CLIをインストールする前にNPMとNode.jsをシステムにインストールしておく必要があります。前提条件とインストール手順の詳細については、Catalyst CLIインストールヘルプページを参照してください。

    * **Catalyst CLIへのログイン**: Catalyst CLIをインストールした後、使用する前にCatalystアカウントでCLIを認証する必要があります。Catalyst CLIからのログイン手順と利用可能なオプションについては、CLIログインヘルプページを参照してください。

2. **Java functionおよびクライアントコード開発用のIDEツール**<br />Advanced I/O functionとクライアントコードの作業には、任意のIDEを使用できます。Visual Studio Code、IntelliJ IDEA、Eclipse、Sublime Textなどが一般的な選択肢です。お好みのIDEをダウンロードしてシステムにインストールしてください。

Visual Studio Code IDEをご利用の場合は、Catalyst Tools拡張機能をインストールすることで、CLIの代わりにIDE上で操作できます。Catalyst VS Code拡張機能の詳細については、こちらのヘルプセクションをご覧ください。


--------------------------------------------------------------------------------
title: "プロジェクトの作成"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.539Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/create-project/"
service: "All Services"
related:
- Catalystコンソール (/ja/getting-started/catalyst-projects/)

--------------------------------------------------------------------------------


# プロジェクトの作成

CatalystコンソールからCatalystプロジェクトを作成しましょう。

1. Catalystコンソールにログインし、**Create New Project**をクリックします。


2. ポップアップウィンドウでプロジェクト名に「**AlienCity**」と入力し、**Create**をクリックします。


プロジェクトが作成され、開きます。

<!-- <br /> -->


--------------------------------------------------------------------------------
title: "テーブルの作成"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.539Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/create-table/"
service: "All Services"
related:
- Data Store (/ja/cloud-scale/help/data-store/introduction/)

--------------------------------------------------------------------------------


# テーブルの作成

次に、**AlienCity**プロジェクトのData Storeにテーブルを作成しましょう。このテーブルは、エイリアンが目撃された都市名の記録を保存するために使用されます。

テーブルを作成するには：

1. コンソールの*Cloud Scale*セクションに移動し、**Start Exploring**をクリックします。
 <br />

2. *Storage*の下の**Data Store**に移動し、**Create a New Table**をクリックします。
 <br />

3. テーブル名に「**AlienCity**」と入力し、**Create**をクリックします。
 <br />

Note: アプリケーションのコードに同じ名前が含まれているため、指示どおりに正確に名前を入力してください。

テーブルが作成されました。

次に、都市名を保存するためのカラムをテーブルに作成しましょう。

1. テーブルの*Schema View*セクションで**New Column**をクリックします。
<br />

2. カラム名に「**CityName**」と入力します。データ型として**Var Char**を選択し、最大長に「**100**」と入力します。**Is Unique**トグルスイッチをクリックして有効にします。
<br />

Note: アプリケーションのコードに同じ名前が含まれているため、指示どおりに正確に名前を入力してください。

Catalystがサポートするさまざまなデータ型やカラムのその他のプロパティについては、Data Storeヘルプページをご覧ください。

3. **Create**をクリックします。

カラムが作成され、*Schema View*セクションに表示されます。
<br />

<br />


--------------------------------------------------------------------------------
title: "プロジェクトの初期化"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.539Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/initialize-the-project/"
service: "All Services"
related:
- CLIリソースの初期化 (/ja/cli/v1/initialize-resources/introduction/)
- プロジェクトディレクトリ構造 (/ja/cli/v1/project-directory-structure/introduction/)

--------------------------------------------------------------------------------


# CLIからプロジェクトを初期化する

CLIからCatalystプロジェクトの作業を開始できます。最初のステップは、空のディレクトリでプロジェクトを初期化することです。このディレクトリがプロジェクトのホームディレクトリとなり、すべてのプロジェクトファイルがここに保存されます。

詳細については、プロジェクトディレクトリ構造ヘルプページをご覧ください。プロジェクトの初期化の詳細については、CLIヘルプドキュメントを参照してください。

Alien Cityアプリケーションでは、クライアントとAdvanced I/O functionを初期化します。Advanced I/O functionはJavaプラットフォームで初期化します。ただし、前述のとおり、PythonまたはNode.jsプラットフォームでも初期化できます。手順は以下のとおりです：

1. ローカルマシンにプロジェクト用のフォルダを作成し、ターミナルからそのフォルダに移動します。

2. そのディレクトリから以下のコマンドを実行してプロジェクトを初期化します：
catalyst init 

3. **矢印キー**で移動し、希望するポータルを選択して**Enter**キーを押します。アカウントに他の組織が関連付けられていない場合、デフォルトのポータルが自動的に選択されます。
<br />
Catalystのマルチ組織ポータル機能の詳細については、こちらのヘルプドキュメントをご覧ください。

4. CLIがCatalystプロジェクトをディレクトリに関連付けるよう求めます。先ほどコンソールから作成したプロジェクトに関連付けます。リストから**AlienCity**を選択して**Enter**を押します。
<br />

5. **スペースバー**を使用して**Client**と**Functions**を選択し、**Enter**キーを押して初期化します。
<br />

6. CLIがfunctionのセットアップを開始します。functionタイプとして**AdvancedIO**を選択します。
<br />

7. プログラミング環境として**Java**の最新ランタイムを選択します。
<br />

8. フォルダ名に「**AlienCityAIO**」と入力して**Enter**を押します。Java functionのクラス名にも同じ「**AlienCityAIO**」と入力して**Enter**を押します。
<br />

9. CLIがクライアントのセットアップを開始します。クライアントタイプとして**Basic web app**を選択します。
<br />

10. クライアントパッケージ名に「**ALcity**」と入力して**Enter**を押します。お好みの名前を入力することもできます。
<br />

クライアントディレクトリが標準構造で作成されます。Catalystの初期化が完了しました。

プロジェクトディレクトリに、クライアントディレクトリとfunctionsディレクトリが設定ファイルと依存関係とともにセットアップされました。プロジェクトディレクトリには、catalyst.json設定ファイルと隠しファイル.catalystrcも含まれています。

以下は、Advanced I/O functionがJavaプラットフォームで、クライアントがBasic web appとしてセットアップされた場合のAlienCityプロジェクトのディレクトリ構造です。
<br />


--------------------------------------------------------------------------------
title: "Advanced I/O Functionの設定"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.540Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/configure-advio-function/"
service: "All Services"
related:
- Functions (/ja/serverless/help/functions/introduction/)
- Advanced I/O Functions (/ja/serverless/help/functions/advanced-io/)
- Functionsディレクトリ構造 (/ja/cli/v1/project-directory-structure/functions-directory/)

--------------------------------------------------------------------------------


# Advanced I/O Functionの設定

Alien Cityアプリケーションのコーディングを、Functionコンポーネントの設定から始めましょう。

Javaのfunctionディレクトリ（  functions/AlienCityAIO  ）には、以下のファイルが含まれています：

- AlienCityAIO.java メインfunctionファイル
- catalyst-config.json 設定ファイル
- libフォルダ内のJavaライブラリファイル
- .classpath および .project 依存関係ファイル

AlienCityAIO.java メインfunctionファイルにコードを追加します。

Advanced I/O functionには、サーバーとData Store間のルーティングを処理する2つのAPIがあります：

- **GET /alien**：都市にエイリアンが存在するかどうかを確認する
- **POST /alien**：都市でのエイリアンの存在を報告する
  <br>

それでは、functionファイルにコードを追加しましょう。
<br>

以下のコードをコピーして、プロジェクトの functions/AlienCityAIO ディレクトリにある AlienCityAIO.java に貼り付けて、ファイルを保存してください。アプリケーションのファイルを操作するには、お好みのIDEを使用できます。
<br>

 注意: このセクションのコードを十分に理解するために、必ず目を通してください。 

import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.logging.Level;
import java.util.logging.Logger;
import com.zc.common.ZCProject;
import javax.servlet.ServletInputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.catalyst.advanced.CatalystAdvancedIOHandler;
import com.zc.component.object.ZCObject;
import com.zc.component.object.ZCRowObject;
import com.zc.component.zcql.ZCQL;
import org.json.simple.JSONObject;
import org.json.simple.parser.JSONParser;
public class AlienCityAIO implements CatalystAdvancedIOHandler {
private static final Logger LOGGER = Logger.getLogger(AlienCityAIO.class.getName());
private static String TABLENAME = "AlienCity";
private static String COLUMNNAME = "CityName";
JSONObject responseData = new JSONObject();
static String GET = "GET";
static String POST = "POST";
@Override
@SuppressWarnings("unchecked")
public void runner(HttpServletRequest request, HttpServletResponse response) throws Exception {
try {
	ZCProject.initProject();
			//呼び出し先のエンドポイントとメソッドを取得します
			String url = request.getRequestURI();
			String method = request.getMethod();
			//テーブルで該当都市のエイリアン遭遇を確認するGET API
			if ((url.equals("/alien")) && method.equals(GET)) {
				String cityName = request.getParameter("city_name");
				//Catalyst Data Storeテーブルにクエリを実行し、指定された都市の行が存在するかどうかを確認します
				int length = getAlienCountFromCatalystDataStore(cityName);
					if (length > 0) {
						responseData.put("message", "Uh oh! Looks like there are aliens in this city!");
						responseData.put("signal", "positive");
					} else {
						responseData.put("message", "Hurray! No alien encounters in this city yet!");
						responseData.put("signal", "negative");
					}
				}
				//特定の都市のエイリアン遭遇を報告するPOST API
				else if ((url.equals("/alien")) && method.equals(POST)) {
					//リクエストボディを取得してパースします
					ServletInputStream requestBody = request.getInputStream();
					JSONParser jsonParser = new JSONParser();
					JSONObject jsonObject = (JSONObject) jsonParser.parse(new InputStreamReader(requestBody, "UTF-8"));
					String cityName = (String) jsonObject.get("city_name");
					//Catalyst Data Storeテーブルにクエリを実行し、指定された都市の行が存在するかどうかを確認します
					int length = getAlienCountFromCatalystDataStore(cityName);
					if (length > 0) {
						responseData.put("message",
							"Looks like you are not the first person to encounter aliens in this city! Someone has already reported an alien encounter here!");
					}
					//行が存在しない場合、新しい行を挿入します
					else {
						ZCRowObject row = ZCRowObject.getInstance();
						row.set("CityName", cityName);
						ZCObject.getInstance().getTableInstance(TABLENAME).insertRow(row);
						responseData.put("message", "Thanks for reporting!");
					}
				} else {
					//アクションがログに記録されます。Catalyst Logsからログを確認できます。
					LOGGER.log(Level.SEVERE, "Error. Invalid Request");
					responseData.put("error", "Request Endpoint not found");
					response.setStatus(404);
				}
				//クライアントにレスポンスを返します
				response.setContentType("application/json");
				response.getWriter().write(responseData.toString());
				response.setStatus(200);
			} catch (Exception e) {
				//アクションがログに記録されます。Catalyst Logsからログを確認できます。
				LOGGER.log(Level.SEVERE, "Exception in AlienCityAIO", e);
				responseData.put("error", "Internal server error occurred. Please try again in some time.");
				response.getWriter().write(responseData.toString());
				response.setStatus(500);
			}
		}
		/**
		* 指定された都市のエイリアン遭遇が既に報告されているかどうかを
		* Data Storeテーブルにクエリを実行して確認します
		*
		* @param {*} catalystApp
		* @param {*} cityName
		*/
		private int getAlienCountFromCatalystDataStore(String cityName) throws Exception {
			String query = "SELECT * FROM AlienCity WHERE CityName = '" + cityName + "'";
			//ZCQLインスタンスを取得し、クエリ文字列を使用してクエリを実行します
			ArrayList<ZCRowObject> rowList = ZCQL.getInstance().executeQuery(query);
			return rowList.size();
		}
}


functionsディレクトリの設定が完了しました。次のセクションでは、functionとクライアントのアーキテクチャについて説明します。


--------------------------------------------------------------------------------
title: "クライアントの設定"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.540Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/configure-client/"
service: "All Services"
related:
- クライアントディレクトリ構造 (/ja/cli/v1/project-directory-structure/introduction/)
- Webクライアントホスティング (/ja/cloud-scale/help/web-client-hosting/introduction/)

--------------------------------------------------------------------------------


# クライアントの設定

次に、クライアントコンポーネントを設定しましょう。クライアントディレクトリには以下が含まれています：

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

<br>
index.htmlとmain.jsをコーディングします。
<br>
<br>
注意: このセクションのコードを十分に理解するために、必ず目を通してください。
<br>
以下のコードをコピーして、IDEを使用してプロジェクトのclient/directoryにある各ファイルに貼り付け、保存してください。
<br>
<br>
<!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>


// サーバーに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();
}


<br>

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

ここで、アプリケーションのfunctionコンポーネントとクライアントコンポーネントの動作を確認しましょう：

 1. **GET操作**
<br>

- クライアントで都市名を入力して過去のエイリアン遭遇の記録を確認すると、index.htmlの**Check**ボタンのonClickイベントがmain.jsで定義されたgetAlienEncounter()関数をトリガーします。
  <br>
- これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。AlienCityAIO.javaで定義されたGET APIがgetDataFromCatalystDataStore関数を呼び出し、リクエストクエリを渡します。
  <br>
- この関数は、ZCQLクエリを実行してData Storeの_AlienCity_テーブルからデータを検索します。
  <br>
- 都市名に一致する記録がテーブルに見つかった場合、positiveシグナルがレスポンスとして送信されます。見つからない場合は、negativeシグナルが送信されます。
  <br>
- クライアントは、レスポンスに対応するメッセージを表示します。main.jsで定義されたレスポンスに対応するGIFも表示されます。
  
  <br>

 2. **POST操作**
<br>

- クライアントで都市名を入力してエイリアン遭遇を報告すると、index.htmlの**Report**ボタンのonClickイベントがmain.jsで定義されたpostAlienEncounter()関数をトリガーします。
  <br>
- これにより、Advanced I/O functionで定義されたURLルートにAjaxコールが実行されます。AlienCityAIO.javaで定義されたPOST APIがgetDataFromCatalystDataStore関数を呼び出し、同じ都市名の記録が既に存在するかを確認するリクエストクエリを渡します。
  <br>
- この関数は、ZCQLクエリを実行してData Storeの_AlienCity_テーブルからデータを検索します。記録が既に存在する場合、レスポンスが送信され、クライアントがユーザーに適切なメッセージを表示します。
  <br>
- 都市名の記録が存在しない場合、ユーザーが入力した都市名で_AlienCity_テーブルに新しい行が作成されます。Data Storeへの記録の挿入を確認するポップアップボックスがクライアントに表示されます。適切なメッセージがログにも送信され、コンソールの*Monitor*セクションにある*Logs*から確認できます。
  


--------------------------------------------------------------------------------
title: "アプリケーションのテスト"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.541Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/test-application/"
service: "All Services"
related:
- CLIリソースの提供 (/ja/cli/v1/serve-resources/introduction/)

--------------------------------------------------------------------------------


# アプリケーションのテスト

アプリケーションをリモートコンソールにデプロイする前に、Catalyst CLIを使用してローカルサーバーでアプリケーションをテストし、すべてが正常に動作するか確認できます。

Catalystプロジェクトをローカルで提供するには、プロジェクトディレクトリから以下のコマンドを実行します：
catalyst serve

Alien Cityアプリケーションがデフォルトポート3000で提供されます。コンポーネントのローカルエンドポイントURLが表示されます。

注意: クライアントのホームページやサブページ、またはfunctionにアクセスするたびに、CLIはアクセスされたURLとHTTPリクエストメソッドのライブログを表示します。

<br />

ブラウザでクライアントコンポーネントのローカルURLを開いて、Alien Cityアプリケーションにアクセスできます。

<br />

都市名を入力して、その都市でのエイリアン遭遇の履歴を確認し、アプリケーションをテストしましょう。まだどの都市でもエイリアン遭遇を報告していないため、結果は否定的になるはずです。

テキストボックスに都市名を入力し、**Check**をクリックします。

<br />

この都市に一致する記録がData Storeに見つからないため、クライアントは否定的なレスポンスを表示します。

<br />

次に、エイリアン遭遇を報告しましょう。*Report Alien Encounter*タブをクリックします。都市名を入力し、**Report**をクリックします。ここでは「**Amsterdam**」と入力しました。

<br />

アプリケーションは、Data Storeにデータが追加されたことを確認するポップアップボックスを表示します。

<br />

Catalystコンソールを開き、*Storage* **>** *CloudScale*の下の**Data Store**に移動して確認できます。**Data View**タブをクリックして、挿入されたばかりの記録を確認します。

<br />

次に、クライアントでこの都市を検索し、Data Storeからこの記録を取得できるか確認しましょう。クライアントアプリケーションで*Check My City*をクリックし、先ほど報告した都市名を入力します。ここでは「**Amsterdam**」と入力します。**Check**をクリックします。

<br />

クライアントは肯定的なレスポンスを表示します。

同じ都市を再度報告して、クライアントが重複メッセージを表示するかも確認できます。

<br />

この設定が正しく動作していれば、アプリケーションを本番環境にデプロイできます。

<br />


--------------------------------------------------------------------------------
title: "プロジェクトのデプロイ"
description: "Catalyst Advanced I/O FunctionとCatalyst Data Storeを使用して、都市でのエイリアン遭遇を報告または検索できるシングルページサーバーレスWebアプリケーションを作成します。"
last_updated: "2026-10-08T06:48:14.541Z"
source: "https://docs.catalyst.zoho.com/ja/tutorials/alien-city/java/deploy-project/"
service: "All Services"
related:
- CLIリソースのデプロイ (/ja/cli/v1/deploy-resources/introduction/)
- Webクライアントホスティング (/ja/cloud-scale/help/web-client-hosting/introduction/)

--------------------------------------------------------------------------------


# プロジェクトのデプロイ

CLIからCatalystプロジェクトをデプロイするには、プロジェクトディレクトリからターミナルで以下のコマンドを実行します：
catalyst deploy

最初にfunctionがデプロイされ、次にクライアントコンポーネントがデプロイされます。コンポーネントの本番URLが表示されます。

<br />

ブラウザでクライアントコンポーネントのURLを開いて、デプロイされたアプリケーションにアクセスできます。Alien CityはWebアプリURLからアクセスできるようになりました。

<br />