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