スタイリング & テーマ

IronFlockのすべてのボードにはデフォルトの外観が用意されていますが、その見た目を完全にコントロールできます。ダッシュボードのスタイル設定では、テーマの適用、グリッドレイアウトの調整、ウィジェットの外観制御を、1つの設定パネルからすべて行えます。個別のウィジェットに異なる外観が必要な場合は、ウィジェットエディタでグローバルスタイルを直接オーバーライドできます。

テーマ

テーマは、ワンクリックでボード全体の視覚的なトーンを設定します。IronFlockには組み込みテーマのセットが用意されており、各テーマはダッシュボード全体に適用される色、背景、スタイリングのデフォルトの統一されたパレットを定義しています。

テーマを適用するには：

1. Board Settingsパネルを開きます（上部ツールバーの歯車アイコン）。
2. Themeセクションに移動します。
3. リストからテーマを選択します。

すべてのウィジェット、背景、テキストカラーが選択したテーマに合わせて即座に更新されます。

テーマは出発点であり、固定された選択ではありません。テーマを選択した後、個々の設定（色、枠線、背景）をオーバーライドでき、それらのオーバーライドがテーマのデフォルトよりも優先されます。

レイアウト

ボードキャンバスには、ウィジェットの配置方法、異なる画面サイズでのキャンバスの動作、ボードのスクロールまたはスケーリングを制御するいくつかのレイアウトプロパティがあります。これらのプロパティが連携してダッシュボードの空間的な動作を定義します。

Grid Snap

Grid Snapが有効な場合、ウィジェットは配置または移動時に最も近いグリッドセルにスナップします。グリッドはキャンバスを行と列のマトリックスに分割し、ウィジェットは常にセルの境界に揃えられるため、レイアウトが構造的で整然としたものになります。

Grid Snapが無効な場合、ウィジェットはキャンバス上のどこにでもピクセル単位の精度で自由に配置できます。これは、プロセス図、フロアプラン、機器の模式図に合わせてシンボルを正確な位置に配置する必要があるSCADAスタイルのレイアウトで使用するモードです。

Grid Snapのプロパティ：

• Columns — キャンバスの垂直方向の分割数。列数が多いほど水平方向の配置が細かくなります。列数が少ないと、ウィジェットはより広い位置にスナップします。
• Rows — 水平方向の分割数。行数が多いほど垂直方向の制御が細かくなり、行数が少ないと垂直方向のスナップが粗くなります。

ヒント： Grid Snapを使用するSCADAボードでは、行と列の数を多く設定（例：48×32以上）することで、グリッドの整列の恩恵を受けながらシンボル配置をきめ細かく制御できます。

Overflow X / Overflow Y

これらのプロパティは、キャンバスが表示可能なビューポートを超えて拡張するかどうかを制御します。

• Overflow X — 有効にすると、キャンバスは画面の右端を超えて拡張できます。初期ビューポート幅の外に配置されたコンテンツにスクロールできるように水平スクロールバーが表示されます。画面のリサイズ時にウィジェットは水平方向にスケーリングされません。
• Overflow Y — 有効にすると、キャンバスは画面の下端を超えて拡張できます。初期ビューポート高さの下に配置されたコンテンツ用に垂直スクロールバーが表示されます。画面のリサイズ時にウィジェットは垂直方向にスケーリングされません。

Overflowは、Grid Snapのオン・オフどちらでも機能します。ある方向でOverflowが有効な場合、その方向のレイアウトはノンレスポンシブになります。つまり、ウィジェットはウィンドウに合わせて伸縮せず、サイズを維持します。これは、大規模なSCADAダイアグラム、幅広いプロセスフロー、または背の高い機器模式図で、全体のレイアウトをウィンドウに合わせて圧縮すべきでない場合に便利です。

両方のOverflowが無効の場合、ウィジェットは表示領域内に制約され、画面に合わせてレスポンシブにスケーリングされます。

Scale to Fit

Scale to Fitは、ボード全体を利用可能な画面スペースに合わせて比例的にスケーリングします。キャンバスの固定アスペクト比を定義すると、その比率を維持しながらブラウザウィンドウに合わせてボードが拡大・縮小します。

Scale to Fitのプロパティ：

• Aspect Ratio — キャンバスの幅と高さの比率（例：16:9、4:3、またはカスタム値）。実際の画面サイズに関係なく、ボードは常にこの比率を維持します。画面のアスペクト比が一致しない場合、側面または上下に余白（レターボックス）が表示されます。

Scale to FitはGrid Snapのオン・オフどちらでも機能します。Overflowとは排他的で、Scale to Fitが有効な場合、レイアウト全体が常に表示されるためキャンバスはスクロールしません。

このモードは以下に最適です：

