Catalyst

by Zoho
×
キャンセル

このページにアクセス
  • チュートリアル
  • FAQ
  • 開発者ツール
    CLI
    SDK
    Java Node.js Python Web Android iOS Flutter
    REST API
    ユーティリティ
    拡張機能 ツール インテグレーション
    • コンソールへ

    お知らせ：

    当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

    クライアントの設定

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

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

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

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

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

    index.html
    copy
    <!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>
    View more

    main.css
    copy
    .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);
}
}
    View more

    main.js
    copy
    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);
        }
    });
}
    View more

    注意: 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クエリが各テーブルの行数を取得します。以前の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ページにレンダリングします。

    最終更新日 2026-03-05 11:43:24 +0530 IST

    前へ

    次へ

    関連リンク

    クライアント Advanced I/O Function