ダッシュボードレイアウト

1.利用シーン

ダッシュボードのレイアウトとは、ダッシュボードのbodyにおけるすべてのコンポーネントの位置と、コンポーネント間の間隔のことです。

ダッシュボードのレイアウトには、大きく分けての自動調整レイアウトと絶対レイアウトがありますが、自動調整レイアウトは、また非固定レイアウトと固定レイアウトの2種類に分けられています。

今回は、これらのレイアウト方法の特徴の違いと、それぞれのレイアウトによる効果について説明します。

2.機能入り口

• 「非固定レイアウト」と「固定レイアウト」は、[テンプレート]-[PC側自動調整属性]で設定できます。

• 非固定レイアウトでは、bodyキャンバスの左下に「非固定レイアウト」「固定レイアウト」で設定できます。

レイアウト手法を正式に紹介する前に、レイアウト推奨の機能について理解しておく必要があります。

新規にダッシュボードを作成する時は、テンプレートのレイアウト選択画面がポップアップ表示され、様々な一般的なレイアウト効果を確認することができます。

• コンポーネント数が違う各種モジュールを選択して表示することができます。

• 表示効果は「簡約効果」と「実際効果」の2種類に分けられています。

• 新規にブランクテンプレートを直接作成する場合、テンプレートのデフォルトは「自動調整レイアウト-非固定レイアウト」です。

• レイアウト付きのテンプレートを選択した場合、選択されたレイアウトに従って、本マニュアルではbodyのインターフェイスに「空白のプレースホルダー+間隔」が表示されます。下の画像の通りです。

注1：「プレースホルダー」とは、自動調整レイアウトにおいてコンポーネントを配置するために使用する仮想ブロックのことです。

注2：現在、レイアウトはテンプレートの新規作成時のみ選択可能で、テンプレート作成後に他のレイアウトを変更することはできません。

1.固定レイアウト-非固定レイアウト

• 新規にダッシュボードを作成する場合、空白テンプレートを作成する場合でも、レイアウト付きのテンプレートを作成する場合でも、テンプレートのレイアウトはデフォルトで「自動調整レイアウト-非固定レイアウト」となっています。

• 空白のテンプレートには、初期状態ではプレースホルダーブロックがありませんが、コンポーネントを追加すると、プレースホルダーブロックが追加されます。

• レイアウト付きテンプレートを新規に作成すると、bodyには破線枠、つまり「空白のプレースホルダー」です。プレースホルダーは操作できなく、1つのプレースホルダーには1つのコンポーネントしか配置することができません。

• 右側のプロパティパネルの「レイアウト」セクションで、コンポーネントの間隔と内側の余白を設定することができます。下の画像の通りです。

• bodyにコンポーネントをドラッグする場合、プレースホルダーブロックの位置へのドラッグ・ドラッグのみサポートし、プレースホルダーブロック以外の位置にドラッグすると、「このエリアに追加できません」と表示されます。

• コンポーネントをプレースホルダーブロックにドラッグすると、コンポーネントがブロックを双方向に埋め尽くし、右上のコンポーネントパネルにはドラッグしたコンポーネントの名前が表示されます。

• コンポーネントを移動または削除すると、プレースホルダーブロックがコンポーネントに追従し、レイアウトが自動的に調整されます。

2.固定レイアウト-非固定レイアウト

• 空白テンプレートは初期状態ではプレースホルダーブロックがありません。固定レイアウトに切り替えると、bodyにコンポーネントをドラッグ・ドロップできなくなり、「このエリアに追加できません」と表示されます。

• 固定レイアウトの場合、bodyのコンポーネントの間隔とbodyの内マージンはグレーとなっており、編集することはできません。下の画像の通りです。

• ボディにコンポーネントをドラッグする場合、コンポーネントはブロックを埋め尽くします。プレースホルダーブロック以外の位置にドラッグすると、「このエリアに追加できません」と表示されます。

• 既存のコンポーネントプレースホルダーにコンポーネントをドラッグすると、元のコンポーネントが上書きされます。

• コンポーネントを移動または削除しても、プレースホルダーブロックのレイアウトには影響しません。

• 2つのプレースホルダー内のコンポーネントを入れ替えることができます。

• コンポーネントのコピーとペーストには対応していません。

3.固定レイアウト

• ボディに部品をドラッグしても、その大きさを維持し、ボディを埋め尽くすことはありません。

• コンポーネントは重ねることができ、自由に位置を決められます。

• コンポーネントは複数選択可能で、複数選択時にはコンポーネントのアライメントを設定することができます。

• コンポーネントは、右側のプロパティパネルで位置やサイズを変更することができます。

4.差異点のまとめ

• 絶対レイアウトは最も自由度が高く、任意の位置に配置でき、部品の重なりにも対応できますが、部品間のレイアウトや位置合わせに手間がかかり、調整も難しくなります。
  

• 自動調整レイアウトの非固定レイアウトも柔軟性が高く、自由に変更することが可能です。

• 自動調整レイアウトの固定レイアウトでは、テンプレートのレイアウトを固定することができ、レイアウトそのままで、コンポーネントの内容を調整したいシナリオに適しています。
  

詳細な比較は下表のとおりです。

• 自動調整レイアウトから絶対レイアウトに切り替える時は、すでに追加されているコンポーネントの位置はそのままで、その他の空白のプレースホルダーが消えます。

• 絶対レイアウトを自動調整レイアウトに切り替える際、「切り替えると全コンポーネントの位置が変わり、元に戻せません。本当に切り替えますか。」とヒントされます。[OK]をクリックすると、[自動調整レイアウト-非固定レイアウト]に変わります。これは、新規に空白のテンプレートを作成したときと同じ状態であり、コンポーネントが自動でbodyを埋め尽くし、コンポーネント間の間隔がない状態になります。下の画像の通りです。

• 非固定レイアウトと固定レイアウトを切り替える場合、コンポーネントやプレースホルダーブロックの位置は変わりません。

注：空白のテンプレートを「非固定レイアウト」から「固定レイアウト」に切り替えた場合、この時点ではプレースホルダーブロックのドラッグ・ドロップができません。下の画像の通りです。