# 移動

## 概要

Navigate（ナビゲート）インタラクションは、ユーザーがコンポーネント（例：ボタン）とやり取りしたときにナビゲーションアクションを定義できるようにします。この機能により、さまざまなページタイプへのシームレスなリダイレクトが可能になり、ユーザーのエンゲージメントを高め、サイト全体でスムーズな閲覧体験を作り出します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FtlkRQRTe0y31PgiN6g8K%2F2023-11-06_11-26-43.png?alt=media&#x26;token=b0f59ea3-6bb3-4614-9338-c5b9ccc3fc9e" alt="" width="563"><figcaption></figcaption></figure>

### **主な機能**

* 複数のページ参照タイプをサポート
* カスタマイズ可能なナビゲーションアクション
* サイトのナビゲーションフローを改善

### ユースケース

* **製品ページ：** 詳細な製品仕様ページにリダイレクトします。
* **サポートページ：** ヘルプ記事や問い合わせフォームに移動します。
* **コミュニティページ：** メンバープロファイルや議論スレッドにリンクします。
* **イベントページ：** イベント登録フォームへ誘導します。
* **ランディングページ：** キャンペーン詳細ページへの案内を行います。
* **プロフィールページ：** 関連する連絡先レコードへナビゲートします。

## 設定

Experience Cloud サイトのページ上のコンポーネント（例：ボタン）に Navigate インタラクションを追加し、Experience Builder の Interactions タブで設定します。

### **利用可能なナビゲーションタイプ**

これらのページ参照タイプは、ユーザーがどこに誘導されるかを指定します。

| ナビゲーションタイプ             | 説明                                    | 利用例                          |
| ---------------------- | ------------------------------------- | ---------------------------- |
| **Aura - 外部レコードページ**   | Aura フレームワークを使用して特定のレコードページにリンクします。   | 取引先担当者の詳細を表示します。             |
| **Aura - 外部レコード関連ページ** | 関連レコード（例：取引先の取引先担当者）へのリンクです。          | 取引先の商談を確認します。                |
| **Aura - ログインページ**     | ログインまたはログアウトのアクションをトリガーします。           | 制限されたコンテンツにアクセスするためにログインします。 |
| **ナレッジ記事**             | 特定のナレッジ記事へ移動します。                      | サポート記事にアクセスします。              |
| **管理コンテンツページ**         | CMSで管理されているコンテンツページへのリンクです。           | ニュース記事を表示します。                |
| **名前付きページ**            | 内部の Experience Builder ページへリダイレクトします。 | 「サポート」という名前のページに移動します。       |
| **オブジェクトページ**          | オブジェクトのリストビューまたは新規レコード作成ページへナビゲートします。 | 取引先担当者のリストビューを開きます。          |
| **レコードページ**            | 特定のレコードの詳細ページにリンクします。                 | 取引先レコードを表示します。               |
| **レコード関連ページ**          | 関連リスト（例：取引先連絡先の商談）に移動します。             | 取引先のケースを表示します。               |
| **ウェブページ**             | 外部または内部のウェブページへリダイレクトします。             | パートナーサイトへのリンク。               |

*<mark style="color:デフォルト;background-color:green;">**ベストプラクティス**</mark>:* 対象に基づいてタイプを選択します（例：レコードの場合はレコードページ）；プレビューでナビゲーションをテストしてください。

**特定ページへのナビゲーションの設定**

特定のページやリソースへのナビゲーションを設定するには、ユースケースに応じて以下の手順に従ってください：

### **名前付きページへ移動**

1. ボタンコンポーネントを追加し、次の場所へ移動します。 **インタラクション** タブ。
2. 選択 **移動** を選んで **名前付きページ**.
3. **ページ名：** 対象ページのAPI名を入力します（例：Content\_Document\_\_c）。
4. *なぜ？* Experience Builderで定義された内部ページ（例：コンテンツドキュメントページ）にユーザを直接誘導します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2Fd2OdAatoU9AOjfyO2P0e%2F2025-09-05_15-36-22.png?alt=media&#x26;token=00a9702f-4aaf-44d7-9d87-9be052fedf24" alt=""><figcaption></figcaption></figure>