• コントロールルームのディスプレイ — ダッシュボードがスクロールや歪みなしにどのモニターにもきれいに表示されます
• キオスクスクリーン — 異なる画面サイズに自動的に適応する固定レイアウト
• プレゼンテーション用ダッシュボード — ノートPC、プロジェクター、壁掛けスクリーンで一貫した外観

Widget Fixed Size

各ウィジェットには、個別に切り替え可能なオプションのFixed WidthとFixed Heightプロパティがあります。有効にすると、画面のリサイズ時にその方向ではウィジェットがリサイズされなくなり、ボードの残りのレイアウトが流動的であっても、その軸ではノンレスポンシブになります。

これは、画面サイズに関係なく特定の要素が安定したサイズを必要とする場合に便利です。例えば、テキストラベルを含むナビゲーションサイドバーは、ボードの残りがレスポンシブにスケーリングしても、テキストが読みやすいように固定幅を維持すべきです。

ウィジェットに固定サイズを設定するには：

1. キャンバス上のウィジェットを選択します。
2. Widget Editorを開きます。
3. Fixed Widthおよび/またはFixed Heightを有効にします。

SCADAシンボルと固定サイズ

SCADAシンボルをボードに配置すると、デフォルトでFixed WidthとFixed Heightの両方が有効になります。ウィジェットツールバーのハイライトされたアイコンが、有効な固定サイズの制約を示します：

SCADAシンボルは物理的な機器やプロセス要素を表しており、実際のレイアウトを正確に描写するためにプロポーションと相対位置を維持する必要があります。レスポンシブなGrid Snapモードでは、シンボルの寸法が固定されている場合にのみこれが可能です。固定サイズがないと、レスポンシブなリスケーリングによってシンボルが歪み、位置がずれてしまいます。

これらのレイアウトモードがSCADAダッシュボードにどのように適用されるかの概要については、SCADAボードレイアウトオプションを参照してください。

レイアウトモードまとめ

レイアウトプロパティを設定するには：

1. Board Settingsパネルを開きます。
2. Layoutセクションを見つけます。
3. Grid Snapを切り替えて行と列を設定するか、無効にしてOverflowまたはScale to Fitを希望のアスペクト比で設定します。

グローバルウィジェットスタイリング

テーマに加えて、ダッシュボードのスタイル設定からすべてのウィジェットの外観を微調整できます。これらの設定はグローバルに適用され、個別にオーバーライドしない限り、ボード上のすべてのウィジェットがこれらの設定を継承します。

カスタマイズ可能な項目：

• 枠線 — ウィジェット周りの枠線の太さと色を制御します。ゼロに設定すると枠線なしの外観になり、目立たせるとウィジェット同士を視覚的に区切ることができます。
• 角丸 — 枠線の半径を調整して、鋭い四角形の角から完全に丸いカードまで変更できます。
• 背景 — ウィジェットの背景色を設定するか、透明にしてボードの背景が透けて見えるようにします。

グローバルウィジェットスタイルを設定するには：

1. Board Settingsパネルを開きます。
2. Styleセクションに移動します。
3. 枠線、角丸、背景の設定を必要に応じて調整します。

これらの変更はボード上のすべてのウィジェットに即座に適用されます。

ウィジェットごとのスタイルオーバーライド

特定のウィジェットを目立たせたい場合があります。例えば、色付きの背景を持つステータスインジケーター、枠線なしのヘッダーカード、余白を追加したチャートなどです。グローバルスタイルを変更する代わりに、特定のウィジェットに対してオーバーライドできます。

個別のウィジェットでスタイルをオーバーライドするには：

1. キャンバス上のウィジェットをクリックして選択します。
2. Widget Editor（ウィジェットの設定パネル）を開きます。
3. ウィジェットエディタ内のスタイルまたは外観設定を見つけます。
4. そのウィジェットのみの枠線、角丸、または背景を調整します。

ウィジェットごとの設定は、グローバルダッシュボードスタイルよりも優先されます。後でグローバルスタイルを変更したりテーマを切り替えたりしても、オーバーライドが設定されたウィジェットはカスタムの外観を維持します。

ヒント： グローバルスタイルで一貫したベースラインを設定し、特別な扱いが必要な要素にのみウィジェットごとのオーバーライドを控えめに使用してください。

まとめ

一般的なスタイリングのワークフローは次のようになります：

1. プロジェクトのビジュアルアイデンティティに合ったテーマを選択します。
2. ウィジェットの配置をより精密に制御する必要がある場合は、グリッドを調整します。
3. 枠線、角丸、背景のグローバルウィジェットスタイルを設定してテーマを微調整します。
4. 特定の要素に異なる外観が必要な場合は、ウィジェットエディタで個別のウィジェットをオーバーライドします。

この階層的なアプローチ — テーマ → グローバルスタイル → ウィジェットごとのオーバーライド — により、必要な箇所で完全な柔軟性を維持しながら、ボード全体の一貫性を保つことができます。