パネルの追加と管理
お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。
このページの内容
ダッシュボードで実数値および集計された主要指標を表示するためのパネルの追加と管理方法について説明します。
1. パネルの設定
1.1. パネル作成の流れ
1.2. 設定方法を確認する
1.3. パネルを作成する手順
1.3.1. パネルを追加する
2. ページビルダー左側のペインでPanelをクリックします。パネルテンプレートの一覧が表示されます。パネルテンプレートは、要件に応じてカスタマイズできます。
- ヘッダー／フッター - 必要に応じて、テンプレート内で適切なヘッダー／フッター形式を使用します。
- 配置 - パネル内の要素の配置を左寄せ、右寄せ、中央揃えに変更します。
- 背景色 - パネルテンプレートの背景色を白または任意の単色に設定します。
3. パネルテンプレートをドラッグ＆ドロップしてビルダー領域に配置します。すると、パネルビルダーであるPanel Configurationペインが開きます。
追加直後のパネルテンプレートには、既定の静的テキストが含まれています。これは、要件に応じて編集・再設定・削除できます。さらに、パネルビルダーからテキスト、画像、ボタンなどのパネル要素を追加・管理できます。
メモ: パネルテンプレートをページビルダーに追加すると、対応するZMLコードがPanel Configurationペインのコードタブに表示されます。
このコードを編集することで、独自のスクリプト言語を使用してパネルを高度にカスタマイズし、デザインできます。
1.3.2. パネル要素を追加する
1. Panel Configurationペイン左上の矢印（
）アイコンをクリックします。Text、画像、Buttonの3つのパネル要素が、それぞれ利用可能なカスタマイズとともに表示されます。
まだパネルを追加していない場合は、パネルを追加してから、以下の手順に従ってその中に要素を追加してください。
2. 次のいずれかのパネル要素テンプレートをドラッグ＆ドロップしてパネルに追加します。
- Text - 文字サイズ、斜体、太字などが異なるテンプレートから選択します。
- 画像 - 画像をクリックして、あらかじめ用意された画像テンプレートを表示します。画像を四角形、角丸四角形、円形のいずれで表示するかを選択します。または、用意されたアイコンテンプレートを選択して配置することもできます。
- Button - Buttonをクリックして、あらかじめ用意されたボタンテンプレートを表示します。RectangularまたはRoundedボタンを選択します。
パネル要素をビルダー領域に配置したら、次のプロパティを設定できます。
- 表示 - パネルに埋め込まれる静的／動的テキスト、画像、ボタンの値。
- アクション - パネル全体または特定のパネル要素をクリックしたときに実行されるアクション。
- スタイル - パネルおよびパネル要素の余白、色、マージンなどの見た目のプロパティ。
2. パネルとパネル要素の管理
パネルビルダー内（Panel Configuration ペイン）から行える操作:
パネルの作成以外に、次の操作を行うことができます。
- 要素名の追加 - Panel Configurationペイン左上の鉛筆（
）アイコンをクリックして、要素名を編集します。この名前は、ページビルダー内で他の要素と区別して特定の要素を探す際に使用できます。
- パネル要素の削除 - パネルビルダーで対象のパネル要素またはコンテナを選択し、右下の要素を削除をクリックして削除します。
- パネル要素の移動 - パネルビルダー上でパネル要素をドラッグ＆ドロップして、別の位置に移動します。
- パネル要素のサイズ変更 - パネルコンテナの縦方向の境界をドラッグして、コンテナの幅を変更します。これは、パネルビルダー上で1行に2つ以上のパネル要素が配置されている場合にのみ実行できます。
パネル要素の管理とパネルの設定が完了したら、
アイコンをクリックしてページビルダーに戻ります。ここから、ページ上でのパネルの位置を変更したり、わかりやすいタイトルを付けたりといった管理を続けて行うことができます。
ページの編集モード（ページビルダー）から行える操作:
パネルをクリックすると、以下の操作を行えます。
- パネルタイトルの追加 - Tアイコンをクリックして、パネルにタイトルを付けます。タイトルは、アプリケーションの実行モードでパネルの上部に見出しとして表示されます。タイトルを挿入したら、タイトルをクリックして、次の設定で書式を変更できます。
- フォントファミリー - ドロップダウンから6種類のフォントタイプのいずれかを選択します。
- フォントサイズ - ドロップダウンから 12～40px のサイズを選択します。既定値は 20px です。
- 太字 - Bアイコンをクリックしてタイトルを太字にします。
- フォントスタイル - Iアイコンをクリックしてタイトルを斜体にします。
- フォントカラー - Aアイコンをクリックして、パネルタイトルに適した色を選択します。
- タイトルの更新 - 追加済みのタイトルをダブルクリックして編集します。
- タイトルの削除 - パネルを選択し、再度Tアイコンをクリックしてタイトルを削除します。あるいは、キーボードの Delete キーを使用して要素を削除します。
- パネルの複製 - 複製アイコンをクリックして、同じ設定のパネルをもう1つ作成します。
- パネルの削除 - ゴミ箱アイコンをクリックして、ページからパネルを削除します。
- パネルの移動 - ページビルダー上でパネルをドラッグ＆ドロップして、別の位置に移動します。
- パネルのサイズ変更 - パネルの縦方向の境界をドラッグして、要素の幅を変更します。これは、ページビルダー上で複数のページ要素が横に並んで配置されている場合にのみ実行できます。
既存のパネルを編集／設定する:
ページビルダーにすでに配置されている対象のパネルをクリックし、設定をクリックしてPanel Configurationペイン（パネルビルダー）を開きます。ここからパネルの設定を編集・更新できます。