### **レコードページへ移動**

Experience Cloudサイトでボタンやコンポーネントが特定のレコードの詳細ページを開くようにする場合は、このオプションを使用します。

#### 設定手順

1. 選択 **移動** を選んで **レコードページ**.
2. **オブジェクトAPI名：** オブジェクトを入力します（例：Contact）。
3. **レコードID：** リダイレクト先の正しいレコードIDフィールドを選択してください。通常は「**`Record: Id`**」です。
4. **アクション名：** ビューに設定します（詳細のデフォルト）。

*なぜ？* 特定のレコード（例：取引先責任者レコード）の詳細ページへユーザを誘導します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2F0e6UxR4PyIPq33uW4wPC%2F2025-09-05_15-41-52.png?alt=media&#x26;token=3a18568f-5aa0-4d54-bfb2-bf3fa72de303" alt="" width="304"><figcaption></figcaption></figure>

{% hint style="warning" %}

#### 重要

レコードページへのナビゲーションが正しく機能するようにするには、まずNavigateインタラクションが遷移するExperienceサイト上のオブジェクトページを作成してください。このページが存在しない場合、レコードページへのナビゲーションは機能しません。
{% endhint %}

### **外部ウェブページへ移動**

ボタンやコンポーネントで外部サイトや別のウェブリソース（例：メインサイト、パートナーポータル、ドキュメントページ）を開く場合は、このオプションを使用します。

#### 設定手順

1. を選択し、 **移動** インタラクションを選んで **ウェブページ** オプションを選択します。
2. **ターゲットURL：** 次のいずれかを行えます：
   * フィールドを選択します（例：URLを格納するレコード上の数式フィールド）して、リダイレクト先を動的に設定します。
   * または、 **カスタム** を選んで外部URLを手動で入力します（例：<https://www.example.com）。>
3. **なぜ？** このオプションはユーザを外部のウェブサイトやリソースにリダイレクトし、サイトの接続性を高めます。
4. **トラブルシューティング：** ナビゲーションが機能しない場合は、URLや選択されたフィールド値が有効か、ユーザが対象サイトにアクセスする権限を持っているかを確認してください。

### **名前付きページへの Navigate で URL パラメータを渡す**

この機能は、動的データ（例：レコード ID）をターゲットページに送信し、ユーザーのコンテキストに基づいてその内容をカスタマイズできるようにします。特定のレコード詳細を新しいページで表示するなど、パーソナライズされた体験を作成するのに最適です。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FXrIBtaU3JgTJSaaCgx3e%2F2024-10-17_15-22-41.png?alt=media&#x26;token=69f7d53a-c4a7-4e62-88c8-9c1de55c1587" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **ターゲットページの設定**

ターゲットページ（例：CustomerDetails）に Avonni Record Detail のようなコンポーネントを追加します。その「Record ID」属性には、recordId という名前の URL パラメータを取得するために式 {!Route.recordId} を使用します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FBIIdsdEBZirvtvLdUBGt%2F2024-10-17_15-21-19.png?alt=media&#x26;token=ac4ed5dc-bcb3-4020-b0e9-20a18a3416c4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **ボタンの設定**

ソースページ（例：ホームページ）で Avonni Button を追加します。次の **移動** 設定で、 **名前付きページ** を選択し API 名（例：CustomerDetails）を入力します。
{% endstep %}

{% step %}

#### **パラメータを追加**

* **名前：** ターゲットコンポーネントの属性と一致する recordId を入力します。
* **値：** 渡すフィールド（例：{!Record.Id}）を選択するか、特定のレコード ID を入力します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FGfflY1y2Fl82YAa1unmP%2Fimage%20-%202025-09-05T160337.867.avif?alt=media&#x26;token=67d9e1f6-b45f-4d73-837c-23a704080dbd" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
*なぜ役立つのか*

