Web・データ記述系技術（HTML／CSS／JSON／XML／JavaScript／PHP／Perl）

トップ事業紹介ハカルの技術辞典Web・データ記述系技術（HTML／CSS／JSON／XML／JavaScript／PHP／Perl）

Technology

Web・データ記述系技術（HTML／CSS／JSON／XML／JavaScript／PHP／Perl）

(Web・データきじゅつけいぎじゅつ)

Web・データ記述系技術とは、WebページやWebアプリケーションを構築したり、システム間でデータを受け渡したりするために使用する言語・データ形式の総称です。

HTML、CSS、JavaScriptは主にブラウザへ表示する画面を構成し、PHPやPerlはサーバー側の処理に利用されます。JSONやXMLは、機器やシステム間で情報を交換する際のデータ記述形式として使用されます。

それぞれは役割の異なる技術ですが、相互に組み合わせることで、設備監視画面、データ閲覧システム、設定画面、Web API、上位システム連携などを実現できます。

ハカルプラスでは、Webサーバー上で動作する監視・管理システムのほか、組込み機器やSBCへWebサーバー機能を搭載し、パソコンやタブレットのブラウザから計測値や機器状態を確認できる製品・システムの開発実績があります。

各技術の主な役割

技術	主な役割
HTML	Web画面の文章・見出し・表・入力欄などの構造を記述する
CSS	文字、色、配置、画面サイズへの対応など、表示デザインを設定する
JavaScript	画面の更新、入力チェック、グラフ表示、サーバーとの非同期通信などを行う
JSON	システム間でデータを受け渡すための軽量なデータ形式
XML	階層構造を持つデータや設定情報を記述するデータ形式
PHP	Webサーバー側でデータ処理、画面生成、データベース連携などを行う
Perl	文字列処理、ファイル処理、既存Webシステムのサーバー側処理などを行う

HTML

HTMLは「HyperText Markup Language」の略で、Webページの構造を記述するためのマークアップ言語です。

見出し、文章、表、画像、リンク、入力フォームなどに意味を持たせ、ブラウザへどのような情報を表示するかを定義します。

計測・制御システムでは、次のような画面を構成する際に使用します。

計測値・設備状態の一覧
警報・異常履歴の表示
設定値の入力画面
運転実績・計量実績の検索画面
機器情報や通信状態の確認画面

CSS

CSSは「Cascading Style Sheets」の略で、HTMLで構成した画面のデザインや配置を指定するための技術です。

文字サイズ、背景、余白、表の幅、ボタンの配置などを設定できます。また、パソコン、タブレット、スマートフォンなど、画面サイズに応じて表示を調整するレスポンシブ対応にも利用されます。

産業用の監視画面では、デザイン性だけでなく、数値の見やすさ、異常状態の判別、誤操作の防止などを考慮して設計します。

JavaScript

JavaScriptは、Webブラウザ上で動作するプログラミング言語です。

HTMLとCSSだけでは固定的な表示が中心となりますが、JavaScriptを利用すると、画面を再読込みせずに計測値を更新したり、グラフを描画したりできます。

主な用途には、次のものがあります。

計測値や設備状態の自動更新
入力値・設定範囲のチェック
警報発生時の表示切替え
グラフ・トレンド表示
画面部品の表示・非表示
Web APIとのデータ通信

ブラウザ上の表示処理を担当するため、PLCなどによる設備制御とは役割を分けて設計します。

JSON

JSONは「JavaScript Object Notation」の略で、データを項目名と値の組合せで表現する記述形式です。

構造が比較的簡潔で、人が読みやすく、JavaScript、Python、C#、PHPなど多くの言語で扱えるため、現在のWeb APIやクラウド連携で広く利用されています。

例えば、次のような情報をJSON形式で受け渡します。

機器番号
計測日時
重量・温度・電力などの計測値
運転・停止・警報などの状態
設定値や通信条件

XML

XMLは「Extensible Markup Language」の略で、データの項目や階層構造をタグによって表現する記述形式です。

JSONより記述量が多くなる傾向がありますが、複雑な階層構造、属性情報、文書構造を明確に表現できます。

既存の業務システム、機器設定ファイル、外部システムとのデータ交換などで使用されます。

JSONとXMLのどちらを利用するかは、接続先の仕様、データ構造、既存資産、必要な検証方法などによって決定します。

PHP

PHPは、主にWebサーバー側で動作するプログラミング言語です。

ブラウザから受け取った条件に応じてデータベースを検索し、HTMLを生成したり、登録・更新処理を行ったりできます。

計測・制御分野では、次のような用途に利用できます。

計測データの検索・表示
ユーザー認証・権限管理
設定値の登録・変更
実績データの帳票出力
データベースとの連携
Web APIの構築

Perl

Perlは、文字列処理、ファイル処理、テキストデータの変換などを得意とするプログラミング言語です。

初期のWebシステムではCGIプログラムの開発に広く利用されました。現在、新規のWebシステムでは別の言語が選ばれることも多い一方、既存設備や長期間運用されているシステムでは、Perlで構築された処理が残っている場合があります。

