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のコーディングを行います。

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

    以下のコードをコピーして、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 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);
}
}
    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 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);
        }
    });
}
    View more

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

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

    前へ

    次へ

    関連リンク

    クライアント Advanced I/O Function