Technology
Web・データ記述系技術（HTML／CSS／JSON／XML／JavaScript／PHP／Perl）
(Web・データきじゅつけいぎじゅつ)
Web・データ記述系技術とは、Web画面を構築したり、機器やシステムの間でデータを受け渡したりするために使用する言語・データ形式の総称です。
HTML、CSS、JavaScriptは主にブラウザへ表示する画面を構成し、PHPやPerlはサーバー側の処理に使用されます。JSONやXMLは、異なる機器やシステム間で情報を交換する際のデータ形式として利用されます。
ハカルプラスでは、Webサーバー上で動作する監視・管理システムのほか、SBCや組込み機器へWebサーバー機能を搭載し、パソコンやタブレットのブラウザから計測値や設備状態を確認できるシステムを開発しています。
各技術の主な役割
| 技術 | 主な役割 |
|---|---|
| HTML | 文章、見出し、表、入力欄など、Web画面の構造を記述する |
| CSS | 文字、配置、余白、画面サイズに応じた表示などを設定する |
| JavaScript | 画面更新、入力チェック、グラフ表示、サーバー通信などを行う |
| JSON | システム間でデータを受け渡すための軽量なデータ形式 |
| XML | 階層構造や属性を持つデータを記述する形式 |
| PHP | Webサーバー側でデータ処理、画面生成、データベース連携を行う |
| Perl | 文字列処理、ファイル変換、既存Webシステムの処理などを行う |
HTML・CSS・JavaScriptの役割
HTML
HTMLは、Webページの構造を記述するマークアップ言語です。見出し、文章、表、画像、リンク、入力フォームなどに意味を持たせ、ブラウザへ表示する情報の構成を定めます。
計測・制御システムでは、計測値一覧、設備状態、警報履歴、設定画面、実績検索画面などの構造を作るために使用します。
CSS
CSSは、HTMLで作成した画面の見た目や配置を設定します。文字サイズ、余白、表の幅、ボタン配置などを調整し、パソコンやタブレットなどの画面サイズに応じた表示にも対応できます。
設備監視画面では、見た目だけでなく、数値の読みやすさ、異常状態の識別、押し間違いの防止などを考慮して設計します。
JavaScript
JavaScriptは、主にブラウザ上で動作するプログラミング言語です。画面全体を再読込みせずに計測値を更新したり、グラフを描画したり、入力内容を確認したりできます。
- 計測値・設備状態の自動更新
- 設定値の範囲チェック
- 警報発生時の表示切替え
- グラフ・トレンド表示
- Web APIとのデータ通信
JavaScriptは画面表示や操作を担当します。設備の安全制御やインターロックは、PLCや安全回路側で成立させます。
JSONとXMLによるデータ連携
JSON
JSONは、項目名と値の組合せで情報を表現するデータ形式です。記述が比較的簡潔で、JavaScript、Python、C#、PHPなど多くの言語から扱えるため、Web APIやクラウド連携で広く使用されます。
例えば、機器番号、計測日時、重量、温度、電力、運転状態、警報コードなどをまとめて送受信できます。
XML
XMLは、タグを用いてデータの項目や階層構造を表現する形式です。JSONより記述量が多くなる傾向がありますが、複雑な階層、属性、文書構造を明確に表現できます。
既存の業務システム、機器設定ファイル、外部システムとのデータ交換などで使用されています。
JSONとXMLのどちらを使用するかは、接続先の仕様、既存資産、データ構造、検証方法などに応じて決定します。
データ仕様で決める項目
JSONやXMLでシステム連携する場合は、形式だけでなく、データの意味と扱いを明確にする必要があります。
- 項目名とデータ型
- 単位と小数点以下の桁数
- 日時形式とタイムゾーン
- 文字コード
- 必須項目と任意項目
- 正常・異常を示す状態コード
- 欠損値や未計測値の表現
- 仕様変更時のバージョン管理
送信側と受信側で単位や日時の解釈が異なると、通信自体は成功していても誤った実績が登録される可能性があります。
PHP・Perlによるサーバー側処理
PHP
PHPは、主にWebサーバー側で動作するプログラミング言語です。ブラウザから受け取った条件を処理し、データベースの検索、登録、更新、HTMLの生成などを行います。
- 計測データや実績の検索・表示
- 利用者認証と権限管理
- 設定値やマスター情報の登録
- データベースとの連携
- Web APIの構築
Perl
Perlは、文字列処理やファイル処理を得意とするプログラミング言語です。初期のWebシステムでは、CGIを利用したサーバー側処理に広く使用されました。
新規システムでは別の言語が選ばれることも多い一方、長期間稼働している設備や業務システムには、Perlで作成された処理が残っている場合があります。
既存システムを更新する場合は、ソースコード、実行環境、外部ライブラリ、文字コード、データベースなどを確認します。
Webシステムの基本構成
一般的なWebシステムは、ブラウザ、Webサーバー、アプリケーション、データベースによって構成されます。
- ブラウザがWebサーバーへ要求を送る
- サーバー側プログラムが要求内容を処理する
- 必要に応じてデータベースや計測機器から情報を取得する
- HTMLやJSONとして結果を返す
- ブラウザが画面を表示・更新する
専用アプリケーションを各パソコンへインストールせず、対応ブラウザから利用できることがWeb方式の利点です。
組込み機器へのWebサーバー搭載
計測機器、IoTゲートウェイ、SBCなどへWebサーバー機能を搭載し、同じネットワーク上のパソコンやタブレットから機器へアクセスする構成もあります。
- 現在値・設備状態の確認
- 通信条件や設定値の変更
- 警報・通信履歴の閲覧
- CSVファイルの取得
- 機器情報やソフトウェア版数の確認
専用ソフトが不要になる一方、組込み機器ではCPU、メモリ、ストレージに制約があります。大量のデータ処理や複雑な画面を機器内だけで行わず、必要に応じて上位サーバーと役割を分担します。
リアルタイム表示の考え方
ブラウザ画面へ計測値を表示する場合、一定周期でサーバーへ問い合わせる方法や、サーバーから更新情報を送る方法があります。
更新周期を短くすると表示の追従性は高まりますが、機器やネットワークの負荷も増加します。監視対象の変化速度や利用者数に応じて更新方法を決定します。
また、通信が途絶えた際に最後の受信値を現在値のように表示し続けないよう、受信時刻や通信異常を明示します。
通信異常とデータ再送
上位システムとの連携では、通信断、サーバー停止、タイムアウトなどを前提として設計します。
- 送信前のデータを一時保存する
- 復旧後に未送信データを再送する
- データ番号で重複登録を防止する
- 受信結果を応答として返す
- 通信履歴やエラー内容を記録する
単に同じデータを再送すると二重登録になる可能性があります。送信元と受信先の双方で、データを一意に判別できる番号を管理します。
セキュリティ上の注意点
Webシステムには、不正アクセス、情報漏えい、設定改ざんなどへの対策が必要です。
- HTTPSによる通信の暗号化
- 利用者認証と権限管理
- 入力値やアップロードファイルの検証
- 不要な機能・通信ポートの停止
- パスワードや認証情報の適切な管理
- 操作履歴・通信履歴の保存
- OSやライブラリの更新管理
- 設備ネットワークと外部ネットワークの分離
組込み機器のWeb画面をインターネットへ直接公開することは避け、VPN、ファイアウォール、接続元制限などを含めて構成します。
既存Webシステムの更新
長期間稼働しているWebシステムでは、古いPHPやPerl、対応が終了したブラウザ、旧式のデータベースが使用されている場合があります。
更新時は、画面だけでなく、データ形式、文字コード、外部システムとの通信、帳票、利用者権限などを確認します。
新しい環境へ単純に移すのではなく、現在利用されている機能と不要になった機能を整理し、保守しやすい構成へ見直します。
ハカルプラスの対応
ハカルプラスでは、Webサーバー、組込み機器、PLC、計測機器、FAパソコン、データベースを組み合わせた監視・管理システムを構築しています。
HTML、CSS、JavaScriptによる画面、JSON・XMLによるデータ連携、PHP・Perlなどによるサーバー側処理、組込み機器へのWebサーバー搭載、既存Webシステムの改修などに対応します。
Web技術だけでなく、計測、機器通信、データ保存、PLC制御、基幹システム連携まで含め、現場から上位システムまでをつなぐ構成を検討します。
よくある質問
Q. ブラウザを閉じても計測データの収集は続きますか？
A. サーバーや組込み機器側でデータを収集する構成であれば、ブラウザを閉じても収集を継続できます。ブラウザだけで処理している場合は継続できないため、役割分担を明確にします。
Q. 通信が切れた場合、画面にはどのように表示されますか？
A. 最終受信時刻、通信異常、データ更新停止などを表示し、古い値を現在値と誤認しないようにします。
Q. JSONの項目を後から追加できますか？
A. 追加できますが、受信側が未知の項目を無視できるか確認が必要です。既存システムへの影響を抑えるため、仕様のバージョン管理を行います。
Q. Web画面から設備を操作できますか？
A. 指令をPLCへ送る構成は可能ですが、安全条件、権限、二重操作防止、通信断時の動作を設計する必要があります。安全制御はPLCや安全回路側で成立させます。
Q. 古いPHPやPerlのシステムを新しい環境へ移行できますか？
A. ソースコード、ライブラリ、データベース、文字コード、外部連携を確認し、改修または再構築を検討します。既存環境と一定期間並行運用する場合もあります。