この機能により、動的データ（例：レコード ID）をターゲットページに送信してその内容をカスタマイズできます。例えば、ホームページのボタンをクリックすると、渡された recordId に基づいて特定の連絡先情報を表示する CustomerDetails ページにユーザーを誘導できます。
{% endstep %}

{% step %}
*アナロジー*

手紙の宛先に例えると、Navigate to Named Page が封筒で、URL パラメータ（例：recordId）は住所のようなもので、どこに行きどのデータを持ってくるかをシステムに伝えます。
{% endstep %}

{% step %}
*トラブルシューティング*

ターゲットページが正しく読み込まれない場合は、recordId パラメータがターゲットコンポーネントの属性と一致していること、および ID が有効であることを確認してください。
{% endstep %}
{% endstepper %}

### **ナレッジ記事へのナビゲート**

1. 選択 **移動** を選んで **ナレッジ記事**.
2. **Url 名：** 次の式を入力します `{{Record.UrlName}}` 現在のレコードに関連付けられたナレッジ記事に動的にリンクするために使用します。
3. *なぜ？* 現在のレコードの `UrlName` フィールドに基づいてユーザーを特定のナレッジ記事ページへ誘導し、サポートコンテンツへのアクセスを簡素化します。
4. *ヒント：* この `{{Record.UrlName}}` 式は LWR 構文を使用してナレッジ記事の固有の URL 名（例：関連レコードからの値）を取得します。レコードに有効な `UrlName` フィールドが入力されていることを確認してください。
5. *トラブルシューティング：* ナビゲーションに失敗した場合は、 `UrlName` フィールドが存在し、有効なナレッジ記事の URL セグメント（例：article-title）を含んでいるか、記事にアクセスするためのユーザー権限を確認してください。

***

## 例

### **例 1: サポートページへのナビゲート**

この例では、Experience Cloud サイトのサポートページに移動するボタンを追加します。

1. **ボタンの構成：**
   * **ラベル：** "サポートを受ける"
   * **アイコン名：** utility:help
   * **バリアント：** neutral
   * *なぜ？* ユーザー支援のためのヘルプボタンを作成します。
2. **リンク先の設定：**
   * **ナビゲート：**
     * **タイプ：** 名前付きページ
     * **ページ名：** Customer\_Support\_\_c
     * *なぜ？* Experience Builder で定義された CustomerSupport ページへリダイレクトします。

**結果：** ユーザは任意のページでボタンをクリックすると、サポートページへ移動します。

<figure><img src="https://9391847-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FDL6JQuZArjJeQvX2ot4y%2Fuploads%2FsDnurrqUnlmWVznxxs61%2F2025-09-05_15-49-24.png?alt=media&#x26;token=fe0f39ee-01c5-4d5f-95c4-ec1a1390222a" alt="" width="375"><figcaption></figcaption></figure>

***

## 主な考慮事項

* **ターゲットの正確性：** ページ名やIDが正確に一致していることを確認してください。
* **パフォーマンス：** ナビゲーションのターゲットを軽量に保ってください。
* **アクセシビリティ：** ボタンのフォーカスとコントラストをテストしてください。
* **セキュリティ：** 外部URLを検証して問題を防いでください。

***

## 一般的な問題のトラブルシューティング

* **ナビゲーションが機能しない：** 選択したタイプとターゲット（例：正しいページ名やレコードID）を確認し、権限を検証してください。
* **ページが見つからない：** Experience Builderに指定したページまたはオブジェクトが存在することを確認してください。
* **動的IDが失敗する：** レコードIDのソース（例：{!Record.Id}）が有効であることを確認してください。
* **問題が解決しない場合：** サポートチームにお問い合わせください： <support@avonni.com> 支援のために。

***

## 概要

Avonni Navigateコンポーネントは、カスタマイズ可能なナビゲーションアクションでExperience Cloudサイトを強化します。ユーザをページやリソースへ案内するのに最適です