パネルの理解

パネルの理解

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要点
パネルは、ページに埋め込まれる視覚的なコンテナーで、動的な指標、ステータス、KPIなどの重要な情報を、構造化された見やすい形式で表示するために使用されます。ユーザーはダッシュボードから重要なインサイトを把握しやすくなり、URLを開く、Creator内で事前定義済みの関数を実行するなどのCTAを含めることもできます。
利用条件
  1. パネルはCreatorのすべてのプランで作成できます。
  2. 特権管理者、管理者、開発者のみがパネルを作成および管理できます。

1. 概要

Zoho Creatorでは、パネルはページコンポーネントに挿入できる直感的な要素で、アプリケーションのデータから静的データとリアルタイムデータの両方を表示できます。動的な主要指標、進捗、傾向をまとめて一目で確認できます。パネルビルダーを使用してカスタマイズできるため、効果的なデータ分析に適した、ミニマルで機能的なデザインの、目的に合わせた表示を作成できます。
パネルに組み込めるパネル要素は次のとおりです。
  1. テキスト- パネルに表示されるテキストコンテンツです。静的テキストのほか、ページ変数、データの集計値、他のZohoサービスから取得したデータなどの動的な値を表示できます。
  2. 画像- 画像を表示する視覚要素です。パネルの目的に合わせて個性を加えることができます。組み込みアイコンの挿入、ローカルストレージからの画像取得、ログイン中のユーザーのプロフィール画像の設定、画像の公開URLの使用などが可能です。
  3. ボタン- 事前作成された関数の実行や、フォーム、レポートなどのCreatorコンポーネントを開くといったアクションを開始または実行できるインタラクティブな要素です。
パネルの設定セクションは次のとおりです。
  1. 表示- パネルに埋め込まれる静的／動的テキスト、画像、ボタンの値です。
  2. アクション- パネルまたは特定のパネル要素をクリックしたときに開始できるアクションです。
  3. スタイル- パネルまたはパネル要素の余白、色、マージンなどの視覚的なプロパティです。

1.1. 利用例

1. ダッシュボードの主要指標- たとえば、請求アプリケーションで、1年間の請求活動を監視するダッシュボードを作成したとします。請求状況の概要をすばやく把握できるように、パネルを使用して主要指標を表示します。ダッシュボードには次のパネルが含まれます。
  1. 送信済み請求の合計- 選択した期間中に送信された一意の請求データの合計数を表示します。
  2. 承認済み請求- 設定された条件に基づいて、ステータスが「承認済み」とマークされている請求の件数を表示します。

  3. 支払済み金額の合計- 上記の条件に基づいて、すべての承認済み請求の支払金額の合計を計算します。
  4. 最大請求金額- 上記の条件に基づいて、すべての請求の中で記録された最大の支払金額を強調表示します。
各パネルには個別の条件と集計関数が設定され、関連する請求データのみが対象になります。これにより、請求件数や支払傾向を一目で確認できます。

各パネルをクリックすると、該当セグメントの請求一覧を表示するレポートが開きます。

2. 顧客向けの動的なウェルカム表示- たとえば、各ユーザーに合わせた体験を提供する学生用ダッシュボードを作成したとします。ウェルカム表示パネルでは、ページ変数を使用して、ログイン中の学生の名前を動的に表示するあいさつ文を表示し、学生ごとにパーソナライズされた体験を提供します。さらに、学生名、クラス、出席番号、一意のIDなどの基本情報も表示されます。これらを表示するテキストパネル要素は、学生の詳細フォームに保存されている学生のプロフィールからリアルタイムデータを取得し、学校のロゴを示すアイコンも配置されます。このパネルにより、すぐに参照およびアクセスできる包括的な学業プロフィールを含めることができます。

3. 関連レポートへのCTAを備えた保留中タスクの概要- 人事管理アプリケーションでは、人事担当者のダッシュボードに保留中タスクパネルが表示されます。このパネルでは、未着手のタスクと進行中のタスクの件数を動的に表示します。これを実現するため、設定時に特定の条件を使用してタスクを分類し、従業員が自分の作業量を簡単に把握できるようにします。人事担当者が保留中タスクパネルをクリックすると、フィルター済みのポップアップレポートが表示され、保留中タスクの包括的な一覧が表示されます。

1.2. パネルの操作ガイド

アプリケーションの編集モードでページを作成すると、ページビルダーの左ペインにパネル要素が表示されます。［パネル］をクリックすると、さまざまなパネルレイアウトが横に表示されるため、目的のレイアウトをビルド領域にドラッグ＆ドロップできます。

1.3. 表示

パネルにテキスト、画像、ボタンを追加すると、それぞれの表示プロパティを個別にカスタマイズできます。各パネル要素で設定できる表示のカスタマイズ項目は次のとおりです。
パネル要素
画像
表示データ
テキスト
静的テキスト- 情報を伝える英数字のテキスト要素です。必要に応じて、ページ変数を含めることで、ユーザーごとに動的な値を表示できます。


