> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-gallery.md). # AX - ギャラリー ## 概要 **AX - ギャラリー** Experience Sites ページ上で、画像とコンテンツを4つのレイアウトスタイルで表示する Experience Cloud コンポーネントです: カルーセル（スライドショー）、タブ（整理されたセクション）、グリッド（複数列）、またはギャラリー（画像ショーケース）です。 商品写真、プロジェクトポートフォリオ、事例画像、リソースコレクション、またはポータルユーザーが閲覧する必要のあるあらゆるビジュアルコンテンツを表示するために使用します。レイアウトスタイル、ナビゲーション、画像ソースは Experience Builder でコードなしで設定できます。
{% hint style="info" %} **実際のプロジェクトで見る** [秋のコースカタログ](https://docs.avonnicomponents.com/projects/use-cases/portals-and-partner-sites/fall-course-catalog)：ポータル上のコースカタログ。価格と残席数付きの6枚の写真。 {% endhint %} ## はじめに この簡単なチュートリアルを使って、Gallery コンポーネントの基本を学び、ユースケースの構築を始めましょう。 {% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %} ## 設定 ### データソース その **データソース** は、ギャラリーのコンテンツを定義する場所です。AX - Gallery は2種類のデータソースをサポートしています： **手動** と **クエリ**。（ **API 名** を設定してコンポーネントに一意の識別子を付与し、 **メディア位置** を設定して、各アイテムのメディアをコンテンツに対して相対的に配置します。
| データソース種別 | 説明 | 使用するタイミング | | -------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | | **手動** | 各ギャラリー項目をコンポーネントに直接アップロードするか、入力します。メディアソースピッカーで追加された各画像は、Salesforce Files ライブラリ内に新しいファイルを作成します。 **新しい** Salesforce Files ライブラリ内のファイル。 | 内容が静的で、めったに変更されない一度きりのギャラリー（ランディングページのヒーロー、固定の商品ショーケース、デモ）。 | | **クエリ** | Salesforce オブジェクト（Product、Knowledge、ContentVersion、カスタムオブジェクトなど）から項目を動的に取得します。基になるレコードが変更されると、ギャラリーは自動更新されます。 | Salesforce データと同期し続ける必要があるコンテンツ、定期的にローテーションするコンテンツ、または Experience Builder の外部にいる非技術系チームが管理するコンテンツ。 | {% hint style="info" %} #### **Manual と Query の選択** 手動モードでは **まったく新しいファイル** をライブラリに作成します。Salesforce Files に既に存在するファイルは参照しません。コンテンツを再利用したり、Properties Panel を開き直さずにギャラリーのコンテンツを更新したい場合は、代わりに **クエリ** を使用してください。 {% endhint %} #### Avonni AX - Gallery における共有モデル **Salesforce のデータ共有ルールへの準拠:** * **組織設定の尊重:** Avonni コンポーネントは、Salesforce 組織に既存のデータ共有設定とアクセス設定に完全に準拠しています。 * **干渉しない方針:** これらのコンポーネントは、あらかじめ設定されたデータ共有ルールを一切変更または影響しません。 * **制御された可視性とアクセス:** Avonni コンポーネントを通じてレコードを表示し操作できるかどうかは、組織で定義された共有設定とユーザー権限によって決まります ### メディアソースとして既存の Salesforce Files を使用する その **メディアソース** フィールドは、入力内容に柔軟に対応します。URL、ContentDocumentId、または完全な Salesforce Files のダウンロードパスをマッピングできます。コンポーネントは ContentDocumentId を自動検出し、レンダリング時に正しいプレビュー URL に解決します。 これは、ギャラリーを **Salesforce Files ライブラリ** 内のファイルに向けたまま、コンポーネント経由で再アップロードせずに済ませる方法です。 | Media Source に入力するもの | ギャラリーでレンダリングされるもの | | --------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | を含むフィールド **ContentDocumentId** （で始まる `069…`) | ファイルの最新バージョンが解決され、表示されます。コンポーネントは `069…` ID | | 標準の **VersionDataURL** ContentVersion をクエリする際のフィールド `ContentVersion` | ファイルがダウンロードされ、表示されます。ソースオブジェクトが ContentVersion の場合に推奨されます。 | | 1つの **Shepherd URL** のような式で作成された `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | URL で参照されている正確なバージョンが表示されます。カスタム URL を構築する場合に便利です。 | | 1つの **公開 URL** （外部でホストされている画像） | 画像は外部ソースから読み込まれます。 | #### **Query モードでの設定方法** 1. の中で **データソース**、 **クエリ** を選択し、ソースオブジェクト（`ContentVersion`、ファイル参照を保持するカスタムオブジェクト、または画像フィールドを持つ任意のオブジェクト）を選択します。 2. どのレコードを表示するかを識別するフィルターを適用します（タイトル規則、タグ、カスタムフィールド、選択リスト値などによって）。 3. で **データマッピング**、 **メディアソース** ソースオブジェクトに基づいてマップします： * **ContentVersion をクエリする場合：** メディアソースを標準の `Version Data URL` フィールドにマップします。 * **ContentDocumentId フィールドを持つカスタムオブジェクトをクエリする場合：** メディアソースをそのフィールドに直接マップします（コンポーネントが `069…` ID を自動検出して解決します）。 * **完全な画像 URL フィールドを持つ任意のオブジェクトをクエリする場合：** メディアソースをそのフィールドに直接マップします。 一度設定すれば、ギャラリーのコンテンツ更新は、Salesforce Files ライブラリ内のファイルを差し替えるか、レコード上の参照フィールドを更新するだけで簡単に行えます。 {% hint style="info" %} #### Experience Builder プレビュー Salesforce Files を指す画像は、Builder がポータルユーザーとして認証しないため、Experience Builder のプレビューでは表示されない場合があります。公開サイトにコミュニティユーザーとしてログインすると、正しく表示されます {% endhint %} ### バリアント #### **カルーセル** カルーセルバリアントは、コンテンツ、画像、カードを動的かつ魅力的に見せる方法を提供します。アイテムをスライドショー形式で順番に表示するように設計されており、注目コンテンツ、商品画像、重要なお知らせを強調するのに最適です。
**使用するタイミング：** 次のような場合にカルーセルバリアントを使用します： * 視覚的に魅力的な表示でユーザーの注意を引く。 * 複数の項目や画像を省スペースで表示する。 * サイト上で回転バナーや注目コンテンツセクションを作成する。 **機能：** * **ナビゲーションコントロール：** 矢印ボタンやページネーションドットなどの直感的なコントロールでカルーセルを操作できます。 * **自動再生オプション：** カルーセルを自動的に循環するよう設定し、一時停止と再開が可能です。 * **カスタマイズ可能な外観：** 遷移効果や表示時間などの要素を調整して、サイトのデザインに合うようにカルーセルの見た目を整えます。 #### **タブ** この Tabs バリアントは、コンテンツ表示に整理されたタブ形式のアプローチを導入します。このバリアントは情報を分類するのに理想的で、ユーザーがさまざまなコンテンツセクションをすばやく移動してアクセスできる、すっきりした構造的レイアウトを提供します。
**使用するタイミング：** 次のような必要がある場合に Tabs バリアントを検討してください： * 分類された情報を明確に区分された形式で提示する。 * ユーザーがページを離れずに異なるコンテンツセクションを簡単に切り替えられるようにする。 * 商品仕様、サービスカテゴリ、案内タブなどのコンテンツを使いやすく整理する。 **機能：** * **区分されたコンテンツ：** コンテンツを明確に定義されたタブに整理し、ユーザーが異なるセクションを簡単に見つけて表示できるようにします。 * **ユーザーフレンドリーなナビゲーション：** ユーザーがタブ間をシームレスに切り替えられるようにし、スムーズで直感的な体験を実現します。 * **カスタマイズ可能なデザイン：** タブラベル、レイアウト、配色などの要素を変更して、ブランドやサイトの美観に合わせてタブの外観を調整します。 #### **グリッド** 構造化された複数列レイアウトでコンテンツを表示します。各項目はグリッド内の1つのセルを占めます。 **使用するタイミング：** 次のような、各項目を同等に強調して表示したいコレクションに最適です： * 商品一覧 * チームメンバーのプロフィール * ブログ投稿のプレビュー **機能** * 列数をカスタマイズ可能 * 項目間の間隔（ギャップ）を定義する機能 * 各グリッドセル内の画像、タイトル、説明、CTA ボタンのオプション #### **ギャラリー** 画像を前面に押し出して表示する視覚重視のレイアウトです。 **使用するタイミング：** 次のような画像ベースのコンテンツを強調するのに最適です： * 写真ポートフォリオ * 商品ギャラリー * 画像中心の注目コンテンツ **機能** * 大きく高品質な画像に重点を置く * 画像の拡大表示用にキャプションやライトボックス機能を含めるオプション * 創造的なレイアウトやホバー効果の可能性 ## インタラクション "Link to" セクションでは、Avonni Gallery の項目をユーザーがクリックしたときに何が起こるかを決定します。これを使用して、ユーザーを詳細ページに誘導したり、新しいコンテンツを開いたり、他のアクションをトリガーしたりします。 **例：** * たとえば、注目の住宅をギャラリーで紹介し、ユーザーが各画像をクリックすると別ページで詳細を確認できるようにします。 ## スタイル スタイル属性を使うと、ギャラリー内の各要素の見た目を制御できます。設定は、影響を受ける対象ごとにグループ化されています。
{% tabs %} {% tab title="全般" %} すべてのバリアント（カルーセル、タブ、グリッド、ギャラリー）に適用されます。 | 設定 | 制御対象 | | ------------ | ------------------------- | | **サイズ** | ギャラリー全体の幅と高さ。 | | **枠線** | ギャラリー周囲の境界線のスタイル、幅、色。 | | **キャプション** | 各項目に表示されるキャプションテキストのスタイル。 | | **タイトル** | 各項目のタイトルテキストのスタイル。 | | **コンテンツ** | 各項目内のメインコンテンツ領域のスタイル。 | | **メディア** | 画像と動画の表示方法（フィット、配置、サイズ）。 | | {% endtab %} | | {% tab title="カルーセルバリアント" %} の場合にのみ適用されます **バリアント** が `カルーセル`. | 設定 | 制御対象 | | ------------------------- | ------------------------ | | **スライドショー項目** | 各カルーセル項目の背景、配置、間隔。 | | **スライドショー項目のタイトル** | 項目タイトルのフォント、サイズ、色。 | | **スライドショー項目の説明** | 項目説明のフォント、サイズ、色。 | | **スライドショー画像** | 各項目内の画像のサイズと枠線。 | | **スライドショーのアクティブインジケーター** | 現在表示中の項目を示すインジケーターのスタイル。 | | **スライドショーの非アクティブインジケーター** | 非アクティブ項目のインジケーターのスタイル。 | | **スライドショーのナビゲーションボタン** | 前/次のナビゲーションボタンのスタイル。 | | {% endtab %} | | {% tab title="Tabs バリアント" %} の場合にのみ適用されます **バリアント** が `タブ`. | 設定 | 制御対象 | | --------------------- | --------------------- | | **タブ** | 各個別タブのスタイル。 | | **タブの境界線** | 各タブの周囲の境界線。 | | **アクティブ/ホバー時のタブの境界線** | アクティブタブおよびホバー状態の境界線。 | | **タブの背景** | タブの背景色または背景画像。 | | **タブラベル** | タブラベルのフォント、サイズ、色。 | | **タブのサブタイトル** | タブのサブタイトルのフォント、サイズ、色。 | | {% endtab %} | | | {% endtabs %} | | ## トラブルシューティング | 問題 | 原因 | 修正 | | --------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- | | **Experience Builder では画像がプレビューされないが、公開サイトでは正しく表示される** | Experience Builder はポータルユーザーとして認証しないため、プレビュー中に Salesforce Files から画像を取得できません。 | 想定どおりの動作です。公開サイトにコミュニティユーザーとしてログインし、画像が正しく表示されることを確認してください。 | | **"プレビューは利用できません" が手動モードで表示される** | アップロードした画像に公開リンクのフラグが付いていないため、ポータルユーザーは読み込めません。 | 画像を再アップロードし、アップロード時に **公開リンク** にチェックを入れるか、標準の共有ルールが適用される Query モードに切り替えてください。 | | **画像を変更するたびに手動モードでは再アップロードが必要になる** | 手動モードは直接アップロード方式であり、既存の Salesforce Files を参照しません。 | 使用 **クエリ** モードを ContentVersion またはファイル参照を保持するカスタムオブジェクトで使用します。上記の *メディアソースとして既存の Salesforce Files を使用する* を参照してください。 | | **ギャラリーがポータルユーザーには空に見えるが、Experience Builder プレビューでは動作する** | ポータルユーザーのプロファイルには、クエリ対象オブジェクトまたは参照ファイルへのアクセス権がありません。 | プロファイルのオブジェクト権限、項目レベルセキュリティ、ライブラリ/共有アクセスを `ContentVersion` またはソースオブジェクト上で確認してください。 | | **画像がまったく表示されない（プレビューでも公開サイトでも）** | Media Source が、有効なファイル参照を含まないフィールドにマップされています（ContentDocumentId が `069…`で始まる `Version Data URL` 、ContentVersion 上の | フィールド、または公開画像 URL）。 `Version Data URL` カスタムオブジェクトでは、ContentDocumentId（ `069…`で始まる）を保存し、メディアソースをそのフィールドに直接マップします。 | | **ギャラリーには正しいタイトルが表示されるが、画像がすべて壊れている** | Media Source が、ContentDocumentId または有効な URL を含まないフィールドにマップされています。 | Data Mappings で、Media Source が ContentDocumentId フィールド、shepherd URL、または有効な公開画像 URL を指していることを確認してください。 | ## ユースケース ### 例1：顧客ニュースカルーセル {% @arcade/embed url="" flowId="pOjxSsq8rQ3YgZFvjMgr" %} 顧客に最新記事を Experience Cloud のホームページ上で直接紹介して、情報提供とエンゲージメントを高めましょう。AX Gallery コンポーネントを使うと、新しいコンテンツが公開されるたびに自動更新される、画像豊富な動的ニュースカルーセルを簡単に表示できます。 *** #### **達成できること** * **新鮮なコンテンツをひと目で：** 最新の Knowledge 記事を画像付きでホームページに表示し、訪問者が更新を見逃さないようにします。 * **手間のない閲覧：** 会社ニュースをすっきりした構造的なカルーセルレイアウトで閲覧できるようにします。 * **ターゲットを絞ったフィルタリング：** カスタムの選択リスト項目を活用して News 記事のみを表示し、カルーセルを焦点が定まった関連性の高いものに保ちます。 *** #### **開始前に** * **`ImageId__c` フィールド：** Knowledge オブジェクトにテキスト項目を作成し、各記事の画像の Content Document ID を保存します。 * **`Type__c` フィールド：** Knowledge オブジェクトに選択リスト項目を作成して記事を分類し、 **News** の値が存在し、記事に適用されていることを確認します。 *** #### **設定方法** {% stepper %} {% step %} #### **コンポーネントをページに追加する** * をドラッグします **AX Gallery** コンポーネントを Experience Builder の希望するページに配置します。 {% endstep %} {% step %} #### **コンポーネントの表示をカスタマイズする** * を **タイトル** に設定します `News Carousel`. * を **キャプション** に設定します `毎週の記事をご覧ください`. * を **列数** に設定します `3`. {% endstep %} {% step %} #### **データソースを設定する** * データソース設定で新しいクエリを作成します。 * 選択 **Knowledge** をオブジェクトとして（一覧で2番目の Knowledge オプションを必ず選択してください）。 * フィルターを追加します： **Type\_\_c が** `News`. * 並び順を **作成日、降順** に設定して、最新の記事が常に先頭に表示されるようにします。 {% endstep %} {% step %} #### **データマッピングを設定する** * を **タイトル** Knowledge の `タイトル` フィールドにマップします。 * を **メディアソース** に設定します `ImageId__c` にマップして、記事画像を取り込みます。 * を **再生速度** に設定します `5`. {% endstep %} {% step %} #### **作業内容をプレビューする** * 公開する前に、Experience Builder のプレビューを使用して、カルーセルに正しい記事、画像、レイアウトが表示されることを確認します。 {% endstep %} {% endstepper %} *** ### 例2：顧客製品ギャラリー {% @arcade/embed url="" flowId="aIu9ZNuteXdewe19LJL0" %} ホームページから直接、製品カタログを視覚的に魅力的に発見できるようにしましょう。AX Gallery コンポーネントを Product データと組み合わせることで、注目製品を強調し、訪問者を製品詳細ページへ直接誘導する目を引くカルーセルを作成できます。 *** #### **達成できること** * **視覚的な商品ショーケース：** 豊富な画像を前面に押し出したカルーセルで注目のヘッドホンを表示し、閲覧を促します。 * **シームレスなナビゲーション：** 顧客がカルーセルから個々の商品詳細ページへ簡単に移動できるようにします。 * **厳選されたホームページ体験：** ホームページで注目カタログのみを表示し、最も重要な製品を強調します。 *** #### **開始前に** * **`Type__c` フィールド：** Product2 オブジェクトに選択リスト項目を作成し、 **Headphone** の値が存在することを確認して、カルーセルを適切な製品に絞り込めるようにします。 * **`ContentDocumentId__c` フィールド：** Product2 オブジェクトにテキスト項目を作成し、各製品の画像 URL を保存します。 *** #### **設定方法** {% stepper %} {% step %} #### **コンポーネントをページに追加する** * をドラッグします **AX Gallery** コンポーネントを Experience Builder の希望するページに配置します。 {% endstep %} {% step %} #### **コンポーネントの表示をカスタマイズする** * を **タイトル** に設定します `製品カルーセル`. * を **キャプション** に設定します `注目製品をご覧ください！` * を **列数** に設定します `3`. {% endstep %} {% step %} #### **データソースを設定する** * データソース設定で新しいクエリを作成します。 * 選択 **Product** をオブジェクトとして使用します。 {% endstep %} {% step %} #### **データマッピングを設定する** * を **タイトル** を `Product Name` フィールドにマップします。 * を **メディアソース** に設定します `ContentDocumentId__c` にマップして、各製品の画像を表示します。 * を **再生速度** に設定します `5`. {% endstep %} {% step %} #### **作業内容をプレビューする** * 公開する前に、Experience Builder のプレビューで製品、画像、カルーセルのレイアウトが想定どおり表示されることを確認します。 {% endstep %} {% endstepper %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-ja/experience-components/ax-gallery.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.