0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (6)

Posted at

PLCからゲートウェイでデータを取得し、データベースにJSONで保存します。複数回に分けて、サンプルを用いて解説します。
前回は、PLCから取得したデータをデータベースに保存しました。

PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (5)

タイトルに書かれたテーマは前回で完了しています。完了していますが、これでは何か物足りないと感じ、今回はデータベースに次々と書かれるPLCからのデータをブラウザに表示してみます。
e6061bc3683ceff53f53e09554a0288e62dbf2a4188d4.png

WEBアプリケーション

データベースのデータをWEBブラウザに表示するために、WEBアプリケーションをサーバ上に作成します。このサンプルでは、WEBアプリケーションはPHPスクリプトで実装します。

いよいよ図が窮屈になってきました。これ以上に窮屈な図は、もはや理解容易性の面で逆効果です。正確さと理解容易性は、ある時点以後、反比例します。
a96212b429a0ca11f28e750801258aea62dbf49dd5ca8.png
PHPである必要はありません。では、このサンプルを何故にPHPスクリプトで実装するのか?それは、そこ(私の開発環境)にPHPが稼働していたから。

PHPの準備についてはここでは解説しません。PHPの準備についての解説は、他の記事にお任せします。PHPスクリプトでのMySQLアクセスについても、他の記事にお任せします。

HTMLとPHPスクリプト、そしてJavaScript

結果的には、サーバ・サイドはPHPスクリプトのみではなく、以下の3つのファイルで構成してみました。

  • HTML
  • PHPスクリプト
  • JavaScript

3つめの JavaScript は jQuery です。jQuery は一般に配布されているとても便利なライブラリです。jQuery を利用することにより、とても高機能なWEBアプリケーションを短期間で実装することができます。jQuery の解説も他の記事にお任せします。

以下がサンプルです。

index.htm

<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>Sample</title>
  <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    function count_update() {
      $.ajax({
        url:"index.php",
        method:"POST",
        success:function(data) {
          $('#count').html(data);
        }
      });
    }
    $(function() {
      setInterval (
        function() {
          count_update();
        },
        1000
      );
    });
  </script>
</head>
<body>
  count: <div id="count" style="display: inline-block;">count</div>
</body>
</html>

index.php

<?php
  try {
    $dbh = new PDO('mysql:dbname=hoge;host=localhost;charset=utf8;'
    , 'hoge'
    , 'hoge001');
  } catch (PDOException $e) {
    echo "Can't connect to database: " . $e->getMessage() . "\n";
    exit();
  }

  $sql = "SELECT JSON_EXTRACT(body, '$.value') AS count FROM from_plc ORDER BY time_insert DESC";
  $res= $dbh->query($sql);
  foreach($res as $value) {
    echo $value['count'];
    break;
  }
?>

jQuery の実態は、HTML中で参照されている、jquery-3.6.0.min.js です。
HTML中には、jQueryを呼び出すオリジナルのJavaScriptスクリプトを書きました。
いずれもコードの解説はいたしません。

WEBブラウザでアクセスしてみる

WEBブラウザで上記の index.htm を参照すると以下ようになります。
104c32d7402ec5f8908cc9021b18f35162dbfdbf6b841.png
数字は、データベース上のテーブルが更新される都度変化してます。(正確には、JSONの要素"value"の値が変化してから1秒以内に、ブラウザの表示も変化します)

最後に

ここまでサンプルとして実装したシステムを応用すると、工場の機器により製造される製品の生産数を、ほぼリアルタイムに画面表示する、といったシステムを構築することができます。
勘違いしていただきたくないのは、この記事で示したサンプルはあくまでもサンプルであって、基盤となるミドルウェアやプロトコル、プログラム言語は、この記事のサンプルで使用したものである必要はありません。もし、この記事で取り上げたような、PLCからデータを取得し、これを処理するようなシステムを設計・構築する場合は、この記事の内容にとらわれず、それぞれの環境、条件、実現したい機能などに応じて、最適なハードウェア、ミドルウェア、プロトコル、プログラム言語、そしてアーキテクチャを想像し選択してください。

実はこのアーキテクチャを想像する、というのが設計者にとって最も楽しく重要な工程なのです。実装のテクニックなどは、アーキテクチャの上に成立する技術であって、アーキテクチャがイマイチなシステムは、おそらく実装もへんてこりんになってしまったり、どこかアンバランスなものになってしまうものです。

PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (1)
PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (2)
PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (3)
PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (4)
PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (5)

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?