ボタンの基本と使い方

ボタンの基本と使い方

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

概要
ボタンは、URL を開く、フォームを送信する、ワークフローを実行する、ページを移動するなどのカスタムのクリック時アクションを実行するインタラクティブな CTA 要素です。関数を通じて自動化を有効にし、ユーザーエクスペリエンスを向上させ、アプリケーション内外や他のアクセス可能な URL へのナビゲーションを効率化できます。
利用可能範囲
  1. ボタンは、Creator のすべてのプランのページに追加できます。
  2. スーパー管理者、管理者、開発者のみが、ページ内のボタンを追加および管理できます。

1. 概要

Zoho Creator のボタンは、ページコンポーネント上でアクションを実行するためのクリック可能な UI 要素です。操作ポイントとして機能し、ユーザーがアプリケーションコンポーネントと直接やり取りし、Deluge 関数を実行し、集中管理されたダッシュボードからアクセス可能な URL を開くことを可能にします。例えば、クリック時アクションで Deluge 関数を呼び出してフォームデータを更新したり、関連データを表示するために Creator レポートへ移動したり、新しいタブで Web サイトを開いたりできます。
ページにボタンを追加すると、ボタンはパネル内に配置されます。ボタンのラベル、スタイル、レイアウトだけでなく、パネル内の他の要素もブランドに合わせてカスタマイズできます。
ボタンの設定セクションには、次の項目が含まれます:
  1. 表示 - ページに挿入されるボタンのラベルとして表示される値。
  2. アクション - ボタンをクリックしたときに開始できる処理。
  3. スタイル - ボタンの種類、色、余白などのビジュアルプロパティ。
ボタンはパネルの一部として挿入されるため、上記の設定は他のパネル要素にも利用できます。詳細については、次のページを参照してください:
  1. パネルについて
  2. パネルおよびパネル要素の表示設定
  3. パネルおよびパネル要素のアクション設定
  4. パネルおよびパネル要素のスタイル設定

1。1. ユースケース

コミュニティ支援プログラムを管理するために構築された Community 接続 Hub アプリケーションでは、ダッシュボードにボランティア参加状況や寄付活動に関する主要な指標が表示されます。認知向上と支援を促進するため、各 NGO ごとにラベル付けされた複数のボタンがダッシュボードパネルに追加されています。各ボタンのクリック時アクションは、それぞれの NGO の公開 Web サイト URL を新しいタブで開くように設定されています。これらのボタンをダッシュボード上に目立つように配置することで、スタッフ、寄付者、ボランティアなどのユーザーは、各 NGO の公式サイトにすばやくアクセスして詳細を確認したり、寄付を行ったりできます。また、アプリの画面から離れることなく、これらのサイトを外部に共有することも可能です。

1。2. ナビゲーションガイド

アプリケーションの編集モードでページを作成した後、ページビルダーの左ペインでボタン要素を見つけることができます。Buttonをクリックすると、さまざまなボタンレイアウトが表示され、その中から目的のレイアウトをドラッグ＆ドロップして作成スペースに配置できます。

1。3. 表示

ページにボタンを追加すると、ボタンはパネルの一部として挿入されます。さらに、他のパネル要素やテキスト、画像を追加して、ユーザーとのインタラクションやコンテキストを補足できます。ボタンの表示プロパティに加え、追加したテキスト要素や画像要素の表示プロパティもカスタマイズできます。各パネル要素の表示カスタマイズ項目は次のとおりです。
パネル要素
有効な画像の種類
表示データ
Button

  1. ラベル - ボタン上に表示されるテキストです。ボタンが実行するアクションの内容を示すことができます。必要に応じて、ページ変数をラベルに含め、ユーザーごとに動的な値を表示できます。
その他のパネル要素:


Text
静的テキスト - 情報を伝えるための英数字テキスト要素です。必要に応じて、ページ変数を含めてユーザーごとに動的な値を表示できます。


プリセット:
  1. 組み込みプリセット - Creator アカウント内の任意のページでパネルを作成する際に保存しておいた組み込みパネルプリセットを選択できます。同じ設定内容で適用され、必要に応じてさらに更新できます。
  2. ページ変数 - 同じページ内で既に作成しているページ変数を選択し、動的な値を表示できます。
