主要なアプローチ

FactoryTalk® Optix™
 アプリケーションを最適化するには、パフォーマンス、保守性、明瞭さのバランスを慎重に取る必要があります。このドキュメントでは、このバランスを実現するための主要なアプローチについて、次のように説明します。
  • アプローチのタイプ
  • アプローチのユースケース
  • 各アプローチを効率的に実装する方法
これらの概念は、もともと Web デザインやクロスプラットフォームアプリケーションの世界から生まれたものですが、現在では、同じアプリケーションをまったく異なるデバイスに表示できる産業用 HMI では不可欠です。
  • スケーラブル アプローチ:
     インターフェイスのスケーラブル アプローチは、デバイスの解像度に関係なく、レイアウト、配置、および読みやすさを維持しながら、比例してサイズを変更することで構成されます。
    例: 1920×1080 で設計され、1280×720 または 3840×2160 にも正しく適合するレイアウト。
  • アダプティブ アプローチ:
     インターフェイスのアダプティブ アプローチは、デバイスまたは解像度に基づいてレイアウトを調整し、それに応じてさまざまな構造をロードすることで構成されます。
    例: タブレットではコンパクトに見え、産業用パネル PC では展開されたダッシュボード。
  • レスポンシブ アプローチ:
     インターフェイスのレスポンシブ アプローチは、ページを切り替えることなく、利用可能なスペースに応じてリアルタイムでコンテンツを再配置します。
    例: ウィンドウのサイズ変更に伴って 4 列から 2 列へと変化するグリッド。

各アプローチを使用するタイミング

次の表に、各インターフェイスシナリオで推奨されるアプローチを示します。
シナリオ
推奨されるアプローチ
実装手順
解像度は異なりますが、レイアウトは同じです
スケーラブル
各デバイスに最適化されたレイアウト
アダプティブ
同じページ内で柔軟なレイアウト
レスポンシブ

スケーラブルなアプローチを実装する

コンテナの配置プロパティを使用して、
FactoryTalk® Optix™
 のスケーラビリティを簡単に実現できます。
例えば、ヘッダーを作成するには、
[パネル]
 オブジェクトを使用し、その水平方向の配置を
[ストレッチ]
 に設定します。これにより、最終的な解像度に関係なく、オブジェクトは利用可能な幅全体に広がります。
重要:
コンテナ オブジェクトに固定サイズを割り当てると、インターフェイスが異なる画面解像度間でスケーリングされなくなります。必要な場合のみ固定サイズを割り当ててください。
サイズ
結果
800px
1280px
ヒント: コンテナの配置を
[ストレッチ]
 に設定して、解像度に基づく自動スペース分散を許可します。アプリケーションが固定解像度で開発されている場合でも、要素はランタイムにコンテナに適応するようにスケーリングされます。
サイズ
結果
800px
1280px

アダプティブ アプローチを実装する

1920x1080 や 480x272 など、さまざまな解像度でデザインする場合は、個別のレイアウトを作成する必要があります。
[パネルローダーコントロール]
 を使用して、解像度に基づいてさまざまなレイアウトを動的にロードします。
画面の解像度を決定するには、
[幅]
 および
[高さ]
 プロパティを
[MainWindow]
 の中で使用します。これらのプロパティの
[モデリングルールの変更]
 を
[必須]
 に設定して、これらの値がランタイムで利用できるようにします。
重要:
[モデリングルールの変更]
 機能の使用は、上級ユーザーのみを対象としています。この機能は、
[FactoryTalk Optix Studio オプション]
 パネルで
[詳細モード]
 をアクティブ化した場合のみ表示できます。
予期しない動作を防ぐため、この機能の使用をこの特定のスコープに制限してください。
ヒント: 計算した値は、
[MainWindow]
 内のヘルパー変数に格納するのが良い方法です。特に、複数箇所で利用する場合に便利です。これにより、複数のコンバータで構成される
[複雑なダイナミックリンク]
 の繰り返しが避けられ、ノード数の削減やパフォーマンスの向上が可能です。

レスポンシブ アプローチを実装する

[パネルローダー]
 の使用に加え、条件付き表示はレスポンシブ デザインの要です。例えば、サイドメニューは特定の画面幅よりも大きい場合のみ表示され、切り替えボタンはそのしきい値よりも小さい場合に表示されます。
[グリッドレイアウト]
 は、コンテンツを動的に配置するために不可欠です。行数と列数を定義できます。
[垂直方向レイアウト]
 と
[水平方向レイアウト]
 機能は、
[プロパティ]
 パネルで
[ラッピング]
 属性を
[アクティブ]
 に設定して使用できます。
警告: これにより、レイアウトがオーバーフローする場合があります。その場合、
[グリッドレイアウト]
 を
[スクロールビュー]
 でラップして、完全な可視性を保ちます。
ヒント: 「グリッドレイアウトの構成」を参照してください。
ご質問やご意見
このドキュメントに関するご質問やご意見は、こちらまでお寄せください。 こちらからご意見をお寄せください。
Normal