> 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 でレイアウトスタイル、ナビゲーション、画像ソースを設定できます。
***
## はじめに
このシンプルなチュートリアルを使って、Gallery コンポーネントの基本を学び、ユースケースの構築を始めましょう。
{% @arcade/embed url="" flowId="QrGyk84126ycSIM6P0oX" %}
***
## Salesforce データに接続
この **データソース** は、ギャラリーのコンテンツを定義する場所です。AX - Gallery は、2 種類のデータソースをサポートしています: **手動** と **クエリ**.
| データソースの種類 | 説明 | 使用するタイミング |
| --------- | ------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **手動** | 各ギャラリー項目をコンポーネントに直接アップロードまたは入力します。Media Source ピッカーを通じて追加された各画像は、 **新しい** Salesforce Files ライブラリ内のファイルです。 | ほとんど変更されない静的コンテンツの単発ギャラリー（ランディングページのヒーロー、固定の商品ショーケース、デモなど）。 |
| **クエリ** | Salesforce オブジェクト（Product、Knowledge、ContentVersion、カスタムオブジェクトなど）から項目を動的に取得します。基になるレコードが変更されると、ギャラリーは自動更新されます。 | Salesforce データとの同期を維持する必要があるコンテンツ、定期的に入れ替える必要があるコンテンツ、または Experience Builder 外で非技術チームによって管理されるコンテンツ。 |
{% hint style="info" %}
#### **手動とクエリの選択**
手動モードでは、 **まったく新しいファイル** を、画像をアップロードするたびにライブラリ内に作成します。既に Salesforce Files に存在するファイルは参照しません。Properties Panel を再度開かずにギャラリーのコンテンツを再利用または更新する必要がある場合は、 **クエリ** 代わりにそれを使用してください。
{% endhint %}
#### Avonni AX - Gallery でのモデル共有
**Salesforce のデータ共有ルールの遵守:**
* **組織設定の尊重:** Avonni Components は、Salesforce 組織の既存のデータ共有設定とアクセス設定に完全に準拠しています。
* **干渉しない方針:** これらのコンポーネントは、あらかじめ設定されたデータ共有ルールをいかなる形でも変更または影響しません。
* **制御された表示とアクセス:** Avonni コンポーネントを通じてレコードを表示・操作できるかどうかは、組織で定義された共有設定とユーザー権限によって管理されます
***
### 既存の Salesforce Files を Media Source として使用する
この **メディアソース** フィールドは、入力内容に対して柔軟です。URL、ContentDocumentId、または完全な Salesforce Files のダウンロードパスにマッピングできます。コンポーネントは ContentDocumentId を自動検出し、レンダリング時に正しいプレビュー URL に解決します。
これは、ギャラリーを **Salesforce Files ライブラリ** 内のファイルに向けたまま、コンポーネント経由で再アップロードする必要をなくす方法です。
| Media Source に入れるもの | ギャラリーがレンダリングするもの |
| ------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |
| 次を含むフィールド **ContentDocumentId** （ `069…`) | で始まるファイルの最新バージョンが解決されて表示されます。コンポーネントは `069…` ID を自動検出します。 |
| 標準の **VersionDataURL** フィールド（ `ContentVersion` | をクエリする場合）。ファイルがダウンロードされて表示されます。ソースオブジェクトが ContentVersion の場合に推奨されます。 |
| 次のような **Shepherd URL** 式で構築された `/sfc/servlet.shepherd/version/download/{{Record.Id}}` | URL で参照されている正確なバージョンが表示されます。カスタム URL の構築に便利です。 |
| 次のような **公開 URL** （外部でホストされている画像） | 画像は外部ソースから読み込まれます。 |
#### **Query モードでの設定方法**
1. 次で **データソース**、選択し **クエリ** ソースオブジェクト（`ContentVersion`、ファイル参照を保持するカスタムオブジェクト、または画像フィールドを持つ任意のオブジェクト）を選択します。
2. どのレコードを表示するかを識別するフィルターを適用します（タイトルの命名規則、タグ、カスタムフィールド、選択リスト値などによる）。
3. では **データマッピング**で、 **メディアソース** ソースオブジェクトに基づいてマッピングします:
* **ContentVersion をクエリする場合:** Media Source を標準の `Version Data URL` フィールドにマッピングします。
* **ContentDocumentId フィールドを持つカスタムオブジェクトをクエリする場合:** Media Source をそのフィールドに直接マッピングします（コンポーネントは `069…` ID を自動検出して解決します）。
* **完全な画像 URL フィールドを持つ任意のオブジェクトをクエリする場合:** Media Source をそのフィールドに直接マッピングします。
設定が完了すると、ギャラリーのコンテンツ更新は、Salesforce Files ライブラリ内のファイルを置き換えるか、レコード上の参照フィールドを更新するだけで済みます。
{% hint style="info" %}
#### Experience Builder プレビュー
Salesforce Files を参照する画像は、Builder がポータルユーザーとして認証しないため、Experience Builder のプレビューではレンダリングされない場合があります。公開サイトにコミュニティユーザーとしてログインすると、正しくレンダリングされます
{% endhint %}
***
## バリアントの設定
### **カルーセル**
Carousel バリアントは、コンテンツ、画像、またはカードを紹介するための動的で魅力的な方法を提供します。スライドショー形式で項目を順番に表示するように設計されており、注目コンテンツ、製品画像、または重要なお知らせを強調表示するのに最適です。
**使用するタイミング:** 次のことをしたい場合に Carousel バリアントを活用してください:
* 視覚的に魅力的な表示でユーザーの注意を引く。
* 複数の項目や画像を省スペースで表示する。
* サイト上に回転バナーや注目コンテンツのセクションを作成する。
**機能:**
* **ナビゲーションコントロール:** 矢印ボタンやページネーションドットなどの直感的なコントロールでカルーセルを操作します。
* **自動再生オプション:** カルーセルが項目を自動的に巡回するように設定でき、一時停止と再開も可能です。
* **カスタマイズ可能な外観:** トランジション効果や表示時間などの要素を調整して、カルーセルの見た目と操作感をサイトのデザインに合わせてカスタマイズします。
### **タブ**
Tabs バリアントは、整理された表形式のコンテンツ表示アプローチを導入します。このバリアントは情報のカテゴリ分けに最適で、ユーザーが異なるコンテンツセクションをすばやく移動してアクセスできる、すっきりした構造化レイアウトを提供します。
**使用するタイミング:** 次のような必要がある場合は Tabs バリアントを検討してください:
* 分類された情報を、明確に区切られた形式で提示する。
* ユーザーがページを離れることなく、異なるコンテンツセクションを簡単に切り替えられるようにする。
* 製品仕様、サービスカテゴリ、または情報タブなどのコンテンツを、ユーザーフレンドリーな方法で整理する。
**機能:**
* **セグメント化されたコンテンツ:** コンテンツを明確に定義されたタブに整理し、ユーザーがさまざまなセクションを見つけて表示しやすくします。
* **ユーザーフレンドリーなナビゲーション:** ユーザーがタブをシームレスに切り替えられるようにし、スムーズで直感的な体験を実現します。
* **カスタマイズ可能なデザイン:** タブラベル、レイアウト、配色などの要素を変更して、タブの外観をブランドやサイトの美観に合わせて調整します。
### **グリッド**
構造化された複数列レイアウトでコンテンツを表示します。各項目はグリッド内のセルを占有します。
**使用するタイミング:** 次のように、各項目を同等に強調したいコレクションの表示に最適です:
* 商品一覧
* チームメンバーのプロフィール
* ブログ投稿のプレビュー
**機能**
* 列数をカスタマイズ可能
* 項目間の間隔（ギャップ）を定義できる
* 各グリッドセル内で画像、タイトル、説明、コールトゥアクションボタンを設定するオプション
### **ギャラリー**
画像を目立たせて見せる、ビジュアル主導のレイアウトです。
**使用するタイミング:** 次のような画像ベースのコンテンツを強調するのに最適です:
* 写真ポートフォリオ
* 商品ギャラリー
* 画像中心の注目コンテンツ
**機能**
* 大きく高品質な画像に重点を置く
* キャプションを含めたり、画像を拡大表示するためのライトボックス機能を追加したりするオプション
* クリエイティブなレイアウトやホバー効果の可能性
***
## Interactions
「Link to」セクションは、ユーザーが Avonni Gallery 内の項目をクリックしたときに何が起こるかを決定します。これを使用して、詳細ページへ誘導したり、新しいコンテンツを開いたり、その他のアクションをトリガーしたりできます。
**例：**
* たとえば、注目の住宅をギャラリーで紹介し、ユーザーが各画像をクリックして別ページで詳細を見られるようにします。
***
## スタイルの外観
スタイル属性を使用すると、ギャラリー内のすべての要素の視覚的な外観を制御できます。設定は、影響する対象ごとにグループ化されています。
### 一般的なギャラリー設定
すべてのバリアント（Carousel、Tabs、Grid、Gallery）に適用されます。
| 設定 | 制御する内容 |
| ---------- | -------------------------- |
| **サイズ** | ギャラリー全体の幅と高さ。 |
| **枠線** | ギャラリーの周囲の境界線のスタイル、幅、色。 |
| **キャプション** | 各項目に表示されるキャプションテキストのスタイル。 |
| **タイトル** | 各項目のタイトルテキストのスタイル。 |
| **コンテンツ** | 各項目内のメインコンテンツ領域のスタイル。 |
| **メディア** | 画像や動画の表示方法（フィット、配置、サイズ設定）。 |
### Carousel バリアント
次の場合にのみ適用されます **バリアント** が次に設定されている場合 `カルーセル`.
| 設定 | 制御する内容 |
| ------------------------- | ---------------------- |
| **スライドショー項目** | 各カルーセル項目の背景、配置、間隔。 |
| **スライドショー項目タイトル** | 項目タイトルのフォント、サイズ、色。 |
| **スライドショー項目説明** | 項目説明のフォント、サイズ、色。 |
| **スライドショー画像** | 各項目内の画像のサイズと境界線。 |
| **スライドショーのアクティブインジケーター** | 現在表示中の項目のインジケーターのスタイル。 |
| **スライドショーの非アクティブインジケーター** | 非アクティブ項目のインジケーターのスタイル。 |
| **スライドショーのナビゲーションボタン** | 前へ／次へナビゲーションボタンのスタイル。 |
### Tabs バリアント
次の場合にのみ適用されます **バリアント** が次に設定されている場合 `タブ`.
| 設定 | 制御する内容 |
| -------------------- | --------------------- |
| **タブ** | 各個別タブのスタイル。 |
| **タブの境界線** | 各タブの周囲の境界線。 |
| **アクティブ／ホバー時のタブ境界線** | アクティブなタブおよびホバー状態の境界線。 |
| **タブの背景** | タブの背景色または背景画像。 |
| **タブラベル** | タブラベルのフォント、サイズ、色。 |
| **タブのサブタイトル** | タブのサブタイトルのフォント、サイズ、色。 |
***
## トラブルシューティング
| 問題 | 原因 | 修正方法 |
| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Experience Builder では画像がプレビューされないが、公開サイトでは正しく表示される** | Experience Builder はポータルユーザーとして認証しないため、プレビュー中に Salesforce Files から画像を取得できません。 | 想定される動作です。コミュニティユーザーとして公開サイトにログインし、画像が正しくレンダリングされることを確認してください。 |
| **手動モードで「利用可能なプレビューがありません」と表示される** | アップロードされた画像が公開リンクとして設定されていないため、ポータルユーザーはそれを読み込めません。 | 画像を再アップロードし、 **公開リンク** をアップロード時にチェックするか、標準の共有ルールが適用される Query モードに切り替えてください。 |
| **手動モードでは、画像を変更したいときに毎回再アップロードする必要がある** | 手動モードは直接アップローダーであり、既存の Salesforce Files を参照しません。 | 使用してください **クエリ** モードで、ContentVersion またはファイル参照を保持するカスタムオブジェクトを使用します。 *既存の Salesforce Files を Media Source として使用する* 上記を参照してください。 |
| **ポータルユーザーには Gallery が空に見えるが、Experience Builder のプレビューでは動作する** | ポータルユーザーのプロファイルに、クエリ対象オブジェクトまたは参照ファイルへのアクセス権がありません。 | プロファイルのオブジェクト権限、項目レベルセキュリティ、および `ContentVersion` またはソースオブジェクトに対するライブラリ／共有アクセスを確認してください。 |
| **画像がまったくレンダリングされない（プレビューでも公開サイトでも）** | Media Source が、有効なファイル参照（ `069…`で始まる ContentDocumentId、 `Version Data URL` ContentVersion 上のフィールド、または公開画像 URL）を含まないフィールドにマッピングされています。 | マッピングされたフィールドに実際に何が含まれているかを確認してください。ContentVersion をクエリする場合は、標準の `Version Data URL` フィールドを使用してください。カスタムオブジェクトでは、ContentDocumentId（ `069…`で始まる）を保存し、Media Source をそのフィールドに直接マッピングしてください。 |
| **Gallery に正しいタイトルは表示されるが、すべての画像が壊れている** | 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` フィールド:** 各記事の画像の Content Document ID を保存するために、Knowledge オブジェクトにテキスト項目を作成します。
* **`Type__c` フィールド:** Knowledge オブジェクトに記事を分類するための選択リスト項目を作成し、 **News** 値が存在し、記事に適用されていることを確認します。
***
#### **設定方法**
{% stepper %}
{% step %}
#### **コンポーネントをページに追加する**
* 次をドラッグします **AX Gallery** コンポーネントを Experience Builder の目的のページ上に配置します。
{% endstep %}
{% step %}
#### **コンポーネント表示をカスタマイズする**
* を **タイトル** に `ニュースカルーセル`.
* を **キャプション** に `毎週の記事をご覧ください`.
* を **列数** に `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` フィールド:** 各製品の画像 URL を保存するために、Product2 オブジェクトにテキスト項目を作成します。
***
#### **設定方法**
{% stepper %}
{% step %}
#### **コンポーネントをページに追加する**
* 次をドラッグします **AX Gallery** コンポーネントを Experience Builder の目的のページ上に配置します。
{% endstep %}
{% step %}
#### **コンポーネント表示をカスタマイズする**
* を **タイトル** に `製品カルーセル`.
* を **キャプション** に `注目の商品をご覧ください！`
* を **列数** に `3`.
{% endstep %}
{% step %}
#### **データソースを設定する**
* データソース設定で新しいクエリを作成します。
* 選択 **Product** をオブジェクトとして指定します。
{% endstep %}
{% step %}
#### **データマッピングを設定する**
* マップ **タイトル** を `製品名` フィールドにマッピングします。
* マップ **メディアソース** に `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.