---
title: "クライアントの設定"
url: https://docs.catalyst.zoho.com/ja/tutorials/newsapp/python/configure-client/
description: "Catalyst Job Scheduling Cronコンポーネントと、PythonでコーディングされたJob FunctionおよびAdvanced I/O関数を使用して、サードパーティサービスから定期的にニュースを自動取得する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`のコーディングを行います。

> **注意**: このセクションのコードを十分に理解してください。

以下のコードをコピーし、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、position！ */
    position: absolute;
    left: 50%;
    top: 50%;
  }
  
  @-webkit-keyframes rotate {
    /* 時計回りの100%キーフレーム。
       反時計回りの場合は0%を使用 */
    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関数にAPIコールを行い、特定のテーブルからニュース項目を取得します
    $.ajax({
        url: "/server/news_app_function/fetchData?tablename=" + tablename, // Advanced I/O関数を別の名前で初期化した場合は、news_app_functionをその名前に置き換えてください。
        type: "get",
        success: function (response) {
            var data = response;
            var i;
            document.getElementById("loader").style.display = "none";
            // Advanced I/O関数からのレスポンスを解析し、ノードのリストを作成して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);
        }
    });
}

```

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

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

### ファンクションとクライアントの動作

アプリケーションのファンクションとクライアントコンポーネントの動作を簡単に確認しましょう:

* 再帰的なCronが、指定された時間間隔（例えば1時間ごと）で実行されるように設定され、Job Function `NewsApp`に関連付けられると、1時間ごとにファンクションの実行を自動的に開始します。

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

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

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

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

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