既存システムを更新する際は、現在の動作環境、使用しているライブラリ、文字コード、データ形式などを確認します。

Webシステムの基本構成

一般的なWebシステムは、ブラウザ、Webサーバー、アプリケーション、データベースなどによって構成されます。

ブラウザがHTTPまたはHTTPSでWebサーバーへ接続する
サーバー側のプログラムが要求内容を処理する
必要に応じてデータベースや計測機器から情報を取得する
HTML、JSONなどの形式でブラウザへ結果を返す
ブラウザがHTML、CSS、JavaScriptを使って画面を表示する

Web方式では、利用者側のパソコンへ専用ソフトウェアをインストールせず、対応ブラウザから利用できることが特長です。

組込み機器へのWebサーバー搭載

専用サーバーだけでなく、計測機器、IoTゲートウェイ、SBCなどへWebサーバー機能を組み込むこともできます。

機器と同じネットワークへ接続したパソコンやタブレットから、ブラウザを使って次のような操作を行えます。

現在の計測値・設備状態の確認
機器設定・通信設定の変更
警報・通信履歴の閲覧
CSVファイルの取得
機器情報・ソフトウェア版数の確認

専用アプリケーションが不要になる一方、組込み機器ではCPU、メモリ、ストレージの容量が限られるため、画面や処理を軽量に設計する必要があります。

計測・制御システムでの活用

Web・データ記述系技術を利用することで、計測機器やPLCから取得した情報を、利用者が分かりやすい形で表示・活用できます。

代表的な用途には、次のものがあります。

設備の遠隔監視
計測値・計量実績の見える化
警報・異常履歴の確認
設定値・品種情報の管理
日報・月報・グラフの表示
上位システム・クラウドとのデータ連携
複数拠点の情報の一元管理

ただし、Web画面から設備を操作する場合でも、安全に関係する制御やインターロックはPLCや安全回路側で構成します。

システム間のデータ連携

JSONやXMLは、Web画面だけでなく、異なるシステム間でデータを交換する際にも利用されます。

例えば、計測システムから生産管理システムへ実績を送信したり、基幹システムから製造指示や品種情報を受信したりできます。

連携時には、次の内容を明確にします。

項目名・データ型・単位
日時の形式とタイムゾーン
文字コード
必須項目・任意項目
通信失敗時の再送方法
重複データの判定方法
仕様変更時の互換性

セキュリティ上の注意点

Webシステムをネットワークへ接続する場合は、不正アクセス、情報漏えい、改ざんなどへの対策が必要です。

HTTPSによる通信の暗号化
利用者認証と権限管理
入力値の検証
不要な通信ポートや機能の停止
パスワード・認証情報の適切な管理
操作履歴・通信履歴の保存
OS、ライブラリ、Webサーバーの更新
設備ネットワークと外部ネットワークの分離

特に、既設の組込み機器を外部ネットワークへ直接公開することは避け、ルーター、VPN、ファイアウォールなどを含めて接続方法を検討します。

ハカルプラスの対応

ハカルプラスでは、Webサーバー、組込み機器、PLC、計測機器、FAパソコン、データベースなどを組み合わせたシステムを構築しています。

主な対応内容には、次のものがあります。

HTML・CSS・JavaScriptによる監視・設定画面
JSON・XMLを利用したデータ連携
PHP・Perlなどによるサーバー側処理
計測値・実績データの検索・表示
PLC・計測機器からのデータ収集
組込み機器へのWebサーバー機能搭載
データベース・基幹システムとの連携
既存Webシステムの改修・更新

Web技術だけでなく、機器通信、制御、データ保存まで含め、現場から上位システムまでをつなぐ仕組みを設計します。

よくある質問

Q. HTML、CSS、JavaScriptの違いは何ですか？

A. HTMLは画面の構造、CSSは見た目や配置、JavaScriptは画面の動作やデータ更新を担当します。

Q. JSONとXMLは何が違いますか？

A. JSONは比較的簡潔でWeb APIに多く利用されます。XMLはタグを使って複雑な階層や属性を表現できます。

Q. PHPとJavaScriptは同じ役割ですか？

A. 一般にJavaScriptはブラウザ側、PHPはWebサーバー側で動作します。ただし、システム構成によって役割は異なります。

Q. 専用ソフトをインストールせずに設備を監視できますか？

A. 機器またはサーバーへWeb機能を搭載すれば、対応ブラウザから監視できるシステムを構築できます。

Q. Web画面からPLCを操作できますか？

A. システム構成によって可能ですが、安全に関係する制御はPLCや安全回路側で成立させる必要があります。

Q. 既存のPerlやPHPシステムを更新できますか？

A. ソースコード、実行環境、データベース、外部ライブラリなどを確認し、改修または新しい環境への移行を検討します。

Q. JSONで計測データを上位システムへ送れますか？

A. 上位システムと項目、形式、通信方法を取り決めることで、計測値や設備状態をJSON形式で連携できます。

Q. ハカルプラスでは組込み機器のWeb画面も開発できますか？

A. 機器の処理能力や通信仕様を確認し、Webサーバー機能、監視画面、設定画面、データ出力まで含めて検討できます。