メインコンテンツまでスキップ

応答データをHTMLに表示

PLCの応答データをHTMLに表示します。PLCの応答データはJSONオブジェクトで取得できます。受信したJSONオブジェクトを調べてHTMLに表示します。

名称デバイス名データ
タイマ0D01000
タイマ1D12000
タイマ2D23000
タイマ3D34000
カウンタ0C010000
注記

HTMLの表 (table) を使うとJavaScriptが複雑になるので、CSSのDataGridを使用して見た目を整えます。 表形式のデータはHTMLのtable要素を使用すると、アクセシビリティが向上します。通常はtable要素を使用した方が良いでしょう。

ひな形のHTML/CSS (project_template)​

HTMLファイル (deviceReadTest.html) とCSSファイル (deviceRead.css) をCodePenで確認しましょう。

サンプル

ダミーデータで表の更新 (project_dummy)​

「読み出し」ボタンをクリックすると、あらかじめ設定しているデータを「データ」列に設定します。

読み出し画面（ダミーデータ）

html -> body の中にscriptタグを追加して、JavaScriptを記述します。 JavaScriptでデータ列のオブジェクトを取得します。

const d0 = document.querySelector("#d0");
const d1 = document.querySelector("#d1");
const d2 = document.querySelector("#d2");
const d3 = document.querySelector("#d3");
const d100 = document.querySelector("#d100");
const send = document.querySelector("#send");

ループで処理しやすいようにオブジェクトの配列にします。

const dataObjs = [d0, d1, d2, d3, d100];

ダミーの応答データを準備します。FX5の応答と同じデータ形式にします。

const responseJson = {
    RET: "0000",
    DATA: ["001E", "001E", "0032", "0032", "0064"],
};

PLCの応答データは16進数の文字列なので、10進数の文字列に変換する関数を作成します。10進数の文字の桁数を指定して、不足するときは先頭に0を付けます。

function hexToDecimalPadded(hexStr, digit) {
    const decimal = parseInt(hexStr, 16);
    return decimal.toString().padStart(digit, '0');
}
注記

PLCは16bitなので、「符号あり」は-32768から32767で、「符号なし」は0～65535です。PLCはダブルワードの値を扱うこともできます。ダブルワードを扱うときは桁数を増やします。

ボタンが押されたときのイベントリスナーを登録します。ダミーデータを10進数に変換して、HTMLの指定された場所に設定します。

send.addEventListener("click", () => {
    for (let i = 0; i < dataObjs.length; i++) {
        const dataObj = dataObjs[i];
        const responseData = hexToDecimalPadded(responseJson.DATA[i], 5);
        dataObj.textContent = responseData;
    }
});

完成したファイルは (deviceRead_dummy.html) です。

実際の応答データで表を更新 (project_read)​

これまで学習した内容を組み合わせて、PLCに要求を送信し、応答データで表を更新します。

scriptタグの上に、前の章の練習問題で作成したdeviceRead.jsの読み込みを追加します。

<script src="deviceRead.js"></script>

deviceRead.js定義された2つの関数でPLCからデータを読み出します。

  • createQueryParams(list) : 引数のオブジェクトからクエリパラメータを作成
  • sendQueryParams(ip, path, params) : PLCにクエリパラメータを送信

「送信」ボタンが押されたときの処理（イベントリスナー）を修正します。

連打対策

イベントリスナーの処理が完了する前に、連続で押されることを防止する機能を実装しています。

let sending = false; // 連打対策フラグ

send.addEventListener("click", async () => {
    if (sending) return; // 連打のときは何もしない

    sending = true; // 送信中
    send.disabled = true; // 送信中は「送信」ボタンを無効

    // TODO: requestDeviceはdeviceRead.jsに含めない!
    const params = createQueryParams(requestDevice); // クエリパラメータを生成
    // TODO: plcIPAddress、cgiPathはdeviceRead.jsに含めない!
    const responseJson = await sendQueryParams(plcIPAddress, cgiPath, params); // 要求を送信
    if (!responseJson) {
        console.warn("応答が受信できません。");
    } else {
        for (let i = 0; i < dataObjs.length; i++) {
            const dataObj = dataObjs[i];
            const responseData = hexToDecimalPadded(responseJson.DATA[i], 5);
            dataObj.textContent = responseData;
        }
    }
    send.disabled = false; // 送信ボタンを有効
    sending = false; // 送信完了
});

index.htmlも修正します。次の行をulタグ内に追加します。

<li><a href="deviceRead2.html">読出しテスト</a></li>

修正したファイルをPLCに転送します。実行して動作を確認してください。

完成したファイルは (deviceRead.html) です。