外部HMIの埋め込み
多くの産業機械は、ローカルWebサーバーを通じて独自のHMI（ヒューマン・マシン・インターフェース）を提供しています。このガイドでは、Embedウィジェット、nginxリバースプロキシ、リモートアクセストンネルを使用して、これらのHMIをIronFlock UIからアクセス可能にする方法を説明します。
基本例：単一マシン
最もシンプルなケースは、エッジデバイスのローカルネットワークからHMI Webサーバーに到達可能な単一のCNCマシン（またはPLC、カメラなど）です — 例えば 192.168.1.50:8080。
1. マシンアドレスをアプリパラメータとして設定
アプリパラメータを使用して、ユーザーがマシンのローカルHMIアドレス（例：192.168.1.50:8080）を設定できるようにします。これにより、アドレスはハードコードされず、デバイスインストールごとに設定できます。
2. エッジコードにnginxリバースプロキシを追加
アプリのDockerセットアップに、設定されたマシンアドレスを読み取り、エッジデバイスの固定ポート（例：localhost:3000）に転送するシンプルなnginxコンテナを含めます。エッジコードはアプリパラメータを読み取り、それに応じてnginxを設定します。
3. ポートテンプレートで固定ポートを定義
ポートテンプレートで、nginxがリッスンするポートを宣言します：
# .ironflock/port-template.yml
ports:
- name: CNC Machine HMI
port: 3000
main: falseポートは固定（動的に割り当てられない）でなければなりません。リモートアクセスポートは実行時に追加できず、リリース時に定義され、インストールごとに設定されるためです。
port-template.ymlでポートを宣言することで、プロジェクト管理者はアプリ設定でCNCマシンへのリモートアクセスを有効または無効にできます。アプリがデバイスに初めてインストールされる際、ユーザーはインストール設定でこのポートへのリモートアクセスを明示的に許可する必要があります。これはセキュリティ機能です — リモートアクセスはデフォルトでは有効になっていません。
HMIにアクセスするユーザーはローカルのノートPCにいて、エッジデバイスのネットワーク上にはいないため、ここではリモートアクセスが必要です。IronFlockのトンネル技術は、ユーザーのブラウザからエッジデバイスの転送ポートまでの安全な接続を作成します。
4. ボードにEmbedウィジェットを追加
UI Builderで、デバイスのリモートアクセストンネルアドレスのポート3000を指すEmbedウィジェットを追加します。CNCマシンの元のHMIがIronFlockボード内に直接表示されます。
この基本的なセットアップにより、デバイスごとに単一マシンのHMIへのリモートアクセスが可能になります — VPNもファイアウォール変更も不要です。
応用：デバイスあたり複数のマシン
エッジデバイスが複数のマシンに接続されている場合、パスベースルーティングを使用して、すべてのHMIを単一の転送ポートで提供するようにパターンを拡張できます。
1. データバックエンドテーブルにマシンアドレスを保存
データバックエンドに、ローカルWebサーバーアドレスと転送パスを含む各マシンの詳細を追跡するテーブルを追加します：
# .ironflock/data-template.yml
data:
tables:
- tablename: machines
maintainLatestFlagFor: ['machine_id']
columns:
- id: tsp
dataType: timestamp
- id: machine_id
dataType: string
- id: name
dataType: string
- id: local_hmi_address
dataType: string
- id: forwarded_hmi_path
dataType: string2. nginxで複数のマシンをルーティング
nginxを設定して、同じ固定ポートの下で各マシンを別々のパスでリバースプロキシします。例えば、192.168.1.50:8080をlocalhost:3000/cnc1/に、192.168.1.51:8080をlocalhost:3000/cnc2/に転送します。これらの転送パスをmachinesテーブルに保存し、ボードが各HMIの場所を把握できるようにします。
基本例と同じ固定ポートとポートテンプレートが適用されます — 1つのポートが異なるパスですべてのマシンに対応します。
3. ページベースナビゲーション付きEmbedウィジェットを追加
UI Builderで、各マシンのHMI用に別々のボードページを作成し、各ページにmachinesテーブルからforwarded_hmi_pathを読み取ってEmbed URLとして使用するEmbedウィジェットを追加します。
ユーザーがHMI間を切り替えられるように、ページ＆ナビゲーション機能を使用します。接続されたすべてのマシンを縦型サイドバーメニューとして一覧表示するサイドナビゲーションウィジェットを追加します。サイドバーの項目はmachinesテーブルから動的に生成でき、新しいマシンが自動的に表示されます。ユーザーがマシン名をクリックすると、ボードが対応するページに移動し、そのページのEmbedウィジェットが正しいHMIを読み込みます。
結果
ユーザーはボード内のすべての接続されたマシンを閲覧し、1つを選択して、IronFlock内で直接元のHMIと対話できます — VPN、別のブラウザタブ、ファイアウォール設定は不要です。Embedウィジェット、データバックエンド、リモートアクセストンネルが連携して、マシンフリート全体の統合された安全な制御画面を構築します。