# クイックスタートガイド

{% hint style="warning" %}

#### 重要

Experience Cloud の Web サイトで Avonni コンポーネントを使用する前に、次の「**Lightning Web Security**」オプションを有効にしていることを確認してください。このトグルは設定パネルの「**セキュリティとプライバシー**」セクションにあります。この設定が有効になっていないと、Avonni コンポーネントが正しく動作しない場合があります。

<img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FCmUBVdi8u4oYpXnv92ap%2F2023-11-13_14-21-22.png?alt=media&#x26;token=35f1f7bf-4ae6-44d1-8d14-744e65a7d69f" alt="" data-size="original">
{% endhint %}

## Avonni コンポーネントへのアクセス

をインストールした後、 [**Avonni Experience Components パッケージ**](https://appexchange.salesforce.com/appxListingDetail?listingId=2e584bb3-b5e0-415d-9347-d6567158d840\&channel=recommended\&cta=gin\&other_source=AppExchange+Recommended)、Experience Cloud サイトのエディタでこれらのコンポーネントを見つけて使用できます：

### **コンポーネントを見つける**

1. Experience Builder で Experience サイトを開く
2. をクリックします： **コンポーネント** パネル（通常は左サイドバー）
3. にスクロールします： **カスタムコンポーネント** セクション
4. 「AX -」で始まるコンポーネントを探してください（例：AX - Data Table、AX - Calendar、AX - Kanban）

### **コンポーネントをページに追加する**

カスタムコンポーネント一覧で AX コンポーネントを見つけたら、それらをページキャンバスにドラッグ＆ドロップするだけです。その後、右側のプロパティパネルでコンポーネントの設定を構成します。

Experience Sites 用のすべての AX コンポーネントには「AX -」というプレフィックスが付いており、標準の Salesforce コンポーネントと識別・区別しやすくなっています。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F9Cewo9L7nYY8gG7SDqV8%2F2023-11-30_15-54-35.png?alt=media&#x26;token=e996c4f8-bd21-4533-b33a-0b3e80abab6f" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

#### 注

以前に Screen Flow 用の Avonni コンポーネントパッケージをインストールしている場合、Experience Sites コンポーネントは別の命名形式を使用することに注意してください：

* **Experience Sites コンポーネント：** AX - コンポーネント名（例：AX - Kanban、AX - Data Table）
* **Screen Flow コンポーネント：** Avonni - コンポーネント名（例：Avonni Kanban、Avonni Data Table）

両者は組織内で共存できます。
{% endhint %}

この手順により、インストール後に Avonni コンポーネントが Experience Site の編集環境内ですぐに利用でき、識別しやすくなり、デジタルプロジェクトへのシームレスな統合と使用が可能になります。