プリセット：
  1. 組み込みプリセット- Creatorアカウント内の任意のページでパネルを作成する際に保存したことがある、パネルの組み込みパネルプリセットから選択できます。同じ設定
    で、必要に応じてさらに変更できます。
  2. ページ変数- 動的な値を表示するために、同じページ内で作成済みのページ変数を選択できます。
Zoho Creator- 同じアカウント内のいずれかのCreatorアプリケーションのフォームに保存されているデータを使用して、次のような算術演算を実行できます。
  1. 合計- フォーム項目に入力された関連するすべての値の合計です（対応する項目の種類：数値、パーセント、小数、通貨、予測、OCR、連携）
  • 最小値 - フォーム項目に入力された該当するすべての値の最小値（対応している項目の種類：数値、パーセント、小数、通貨、時刻、日時、予測、OCR、連携、およびシステム項目（例：追加日時、変更日時など））
  • 最大値 - フォーム項目に入力された該当するすべての値の最大値（対応している項目の種類：数値、パーセント、小数、通貨、時刻、日時、予測、OCR、連携、およびシステム項目（例：追加日時、変更日時など））
  • 中央値- フォーム項目に入力された該当するすべての値の中央値です。数値を昇順に並べたときの中央の値が結果として表示されます。入力件数が偶数の場合は、中央にある2つの値の平均が表示されます。（対応している項目の種類：数値、パーセント、小数、通貨、 OCR、予測、連携）
  • 平均- フォーム項目に入力された該当するすべての値の平均です（対応している項目の種類：数値、パーセント、小数、通貨、 OCR、予測、連携）
  • 件数- フォームを使用して入力されたデータの件数です。全体の件数を表示することも、条件を使用して絞り込んだ件数を表示することもできます。この処理はデータの件数のみを算出するため、特定の項目に基づいて実行されるものではありません。
  • 重複を除いた件数- フォームを使用して入力されたデータ内で見つかった、一意の項目値の件数です。たとえば、重複を除いた件数を設定する際に、［オフィス所在地］ドロップダウン項目を選択したとします。合計30件のデータで、オフィス所在地としてボストン、テキサス、フェニックス、日本（4つの一意の値）が繰り返し入力されている場合、パネルに表示される重複を除いた件数の値は4になります。
    • メモ：重複を除いた件数では、次の項目はサポートされていません：複数選択、チェックボックス、サブフォームまたはサブフォーム項目、メモの追加、セクション、ルックアップ（表示形式として複数選択またはチェックボックスが選択されている場合のみ）。
    これらの処理により、パネルに表示される動的な数値が生成されます。
    Notes
    メモ：Zoho Creatorの算術演算（合計、最小値、件数など）を使用してテキスト要素を設定した後、［表示］セクション内からプリセットとして保存できます。この組み込みプリセットは、同じCreatorアカウント内の他のページコンポーネントで、同じ設定のまま再利用できます。


    Zoho Sheet - Zoho Sheetsのスプレッドシートのセルに保存されている値を使用して、パネルに動的な値を表示できます。
    Notes
    メモ：スプレッドシートから値を取得するには、Zoho CreatorとZoho Sheets間の接続が必要です。プロパティの設定時に、既存の接続を選択するか、新しい接続を作成できます。


    Zoho Projects- Zoho Projectsに保存されているタスク、バグ、マイルストーンの数などのデータを使用して、パネルに合計件数を表示できます。
    Notes
    メモ：プロジェクトから値を取得するには、Zoho CreatorとZoho Projects間の接続が必要です。プロパティの設定時に、既存の接続を選択するか、新しい接続を作成できます。
    画像
    パネルに画像を表示できます。画像の取得元は次のとおりです。
    1. マイライブラリー- ローカルストレージ内の画像です。JPEG、JPG、PNG形式で、最大サイズは2MBです。
    2. Webリンク- 指定された公開URLの画像です。
    3. プロフィール写真- ログイン中のユーザーのプロフィール写真がZoho Accountから取得され、パネルに表示されます。
    Notes
    メモ：次の場合、プロフィール写真の代わりに差し込み項目の画像（）が表示されます。
    1. 公開ユーザーまたはポータルユーザーがページにアクセスする場合
    2. ページがPDFとしてエクスポートされる場合
    1. アイコン- Creatorで提供される組み込みアイコンです。アウトラインアイコンまたは塗りつぶしアイコンを使用できます。
    ボタン
    1. ラベル：ボタンに表示されるテキストです。ボタンで実行される可能性のある操作を表すことができます。必要に応じて、ページ変数をラベルとして含めることで、ユーザーごとに異なる動的な値を表示できます。

    1.4. アクション

    パネル全体、パネルコンテナー、パネル要素にアクションを関連付けることができます。これらのアクションはクリック時に実行されます。関連付けられるアクションの種類は次のとおりです。
    1. URLを開く：ユーザーがアクセスできる公開URLまたは非公開URLを、同じウィンドウ、新しいウィンドウ、またはポップアップで開けます。
    メモ：Creatorアプリケーション内の公開済みコンポーネントの固定リンクも、このアクションに指定できます。
    1. フォームを開く：Creatorアカウント内の任意のアプリケーションにあるフォームを、同じウィンドウ、新しいウィンドウ、またはポップアップで開けます。
    2. レポートを開く：Creatorアカウント内の任意のアプリケーションにあるレポートを、同じウィンドウ、新しいウィンドウ、またはポップアップで開けます。
    3. ページを開く：Creatorアカウント内の任意のアプリケーションにあるページを、同じウィンドウ、新しいウィンドウ、またはポップアップで開けます。
    4. 関数を実行：Creatorアカウント内の任意のアプリケーションにある関数を実行できます。
    5. 基になるデータ：一覧レポートで集計値（合計、最小値、最大値、中央値、件数、平均、重複を除いた件数）を表示するテキスト要素に関連付けられたデータを表示します。関連するフォームの任意の一覧レポートを使用してデータを表示できます。

    1.5. スタイル

    パネル全体、パネル内のパネルコンテナー、パネル要素のスタイルプロパティをカスタマイズできます。
    セクション

    プロパティ
    パネル要素
    テキスト
    1. フォントファミリー：テキスト要素内のコンテンツに適用されるフォントです。6種類のフォントファミリーから選択できます。
    2. スタイル：パネル要素のコンテンツに、太字、斜体、下線を適用したり、大文字／小文字を変更したりできます。
    3. 色：テキストの色とパネル要素の背景色です。
    4. フォントサイズ：パネル要素のコンテンツ全体に適用されるフォントサイズです。既定のフォントサイズは12pxから40pxまでです。
    5. 余白：2つのパネル要素間の間隔です。
    6. 接頭辞：パネル要素内の動的な値に接頭辞を付けられます。たとえば、保留中のタスク数を表示する場合、接頭辞として「件数：」を使用すると、動的な件数をラベルと値の組み合わせとして表示できます。
    7. 接尾辞：パネル要素内の動的な値に接尾辞を付けられます。たとえば、パネルにクラス内の子どもの人数を表示する場合、接尾辞として「名」を使用できます。

    画像
    1. 形状：画像の形状は、円、四角形、角丸の四角形から選択できます。
    2. 形状サイズ：形状サイズは、小、中、大、またはカスタムサイズから選択できます。
    3. アイコンサイズ：画像をアイコンとして選択した場合、サイズは既定の範囲である12pxから40pxまでから選択できます。
    4. 色：アイコンの色を選択できます。
    5. 余白：2つのパネル要素間の間隔です。

    ボタン
    1. ボタンの種類：表示されるボタンの種類は、四角形または角丸から選択できます。
    2. フォントファミリー：ボタン内のコンテンツに適用されるフォントです。6種類のフォントファミリーから選択できます。
    3. スタイル：ボタンのコンテンツに、太字、斜体、下線を適用したり、大文字／小文字を変更したりできます。
    4. 色：ボタンに表示されるテキストの色と背景色です。
    5. フォントサイズ：ボタンに表示されるコンテンツのフォントサイズです。既定のフォントサイズは12pxから40pxまでです。
    6. 余白：2つのパネル要素間の間隔です。
    1. パネルコンテナー（1つのコンテナー内に複数のパネル要素をまとめることができます）
    2. パネル（全体）

    パネルコンテナーおよびパネル全体の各種プロパティを設定できます。主なプロパティは次のとおりです。
    1. 列の配置：パネル／パネルコンテナー内のパネル要素を、上、左下、中央など、さまざまな位置に配置できます。
    2. 入れ替え：隣り合って配置されたパネルコンテナーを入れ替えられます。
    3. 高さ：パネルコンテナーの高さは、全体に合わせるまたは任意のカスタム高さ（ピクセル単位）に設定できます。
    4. パディング：パネル要素とその枠線の間の余白を、ピクセル値でカスタマイズできます。
    5. 背景色：パネルまたはパネルコンテナーの背景を塗りつぶす色です。
    6. 背景画像：パネルまたはパネルコンテナーの背景に表示する画像です。

    1. パネル要素の追加と管理
    2. パネルとパネル要素の表示設定
    3. パネルとパネル要素のアクション設定
    4. パネルとパネル要素のスタイル設定
    5. ページについて
    次のステップ
    前へ
    次のステップ
    主要な指標やデータを視覚的に表すために、パネルとパネル要素を追加・管理する方法について説明します。
    前へ
    詳しくはページコンポーネントをご確認ください。このコンポーネントはダッシュボードとして機能し、パネル、ゲージ、グラフ、スニペットなど、複数の要素を追加できます。