---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/newsapp/nodejs/configure-client/
description: "Catalyst Job Scheduling Cronコンポーネントと、Node.jsで記述されたJob FunctionおよびAdvanced I/O Functionを使用して、サードパーティサービスから定期的にニュースを自動取得する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: "Advanced I/O Function"
    url: /ja/serverless/help/functions/advanced-io
---

# クライアントの設定

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

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

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

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

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

**index.html**

```xml
<!DOCTYPE html>
<html>
<title>NewsApp</title>
<script src="main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body onload="fetchNews('HEADLINES')">
    <center>
        <h1>Welcome to The Daily Broadcast</h1>
        <h3>Today's News</h3>
        <h2>HEADLINES</h2><br>
    </center>
    <div class="sidenav">
        <img src="https://i.pinimg.com/236x/e6/71/5f/e6715f8bd963c783f75f11fdc37fa4aa.webp" width="220" height="200"
            onclick="fetchNews('HEADLINES')"><br>
        <a onclick="return fetchNews('BUSINESS');">Business</a><br>
        <a onclick="return fetchNews('ENTERTAINMENT');">Entertainment</a><br>
        <a onclick="return fetchNews('HEALTH');">Health</a><br>
        <a onclick="return fetchNews('SCIENCE');">Science</a><br>
        <a onclick="return fetchNews('SPORTS');">Sports</a><br>
        <a onclick="return fetchNews('TECHNOLOGY');">Technology</a><br>
    </div>
    <div class="loading" id="loader" style="display: none;"></div>
    <div class="main">
        <ul id="newsList"></ul>
    </div>
</body>
</html>

```

**main.css**

```css
.sidenav {
    height: 100%;
    width: 220px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
}
a{
    cursor: pointer;
}
.sidenav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 25px;
    font-family: "Helvetica", sans-serif;
    color: #818181;
    display: block;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.main {
    margin-left: 200px;
    font-size: 20px;
    padding: 0px 10px;
    font-family: "Poynter", sans-serif;
}

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

    .sidenav a {
        font-size: 18px;
    }
}

.loading {
    height: 0;
    width: 0;
    padding: 15px;
    border: 6px solid rgb(155, 155, 155);
    border-right-color: rgb(88, 88, 88);
    border-radius: 22px;
    -webkit-animation: rotate 1s infinite linear;
    /* left, top and position just for the demo! */
    position: absolute;
    left: 50%;
    top: 50%;
  }
  
  @-webkit-keyframes rotate {
    /* 100% keyframe for  clockwise. 
       use 0% instead for anticlockwise */
    100% {
      -webkit-transform: rotate(360deg);
    }
  }

```

**main.js**

```javascript
function fetchNews(name) {
    //ニュースアイテムをノードとして表示するため、カテゴリ変更のたびに既存のノードを削除します
    const nodes = document.getElementById("newsList");
    nodes.innerHTML = '';
    document.getElementById("loader").style.display = "block";
    var tablename = name;
    console.log(tablename);
    //Advanced I/O Functionに対してAPI呼び出しを行い、特定のテーブルからニュースアイテムを取得します
    $.ajax({
        url: "/server/news_app_function/fetchData?tablename=" + tablename, //Advanced I/O Functionを別の名前で初期化した場合は、news_app_functionをその名前に置き換えてください。
        type: "get",
        success: function (response) {
            var data = response;
            var i;
            document.getElementById("loader").style.display = "none";
            //Advanced I/O Functionからのレスポンスを解析し、ノードのリストを作成してHTMLページにレンダリングします
            for (i = 0; i < data.content.length; i++) {
                var list = document.getElementById('newsList');
                var anchor = document.createElement('a');
                var li = document.createElement('li');
                var linebreak = document.createElement("br");
                anchor.href = data.content[i][tablename].url;
                anchor.innerText = data.content[i][tablename].title;
                anchor.setAttribute('target', '_blank');
                li.appendChild(anchor);
                list.appendChild(li);
                list.appendChild(linebreak);
            }
        }, error: function (error) {
            alert(error.data);
        }
    });
}

```

> **Note**: Advanced I/O Functionに別の名前を選択した場合は、**10**行目の**news_app_function**をその名前に置き換えてください。

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

### 関数とクライアントの動作

アプリケーションの関数およびクライアントコンポーネントの動作を簡単に確認しましょう：

* 再帰Cronが指定された時間間隔（例：1時間ごと）で実行されるように設定され、Job Function `newsapp`に関連付けられると、1時間ごとに関数の実行が自動的に開始されます。

* http://newsapi.org/v2/top-headlines へのAPI呼び出しが行われ、ニュースヘッドラインが取得されます。このリクエストは、NewsAPIから取得したAPIキーを使用して認証されます。国の選択、APIキー、Data Store内の各テーブルに関連付けられたニュースカテゴリがクエリパラメータとして渡されます。

* `pushNewstoDatastore`メソッドは、API呼び出しから取得した`title`および`url`パラメータのデータをリストに挿入します。[ ZCQLクエリ](https://docs.catalyst.zoho.com/ja/cloud-scale/help/zcql/introduction)が各テーブルの行数を取得します。以前のNewsAPI呼び出しによってテーブルにデータが既に存在する場合、データは更新されたニュースアイテムに置き換えられます。行が存在しない場合は、新しいデータがテーブルにプッシュされます。

* クライアントコンポーネント`main.js`で定義されたスクリプトは、関数で定義されたルート`/fetchData`に`GET`リクエストを実行して、Advanced I/O FunctionへのAPI呼び出しを行います。テーブル名はリクエストURLに渡されます。

* Advanced I/O FunctionはData Store内の関連テーブルをクエリし、ニュースアイテムの`title`と`url`を取得します。これがJSONレスポンスとして構築され、`main.js`に返されます。

* `main.js`は関数から取得したJSONレスポンスを解析し、ノードのリストを作成してHTMLページにレンダリングします。