Zoho Creator - 同一アカウント内の任意の Creator アプリケーションのフォームに保存されているデータを使用して、次のような算術演算を行えます:
  1. Sum - フォーム項目に入力されたすべての関連レコードの合計値（サポートされる項目タイプ: 数値、パーセント、小数、通貨、Prediction、OCR、Integration)
  2. 最小- フォーム項目に入力された関連データの最小値（対応項目タイプ: 番号, パーセント, 小数, 通貨, 時間, 日付-時間, Prediction, OCR, Integration,および システム項目（追加日時、更新日時 など）
  3. 最大- フォーム項目に入力された関連データの最大値（対応項目タイプ: 番号, パーセント, 小数, 通貨, 時間, 日付-時間, Prediction, OCR, Integration, および システム項目（追加日時、更新日時 など）)
  4. 中央値- フォーム項目に入力された、該当するすべてのレコードの中央値です。結果として表示される値は、数値を昇順に並べたときの中央の値になります。レコード数が偶数の場合は、中央の 2 つの値の平均が表示されます。(対応フィールドタイプ: 番号, パーセント, 小数, 通貨, OCR, Prediction, Integration)
  5. 平均- フォーム項目に入力された、該当するすべてのレコードの平均値です。(対応フィールドタイプ: 番号, パーセント, 小数, 通貨, OCR, Prediction, Integration)
  6. 件数- フォームを使用して入力されたデータの件数です。全体の件数を表示することも、条件を使用して絞り込んだ件数を表示することもできます。この操作は、特定のフィールドを基準には行われません。データの件数のみを提供します。
  7. Distinct 件数- フォームを使用して入力されたデータ内で、指定したフィールドに存在する一意の値の件数です。例えば、Distinct 件数の設定時にOffice 場所ドロップダウンフィールドを選択したとします。合計 30 件のデータで、オフィス所在地として Boston、Texas、Phoenix、Japan（4 つの一意の値）が繰り返し使用されている場合、パネルに表示される Distinct 件数の値は 4 になります。
メモ: Distinct 件数では、次のフィールドはサポートされません: 複数選択、チェックボックス、サブフォームおよびサブフォーム内のフィールド、メモを追加、セクション、ルックアップ(表示形式に Multiselectまたは Checkbox が選択されている場合のみ)。
これらの操作により、パネル上に表示される動的な数値が提供されます。
Notes
メモ: テキスト要素に Zoho Creator の算術操作（合計、最小、件数 など）を設定した後は、表示 セクション内でプリセットとして保存できます。この組み込みプリセットは、同じ Creator アカウント内の他のページコンポーネントでも、同じ設定のまま再利用できます。


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


Zoho プロジェクト- Zoho プロジェクトに保存されている、タスク数、課題数、マイルストーン数などのデータを使用して、パネル上に合計件数を表示できます。
Notes
メモ: プロジェクトから値を取得するには、Zoho Creator と Zoho プロジェクト間の接続が必要です。プロパティの設定時に、既存の接続を選択するか、新しい接続を作成できます。
画像
パネル上に画像を表示できます。画像の取得元は次のとおりです:
  1. マイライブラリ- ローカルストレージからアップロードした画像です。JPEG、JPG、PNG 形式に対応し、最大サイズは 2MB です。
  2. Web リンク- 指定した公開 URL から取得する画像です。
  3. プロフィール画像- ログイン中のユーザーのプロフィール画像を Zoho アカウントから取得し、パネル上に表示します。
Notes
メモ: 次の場合は、プロフィール画像の代わりに差し込み画像 () が表示されます。
  1. 公開ユーザーまたはポータルユーザーがページにアクセスした場合
  2. ページを PDF としてエクスポートした場合
  1. アイコン- Creator が提供する組み込みアイコンです。アウトラインアイコンと塗りつぶしアイコンのいずれかを使用できます。

1。4. 操作

ボタン、パネル全体、追加した他のパネル要素、パネルコンテナ（パネル要素をまとめるコンテナ）に操作を関連付けることができ、クリック時に実行されます。関連付け可能な操作の種類は次のとおりです。
  1. URL を開く - ユーザーがアクセスできる公開または非公開の URL を、同じウィンドウ、新しいウィンドウ、またはポップアップで開くことができます。
    2. メモ: Creator アプリケーション内に存在する公開済みコンポーネントのパーマリンクも、この操作で指定できます。
  2. フォームを開く - Creator アカウント内のいずれかのアプリケーションに含まれるフォームを、同じウィンドウ、新しいウィンドウ、またはポップアップで開くことができます。
  3. レポートを開く - Creator アカウント内のいずれかのアプリケーションに含まれるレポートを、同じウィンドウ、新しいウィンドウ、またはポップアップで開くことができます。
  4. ページを開く - Creator アカウント内のいずれかのアプリケーションに含まれるページを、同じウィンドウ、新しいウィンドウ、またはポップアップで開くことができます。
  5. 関数を実行する - Creator アカウント内のいずれかのアプリケーションに含まれる関数を実行できます。

