モバイルカードビルダー コンポーネント

  • リリースバージョン: Yokohama
  • 更新日 2025年01月30日
  • 所要時間：7分

    • モバイルカードを構成するコンポーネントについて学びます

    コンポーネントの追加と削除

    ボタン

    ボタンコンポーネントを使用すると、ボタンが選択されたときにユーザーがアクションを実行できます。ボタンを使用して、カードにアクションを追加します。

    表 : 1. ボタン構成プロパティ
    プロパティ 説明
    要素 ID ボタンの一意の JSON ID 属性。
    表示
    高さ ボタンの高さ (ピクセル単位)
    幅 ボタンの幅 (ピクセル単位)。このプロパティを空白のままにすると、ボタンが使用可能なスペースを埋めます。
    コーナー半径 ボタンの角の半径。この値を大きくすると、ボタンの角が丸くなります。
    マージントップ ボタンの上余白 (ピクセル単位)
    マージン下部 ボタンの下マージン (ピクセル単位)
    左マージン ボタンの左マージン (ピクセル単位)
    右マージン ボタンの右マージン (ピクセル単位)
    境界幅： ボタンの境界線の幅 (ピクセル単位)。
    ボタンのプロパティ
    形式

    ボタンをテキストラベル、アイコン、またはその両方で表示するかどうかを決定します。

    次のオプションのいずれかを選択します。
    • ラベル
    • アイコン
    • ラベルとアイコン
    ラベル ボタンのテキストラベル。
    注:
    このオプションは、[ ラベル ] または [ラベルとアイコン 形式] のいずれかが選択されている場合にのみ表示されます。
    アイコン ボタンに表示されるアイコン。表示されるドロップダウンリストからアイコンを選択します。
    注:
    このオプションは、[ アイコン ] または [ラベルとアイコン 形式] のいずれかが選択されている場合にのみ表示されます。
    アクセス可能名 ボタンの目的を知ることができるように、支援デバイスを使用している人々に読み上げられる代替テキスト。
    注:
    このオプションは、 アイコン 形式が選択されている場合にのみ表示されます。
    アクション
    複数 ユーザーがボタンを選択したときに選択できる複数の異なるアクションのメニューを作成します。
    関数

    事前定義または構成可能な機能を選択します。構成可能な関数は、sys_sg_buttonテーブルから取得されます。

    利用可能な事前定義関数:
    • キャンセル
    • 続行
    • ログアウト
    ボタンの外観
    テキストとアイコンのスタイル テキスト、アイコン、またはその両方の書式設定スタイル。
    背景色変数 ボタンの背景の色変数。
    背景色 ボタンの背景の色。このプロパティの値は HTML カラーコードです (たとえば、シェンナは #A0522D)。
    テキストとアイコンの色の変数 ボタンのテキストとアイコンの色変数。
    テキストとアイコンの色 ボタンのテキストと変数の色。このプロパティの値は HTML カラーコードです (たとえば、シェンナは #A0522D)。
    境界色の変数 ボタンの境界線の色変数。
    ボーダー色 ボタンの境界線の色。このプロパティの値は HTML カラーコードです (たとえば、シェンナは #A0522D)。

    コンテナ

    コンテナーコンポーネントには、他のコンポーネントが含まれています。コンテナーには、任意のカードコンポーネント (別のコンテナーも含む) を含めることができます。コンテナーを使用してカードコンポーネントを整理し、コンテナー内のコンポーネントの配置と分布を決定します。

    表 : 2. コンテナー構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID コンテナーの一意の JSON ID 属性。
    表示
    高さ コンテナーの高さ (ピクセル単位)
    幅 コンテナーの幅 (ピクセル単位)。このプロパティを空白のままにすると、コンテナーは利用可能なスペースを埋めます。
    上マージン コンテナーの上マージン (ピクセル単位)
    下マージン コンテナーの下マージン (ピクセル単位)
    左マージン コンテナーの左マージン (ピクセル単位)
    右マージン コンテナーの右マージン (ピクセル単位)
    コーナー半径 コンテナーのコーナー半径。この値を大きくすると、コンテナーのコーナーが丸くなります。
    外観
    コンテナの方向 コンテナー内のコンポーネントの向きを決定します。次の値から選択します。
    • 水平
    • 垂直
    位置調整 コンテナー内のコンポーネントの配置を決定します。次の値から選択します。
    • ストレッチ
    • センター
    • 左
    • 右
    • 最高
    • 最低
    分布 コンテナー内のコンポーネントの分布を決定します。次の値から選択します。
    • 均等
    • 自動
    背景タイプ コンテナの背景のタイプ。次の値から選択します。
    • なし
    • 色
    • イメージ

    アイコン

    アイコンコンポーネントは、カードにアイコンを表示するために使用されます。[構成] 画面の [アイコン] ドロップダウンメニューからアイコンを選択できます。

    表 : 3. アイコン構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID アイコンの一意の JSON ID 属性。
    表示
    アイコン 表示されるアイコン。
    マージントップ アイコンの上余白 (ピクセル単位)。
    右マージン アイコンの右マージン (ピクセル単位)。
    マージン下部 アイコンの下マージン (ピクセル単位)。
    左マージン アイコンの左マージン (ピクセル単位)。
    外観
    色の変数 アイコンの色変数。
    色 アイコンの色。このプロパティの値は HTML カラーコードです (たとえば、シェンナは #A0522D)。

    イメージ

    画像コンポーネントは、画像の表示に使用されます。表示する画像を定義するには、[ユーザー] レコードの [アバター] フィールドなど、画像を含むレコードのフィールドを選択します。

    表 : 4. 画像構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID イメージの一意の JSON ID 属性。
    表示
    高さ 画像の高さ (ピクセル単位)。
    幅 画像の幅 (ピクセル単位)。
    マージントップ 画像の上余白 (ピクセル単位)。
    右マージン 画像の右マージン (ピクセル単位)。
    マージン下部 画像の下マージン (ピクセル単位)。
    左マージン 画像の左マージン (ピクセル単位)。
    コーナー半径 画像のコーナー半径。この値を大きくすると、画像のコーナーが丸くなります。
    イメージ
    マップされたフィールドを使用 マッピングされたフィールドを画像で使用するかどうかを選択します。
    フィールド値 イメージのマッピングされたフィールドの値。このプロパティは、[ マップされたフィールドを使用 ] が選択されている場合にのみ表示されます。
    添付ファイル 使用する添付画像。このプロパティは、[ マップされたフィールドを使用 ] が選択されていない場合にのみ表示されます。
    画像スケール 画像のスケーリング。次の値から選択します。
    • 枠に合わせる (Fill)
    • 枠幅に合わせる (Fit)

    テキスト

    テキストコンポーネントは、カードにテキストを表示します。これは、静的テキストにすることも、フィールドの値のラベルからのテキストにすることもできます。ユーザーがレコードリストを表示するときに、最初に表示する必要がある情報には、テキストコンポーネントを使用してください。

    表 : 5. テキスト構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID テキストの一意の JSON ID 属性。
    表示
    フィールドタイプ テキストフィールドのタイプ。次の値から選択します。
    • フィールド値
    • フィールド ラベル
    • 静的テキスト
    テキスト値 テキストコンポーネントに表示されるテキスト。この値は、[フィールドタイプ] プロパティで [静的テキスト] を選択した場合にのみ使用されます。
    高さ テキストコンポーネントの高さ (ピクセル単位)。
    幅 テキストコンポーネントの幅 (ピクセル単位)。
    マージントップ テキストコンポーネントの上マージン (ピクセル単位)。
    右マージン テキストコンポーネントの右マージン (ピクセル単位)。
    マージン下部 テキストコンポーネントの下マージン (ピクセル単位)。
    左マージン テキストコンポーネントの左マージン (ピクセル単位)。
    外観
    テキストスタイル テキストの書式設定スタイル。
    テキストの配置 コンポーネント内のテキストの配置。次の値から選択します。
    • 左
    • センター
    • 右
    最大行数 要素内のテキストの最大行数。
    テキストの色の変数 テキストの色変数。
    テキストの色 テキストの色。このプロパティの値は HTML カラーコードです (たとえば、シェンナは #A0522D)。
    注:
    テキストコンポーネントの背景色は変更できませんが、コンテナーコンポーネント内にテキストコンポーネントを配置して、コンテナーの背景色を変更することができます。

    ビデオ

    ビデオコンポーネントは、カードに埋め込みビデオを表示します。Youtube と Viemo の両方のビデオ URL がサポートされています。

    表 : 6. ビデオ構成プロパティ
    プロパティ 説明
    プロパティ
    要素 ID ビデオの一意の JSON ID 属性。
    表示
    マップされたフィールドを使用 ビデオでマッピングされたフィールドを使用するかどうかを選択します。
    フィールド値 ビデオのマップされたフィールドの値。このプロパティは、[ マップされたフィールドを使用 ] が選択されている場合にのみ表示されます。
    URL 埋め込むビデオの URL。このプロパティは、[ マップされたフィールドを使用 ] が選択されていない場合にのみ表示されます。
    再生モード ビデオがモバイルデバイスでどのように表示されるか。次の値から選択します。
    • 全画面
    • インライン
    幅 ビデオコンポーネントの幅 (ピクセル単位)。
    高さ ビデオコンポーネントの高さ (ピクセル単位)。
    マージントップ ビデオコンポーネントの上マージン (ピクセル単位)。
    右マージン ビデオコンポーネントの右マージン (ピクセル単位)。
    マージン下部 ビデオコンポーネントの下マージン (ピクセル単位)。
    左マージン ビデオコンポーネントの左マージン (ピクセル単位)。