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

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

[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (5)](https://qiita.com/COOLMAGICPRODU1/items/92724b0908143275cfac)

タイトルに書かれたテーマは前回で完了しています。完了していますが、これでは何か物足りないと感じ、今回はデータベースに次々と書かれるPLCからのデータをブラウザに表示してみます。
![e6061bc3683ceff53f53e09554a0288e62dbf2a4188d4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/050d04b5-125b-4651-b5ef-77be2d9eb1d7.png)
## WEBアプリケーション
データベースのデータをWEBブラウザに表示するために、WEBアプリケーションをサーバ上に作成します。このサンプルでは、WEBアプリケーションはPHPスクリプトで実装します。

いよいよ図が窮屈になってきました。これ以上に窮屈な図は、もはや理解容易性の面で逆効果です。正確さと理解容易性は、ある時点以後、反比例します。
![a96212b429a0ca11f28e750801258aea62dbf49dd5ca8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/4c414fb4-e866-6f81-14c0-f8a8e1f7dd69.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
<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
<?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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2737842/9e197848-502f-6a49-2b23-fbfb4c378588.png)
数字は、データベース上のテーブルが更新される都度変化してます。（正確には、JSONの要素"value"の値が変化してから1秒以内に、ブラウザの表示も変化します）
## 最後に
ここまでサンプルとして実装したシステムを応用すると、工場の機器により製造される製品の生産数を、ほぼリアルタイムに画面表示する、といったシステムを構築することができます。
勘違いしていただきたくないのは、この記事で示したサンプルはあくまでもサンプルであって、基盤となるミドルウェアやプロトコル、プログラム言語は、この記事のサンプルで使用したものである必要はありません。もし、この記事で取り上げたような、PLCからデータを取得し、これを処理するようなシステムを設計・構築する場合は、この記事の内容にとらわれず、それぞれの環境、条件、実現したい機能などに応じて、最適なハードウェア、ミドルウェア、プロトコル、プログラム言語、そしてアーキテクチャを想像し選択してください。
> 実はこのアーキテクチャを想像する、というのが設計者にとって最も楽しく重要な工程なのです。実装のテクニックなどは、アーキテクチャの上に成立する技術であって、アーキテクチャがイマイチなシステムは、おそらく実装もへんてこりんになってしまったり、どこかアンバランスなものになってしまうものです。

[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (1)](https://qiita.com/COOLMAGICPRODU1/items/31513295943763365915)
[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (2)](https://qiita.com/COOLMAGICPRODU1/items/370b1bd37dca8a4fd9ae)
[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (3)](https://qiita.com/COOLMAGICPRODU1/items/08891c828736428c1b5c)
[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (4)](https://qiita.com/COOLMAGICPRODU1/items/449f206bbdf07c8e491b)
[PLCからゲートウェイでデータを取得しデータベースにJSONで保存 (5)](https://qiita.com/COOLMAGICPRODU1/items/92724b0908143275cfac)