画像リスト
概要
Image List コンポーネントは、手動入力または Salesforce クエリのいずれかから画像をレンダリングし、ベースグリッド、キルテッド、ウーブン、またはメーソンリーの4つのレイアウトスタイルを提供します。ユーザーは画像を閲覧、検索、フィルタリングでき、オプションのアイテムアクションで個々のアイテムと対話できます。レスポンシブな列数やソースが欠落した場合のフォールバック画像など、プロパティパネルからすべてを構成できます。
ユースケース
製品画像ギャラリーの表示 営業担当者が利用可能な写真をすべて確認する必要がある製品レコードページ上で。
チームディレクトリページの構築 従業員の写真を表示し、それらがユーザープロファイルにリンクするページ。
Experience Sites 上のポートフォリオショーケース作成 パートナーや顧客がプロジェクトの例を閲覧できるようにするためのもの。
不動産リストでの物件写真の表示 エージェントが利用可能な在庫を確認するためのレコードで。
イベントの写真コレクションの提示 マーケティングキャンペーンの写真を、イベント種別や日付でフィルタリングして表示。
アセットライブラリの表示 ユーザーがカテゴリ、名前、またはカスタム属性で画像を検索およびフィルタリングできる場所。
クイックスタート: アカウントページに連絡先写真を表示する
現在のアカウントに関連するすべての連絡先を表示する稼働中の画像ギャラリーを構築します。これは標準の Salesforce オブジェクトを使用するため、どの組織でも手順を追うことができます。
前提条件: 連絡先に写真が必要です。PhotoUrl が入力されていない場合は、標準のユーザーアイコンをフォールバックとして使用するか、最初にいくつかのテスト連絡先に画像をアップロードしてください。
Dynamic Components で新しいコンポーネントを作成する
を開きます Avonni Dynamic Components App Launcher からアプリを開きます
クリック 新しいコンポーネント
コンポーネントに名前を付けます（例: 「Contact Photo Gallery」）
設定 ターゲットページオブジェクト に Account — これはコンポーネントがアカウントレコードページで動作することを示し、現在のレコードフィールドを参照するための
$Component変数へのアクセスを可能にします。
クリック時のインタラクションを追加
連絡先写真をクリック可能にして連絡先レコードに移動させます:
プロパティパネルの インタラクション タブをクリックします
の下に アイテムクリックで、クリック アイテムクリックを追加
インタラクションダイアログで次を構成します:
タイプとして選択
ナビゲートページ参照タイプとして選択
レコードページオブジェクト API 名として選択
Contactレコード IDとして選択
Record: Id（クリックされた連絡先の ID）アクション名に入力:
表示コンソールタブを開く：切り替えをオフのままにします
クリック 保存
これでユーザーが任意の連絡先写真をクリックすると、その連絡先のレコードページに直接移動します
構成設定
データソース
データソース設定は画像の取得元を決定します。コンポーネント設定で直接画像を定義する Manual を選択するか、Salesforce レコードから動的に画像を取得する Query を選択してください
モード
Manual（静的コンテンツ）または Query（Salesforce レコード）
クエリ
Manual モードのアイテム
Manual モードを使用する場合、各画像をコンポーネント設定内で直接定義します。これは、固定の製品アイコン、チームバナー、または説明図のように頻繁に変わらない静的ギャラリーに適しています。
ラベル
画像の表示名
"Product Front View"
説明
画像とともに表示される追加の詳細テキスト
"高解像度写真で...を表示"
画像
画像ファイルへの URL
/resource/products/widget.png
Name
アイテムの内部識別子
product-front-01
Query モードのデータマッピング
Query モードを使用する場合、Salesforce フィールドを画像リスト表示に接続します。各マッピングは、どのフィールドが画像 URL や表示ラベルなどのデータを含むかをコンポーネントに伝えます。
ラベル
表示名を含むフィールド
Name, Title__c
説明
詳細テキストを含むフィールド
Description__c, Caption__c
画像ソース
画像 URL を含むフィールド
PhotoUrl__c, ImageURL__c
フィルタ
フィルタ値用のフィールド
Category__c, Type__c
検索フィールド
検索対象となるフィールド
Name, Description__c
コンテンツ
これらの設定は、どのレイアウトバリアントを使用するか、ユーザーがアイテムとどのように対話するかなど、画像リストの全体的な外観と動作を制御します。
バリアント
画像のレイアウトスタイル
Base、Quilted、Woven、Masonry
アイテム数を表示
画像の総数を表示する
true / false
レイアウトバリアントの説明:
ベース — すべての画像が同じサイズで表示されるクリーンで均一なグリッド。顔写真や製品サムネイルのような一貫したコンテンツに最適です。
キルテッド — 大きな注目画像と小さな補助画像を交互に配置する構造化されたレイアウト。整理された感覚を保ちながら視覚的な階層を作ります。
ウーブン — 画像を交互の行で織り合わせるような相互に絡み合うパターン。バランスの取れた対称的な外観を維持しつつ視覚的な興味を追加します。
メーソンリー — 画像が自然なアスペクト比を維持するピンタレスト風の段差のあるレイアウト。ポートフォリオ作品、ライフスタイル写真、またはユーザー生成コンテンツのような多様なコンテンツに最適です
ヘッダー
タイトル、キャプション、アバター、およびアクションボタンを備えたヘッダー領域を画像リストの上に追加します。これを使用してギャラリーにラベルを付け、新しい画像のアップロードや表示オプションの変更などのクイックアクションを提供します。
タイトル
メインヘッダーテキスト
"Product Gallery"
キャプション
タイトルの下の補助テキスト
"詳細を見るには任意の画像をクリックしてください"
アバター画像
ヘッダーのアバター/ロゴの URL
/resource/logo.png
結合されているか
ヘッダーと本文を視覚的に接続するスタイル
true / false
アクション
ヘッダー領域のボタンアクション
アクションを追加 → ラベル: "Upload"
表示可能なアクションボタン
オーバーフローが発生する前に表示するアクション数
2
アクションを非表示にする
ヘッダーのすべてのアクションを非表示にする
true / false
アクションを無効にする
ヘッダーアクションをグレーアウトする
true / false
レイアウト
異なる画面サイズで表示される列数を制御します。小、中、大のコンテナに対して異なる値を設定することで、モバイル、タブレット、デスクトップでギャラリーが適切に表示されます。
列数
デフォルトの列数
4
列数（小さなコンテナ）
小さい画面の列数
1
列数（中程度のコンテナ）
中くらいの画面の列数
2
列数（大きなコンテナ）
大きい画面の列数
4
画像
個々の画像がギャラリー内でどのようにレンダリングされるかを構成します。欠落画像のフォールバックを設定し、画像の配置を制御し、画像がコンテナに合わせてどのようにトリミングされるかを定義します。
画像フォールバック
画像ソースが無効または空の場合に表示する URL
/resource/placeholder.png
位置
アイテム内で画像が表示される場所
上、下、左、右
トリミングのフィット方式
画像がコンテナ内でどのようにスケーリングされるか
カバー、コンテイン、フィル
トリミング位置 X
トリミングされた画像の水平方向の配置
左、中央、右
トリミング位置 Y
トリミングされた画像の垂直方向の配置
上、中央、下
アクション
。個々の画像アイテムに表示されるアクション（詳細表示、ダウンロード、編集など）を追加します。各アクションはクリック時に異なるインタラクションをトリガーできます
各アイテムアクションを、ラベル、アイコン、およびクリック時にトリガーするインタラクションで構成します。
ページネーション
画像が多数あるギャラリーでは、ページネーションによりコレクションをページに分割して読み込み時間を改善し、閲覧を容易にします。ユーザーはページネーションコントロールを使ってページ間を移動します。
ページネーションを表示
ページネーションコントロールを表示する
true / false
ページあたりのアイテム数
ページネーション前に表示される画像数
12
フィルタ
ユーザーがマッピングされたフィールド値でギャラリーを絞り込めるようにします。フィルタコントロールの表示場所はページレイアウトとフィルタの目立たせ方に基づいて選択します。
タイプ
フィルタコントロールの表示場所
水平、パネル、ポップオーバー
検索
キーワードを入力して画像を検索できる検索入力を有効にします。検索は Search Fields データマッピングで指定したフィールドに対して一致します。
サイドパネル
フィルタ、詳細、または追加コンテンツ用のオプションのサイドパネルを構成します。パネルは左右どちらにも表示でき、省スペースのために折りたたんだ状態で開始できます。
位置
パネルが表示される側
左、右
閉じているか
パネルが折りたたんだ状態で開始する
true / false
トグルボタンを非表示にする
展開/折りたたみボタンを削除する
true / false
リセットボタンのラベル
フィルタリセットアクションのテキスト
"すべてクリア"
結果なしメッセージ
検索やフィルタ条件に一致する画像がない場合にユーザーが見るメッセージをカスタマイズします。役立つメッセージはユーザーにフィルタを調整するか別の検索語を試すよう案内します。
インタラクション
ギャラリー内の画像とユーザーが対話したときに何が起きるかを定義します。 インタラクションタブ はコードを書かずにクリックとアクションへの応答を構成できるようにします。
利用可能なトリガー
アイテムクリック
ユーザーが画像をクリックしたときに発火します（Items Clickable がオンである必要があります）
詳細ページへナビゲートする、拡大プレビューを開く、関連情報を表示するなど
アイテムアクションクリック
ユーザーが画像アイテム上のアクションボタンをクリックしたときに発火します
画像をダウンロードする、詳細を編集する、レコードを削除するなど
ヘッダーアクションクリック
ユーザーがヘッダーのアクションボタンをクリックしたときに発火します
新しい画像をアップロードする、表示設定を変更する、ギャラリーをエクスポートするなど
インタラクションの構成
キャンバスで Image List 要素を選択します
プロパティパネルの インタラクション タブをクリックします
トリガーを選択します（Item Click、Item Action Click、または Header Action Click）
クリック アクションを追加 し、インタラクションタイプを選択します
アクション設定を構成して保存します
一般的なインタラクションパターン
クリックでレコードへナビゲート
ユーザーが画像をクリックして完全なレコードを表示できるようにします:
設定 アイテムをクリック可能にする コンテンツ設定でオンにします
インタラクションで、次を選択します アイテムクリック
アクションを追加 → ナビゲート
ターゲットを設定します レコードページ
レコード ID を画像レコードの ID フィールドにマップします
パネルでフルサイズプレビューを開く
サイドパネルに画像の大きなバージョンを表示します:
設定 アイテムをクリック可能にする コンテンツ設定でオンにします
インタラクションで、次を選択します アイテムクリック
アクションを追加 → 動的コンポーネントパネルを開く
フル画像を表示するよう構成された動的コンポーネントを選択します
入力変数として画像ソースの URL を渡します
例: 製品写真ギャラリーを作成する
このチュートリアルでは、製品レコードページに表示されるピンタレスト風の写真ギャラリーを作成する手順を示します。ユーザーは製品画像を閲覧し、カテゴリでフィルタし、写真をクリックしてアクションを実行できます。
作成するもの
現在の製品に関連するすべての写真を表示するメーソンリー形式のギャラリー。ギャラリーには横方向のカテゴリフィルタ、大量コレクション向けのページネーション、クリック可能な画像が含まれます。
表示される場所
このコンポーネントを作成してデプロイすると、次に表示されます 製品レコードページ Lightning Experience 上で。ユーザーが任意の製品レコードを開くと、その特定の製品に関連付けられたすべての画像を表示する写真ギャラリーが表示されます。コンポーネントは自動的に現在表示中の製品に属する写真のみを表示するようフィルタします
前提条件
この例では、製品写真を保存するカスタムオブジェクトがあることを前提としています。ない場合は、 カスタムオブジェクトを作成してください という名前で Product Photo （API 名: Product_Photo__c）次のフィールドを持つ
写真名
Name
テキスト（標準）
製品
ProductId__c
Lookup（Product2 への参照）
写真 URL
PhotoURL__c
URL
キャプション
Caption__c
テキスト
カテゴリ
Category__c
ピックリスト（例: Front View、Side View、Detail、Lifestyle）
ソート順
SortOrder__c
数値
クリック時のインタラクションを追加
これでユーザーがギャラリー内の任意の写真をクリックすると、その Product Photo レコードページに直接移動します
プロパティパネルの インタラクション タブをクリックします
の下に アイテムクリックで、クリック アイテムクリックを追加
インタラクションダイアログで次を構成します:
タイプとして選択
ナビゲートページ参照タイプとして選択
レコードページオブジェクト API 名として選択
Product Photoレコード IDとして選択
Record: Id（クリックされた画像レコードの ID）アクション名に入力:
表示コンソールタブを開く：切り替えをオフのままにします
クリック 保存
表示される内容
あなたのギャラリーはメーソンリーレイアウトで製品写真を表示し、高さが異なる画像が優雅に配置されます。ギャラリーの上部にはカテゴリ（Front View、Side View など）でフィルタする水平のフィルタボタンがあり、写真が9枚を超えると下部にページネーションコントロールが表示されます。
最終更新
役に立ちましたか？