1。5. スタイル

ボタン、そのパネル、パネルコンテナ（複数のボタンや追加のパネル要素を追加したときに作成される）、およびその他のパネル要素のスタイルプロパティをカスタマイズできます。次の表は、ボタン、パネル、パネルコンテナのスタイルプロパティを一覧にしたものです。
ボタン
  1. 角丸半径 - ボタンの角丸半径の値を調整することで、輪郭を角ばった形状または角が丸い形状にカスタマイズできます。
  2. スタイル - ボタンのテキストを太字、斜体、下線付きにしたり、大文字／小文字に変更したりできます。
  3. フォントファミリー - ボタン内のテキストに適用されるフォントです。6 種類のフォントファミリーから選択できます。
  4. フォントサイズ - ボタン上に表示されるテキストのフォントサイズです。あらかじめ用意されたフォントサイズは 12px 〜 40px の範囲です。1 〜 99 ピクセルの範囲でカスタムサイズを設定することもできます。
  5. カラー - ボタン上に表示されるテキストの色と、ボタンの背景色です。
  6. ストローク - ボタンの枠線で、色や太さをカスタマイズできます。
  7. パディング - ボタンのラベルまたはテキストと、ボタンの枠線との間隔です。
  8. マージン - ボタン要素の外側の余白です。
  1. パネルコンテナ（1 つ以上のパネル要素をまとめて配置可能）
  2. パネル（全体として）
  1. パネルコンテナおよびパネル全体について、次のような各種プロパティを定義できます。
  2. 列の配置 - パネル／パネルコンテナ内に配置されたパネル要素を、上、左下、中央 など、さまざまな位置に揃えることができます。
  3. 入れ替え - 隣り合うパネルコンテナの位置を入れ替えることができます。
  4. 高さ - パネルコンテナの高さを フィル にするか、任意のピクセル数でカスタム高さとして指定できます。
  5. パディング - パネル要素とその枠線との間隔を、ピクセル単位でカスタマイズできます。
  6. 背景色 - パネル／パネルコンテナの背景に適用される色です。
  7. 背景画像 - パネル／パネルコンテナの背景に適用される画像です。

ボタン要素を含むパネルには、テキスト要素と画像要素を追加して、さらにインタラクションを持たせることができます。以下の表は、それらのスタイルプロパティを一覧にしたものです。
テキスト
  1. フォントファミリー - テキスト要素内のコンテンツに適用されるフォントです。6 種類のフォントファミリーから選択できます。
  2. スタイル - パネル要素のテキストを太字、斜体、下線付きにしたり、大文字／小文字に変更したりできます。
  3. カラー - テキストの色と、パネル要素の背景色です。
  4. フォントサイズ - パネル要素全体のコンテンツに適用されるフォントサイズです。あらかじめ用意されたフォントサイズは 12px 〜 40px の範囲です。
  5. マージン - 2 つのパネル要素間の余白です。
  6. 接頭辞 - パネル要素内の動的な値に接頭辞を付与できます。たとえば、保留中タスクの件数を表示したい場合、接頭辞を「件数:」とすることで、動的な件数をラベルと値のペアとして表示できます。
  7. 接尾辞 - パネル要素内の動的な値に接尾辞を付与できます。たとえば、あるパネルでクラス内の子どもの人数を表示する場合、接尾辞を「students」とすることができます。
画像
  1. 形状 - 画像の形状を、円形、正方形、または角が丸い正方形から選択できます。
  2. 形状サイズ - 形状のサイズを、小、中、大、またはカスタムサイズから選択できます。
  3. アイコンサイズ - 画像としてアイコンを選択した場合、そのサイズを 12px 〜 40px のあらかじめ用意された範囲から選択できます。1 〜 99 ピクセルの範囲でカスタムサイズを設定することもできます。
  4. カラー - アイコンの色を選択できます。
  5. マージン - 2 つのパネル要素間の余白です。
  1. ボタンの追加と管理
  2. パネルについて
  3. ページについて
次のステップ
前へ
次のステップ
ダッシュボード上のクリック可能な UI ページ要素として、ボタンを追加および管理する方法を参照してください。
前へ
HTML、ZML、Deluge を使用してカスタム UI 要素を追加し、ダッシュボードに動画、URL、インタラクティブコンテンツを埋め込めるスニペットについて参照してください。