> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Box Embed

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

Box EmbedはHTMLベースのフレームワークで、これにより、独自に作成したアプリケーションにBoxウェブアプリの機能全体を埋め込むことができます。Box Embedを使用すると、ファイルのアップロード、検索、コメント付け、共有、タグ付けに加え、Box Editを使用したファイルの編集も可能になります。また、Box HubsのAIチャットを埋め込むことで、焦点を絞ったチャットボットエクスペリエンスも実現できます。

## 開始する前に

ウィジェットを作成するには、以下のことが必要です。

* 共有用の埋め込み可能な要素 (フォルダ、ファイル、Hub、メモ、アプリなど) を設定する。
* **ビューアー**以上の[権限][5]がある。

## ウェブアプリの使用

BoxウェブアプリからBox埋め込みウィジェットのコードを取得するには、以下の手順を実行します。

### ファイルとフォルダ

1. 選択したファイルまたはフォルダに移動します。
2. そのフォルダの横にある省略記号をクリックします。
3. \[**その他の操作**] > \[**埋め込みウィジェット**] に移動します。

### Hub

1. 選択したHubに移動します。
2. 右上にある省略記号メニューをクリックします。
3. \[**Hubを埋め込む**] をクリックします。

<Note>
  HubからAIチャットインターフェースのみを埋め込むことも可能です。ユーザーは、ナビゲーション機能やファイル閲覧機能を使用せずに、質問して、Hubのファイルに基づいたAIによる回答を取得することができます。詳細については、<Link href="/guides/embed/box-embed/#box-hubs-ai-chat-embedding">Box HubsのAIチャットの埋め込み</Link>セクションを参照してください。
</Note>

### メモ

1. 選択したメモに移動します。
2. 省略記号メニューをクリックします。
3. \[**埋め込みウィジェット**] をクリックします。

### アプリ

1. 選択したアプリまたはBoxアプリビューに移動します。
2. 省略記号メニューをクリックします。
3. \[**埋め込む**] をクリックします。

<Frame>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/embed/box-embed-new.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=2d97a3fb5c6248e15ec26842b59015a6" alt="Box Embed" width="1543" height="738" data-path="ja/guides/embed/box-embed-new.png" />
</Frame>

次の手順では、埋め込み可能な要素のパラメータを構成します。

| 要素の種類       | 構成オプション                                                               |
| ----------- | --------------------------------------------------------------------- |
| ファイル        | ウィジェットのサイズ                                                            |
| フォルダ        | ウィジェットのサイズ、フォルダ内のファイルの並べ替え、ナビゲーションパスとサイドバーの非表示。                       |
| Hub         | ウィジェットのサイズ、親のナビゲーションパスとサイドバーの非表示                                      |
| HubsのAIチャット | チャットモード: ボタンまたはウィジェット。                                                |
| メモ          | ウィジェットのサイズ、クラウド (雲) ゲームのスキップ (その結果、メモは読み取り専用モードになります)、メモのナビゲーションの非表示。 |
| アプリ         | ウィジェットのサイズ                                                            |

<Frame>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/embed/embed-configuration.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=eb2a059814f79f3632772f737f5046a2" alt="Box Embedの構成" width="467" height="470" data-path="ja/guides/embed/embed-configuration.png" />
</Frame>

埋め込みウィジェットのカスタマイズが完了したら、埋め込みコードをコピーして自分のサイトまたはウェブアプリに貼り付けます。

## プログラムを使用して構成

Box Embedをさらにカスタマイズする場合は、プログラムを使用して実行できます。埋め込みのスニペットの形式は次のとおりです。

```html theme={null}
<iframe
  src="https://{custom_domain}.app.box.com/embed/s/{shared link value}?view={list or icon}&sortColumn={name, date, or size}&sortDirection=ASC"
  width="{pixels}"
  height="{pixels}"
  frameborder="0"
  <!-- Optionally replace * with your enterprise-specific domain (for example, mycompanydomain.app.box.com) -->
  allow="local-network-access *; clipboard-read *; clipboard-write *" 
  allowfullscreen
  webkitallowfullscreen
  msallowfullscreen>
</iframe>
```

### ブラウザの権限

Google Chrome 142以上およびMicrosoft Edge 143以上では、`allow`属性を使用して、クリップボードの操作やローカルネットワークへのアクセスを有効にします。この属性は、これらのブラウザバージョン用に設計されていますが、すべてのブラウザに対して安全に含めることができます。他のブラウザでは無視されます。

この属性がないと、埋め込まれたBoxコンテンツは、Box Tools、デバイストラスト、またはクリップボードのコピーボタンで機能しない可能性があります。

<Note>
  埋め込みウィジェットのリンク生成ウィンドウでは、生成されたコードに自動的にこのパラメータが含まれます。
</Note>

### 共有リンクの値の検索

プログラムを使用して埋め込み`iframe`を構築するには、まず、共有リンクの値を生成または検索します。この値を検索する1つの方法として、Boxウェブアプリを使用します。

<Frame>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/embed/embed-share.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=2a9739768405421326731d6fe3a6b478" alt="Boxの共有" width="471" height="376" data-path="ja/guides/embed/embed-share.png" />
</Frame>

また、<Link href="/reference/put-files-id--add-shared-link">`PUT /files/:file_id`</Link>または<Link href="/reference/put-folders-id--add-shared-link">`PUT /files/:file_id`</Link>を使用して、APIで共有リンクを作成する方法もあります。

その後、<Link href="/reference/get-files-id">`GET /files/:id`</Link>または<Link href="/reference/get-folders-id">`GET /folders/:id`</Link>エンドポイントを使用してクエリパラメータ`fields=shared_link`を渡すことにより、この共有リンクの値を検索できます。

```curl theme={null}
curl https://api.box.com/2.0/folders/12345?fields=shared_link \
    -H "authorization: Bearer ACCESS_TOKEN"
```

```json theme={null}
"shared_link": {
  "url": "https://app.box.com/s/dsbJFzdO7qZxdfOHFzdO7qZxdfOH",
  "download_url": null,
  "vanity_url": null,
  ...
}
```

ページをルートフォルダ/\[すべてのファイル] ページに設定することもできます。URLを共有リンク`<iframe src=“https://app.box.com/embed/folder/0”….></iframe>`ではなく`/folder/0`に設定してください。

### パラメータ

次に、表示のカスタマイズオプションを選択します。構成可能なパラメータ (省略可) のリストを以下に示します。

|                          |                                                                                      |
| ------------------------ | ------------------------------------------------------------------------------------ |
| `hideHubsGallery`        | Hubsギャラリーに戻るためのナビゲーションの山括弧ボタンを非表示または表示します。`true`または`false` (デフォルト) を指定できます。          |
| `hideNavigationControls` | Box Notesのナビゲーションコントロールを非表示または表示します。                                                 |
| `showItemFeedActions`    | ファイルのコメントまたはタスクを非表示または表示します。`true` (デフォルト) または`false`を指定できます。                        |
| `showParentPath`         | フレームのヘッダーにフォルダパスを非表示または表示します。`true` (デフォルト) または`false`を指定できます。                       |
| `sortColumn`             | ファイルまたはフォルダを並べ替える順番。`name`、`date` (デフォルト)、または、`size`を指定できます。                         |
| `sortDirection`          | ファイルまたはフォルダの並べ替えの方向。`ASC` (デフォルト) または`DESC`を指定できます。                                  |
| `view`                   | ファイルまたはフォルダの表示方法の種類。`list` (デフォルト) または`icon`を指定できます。ログインユーザーの場合は、ユーザー設定の表示方法が優先されます。 |
| `uxLite`                 | クラウド (雲) ゲームを使用せず、制限付きコンテンツプレビュー (Preview Light) を表示します。共有ファイルおよびBox Notesのみに有効です。   |

<Note>
  Box Notesで`uxLite`を使用すると、`hideNavigationControls`の設定に関わらず、ナビゲーションコントロールは表示されません。
</Note>

Boxが提供するアプリのURLにあるカスタム検索パラメータはすべて、埋め込みウィジェットウィンドウとコンテンツプレビューに渡されます。

### 全画面表示機能

Box Embedスニペットの全画面表示機能を有効にするために、オブジェクトを全画面に表示可能にする場合は、以下のパラメータの1つ以上を`<iframe>`に含めてください。

* `allowfullscreen`
* `webkitallowfullscreen`
* `mozallowfullscreen`
* `oallowfullscreen`
* `msallowfullscreen`

## Box HubsのAIチャットの埋め込み

Box Hubの機能全体を埋め込むことに加えて、AIを活用したチャットインターフェースのみを埋め込むことも可能です。このモードでは、特定のHub内のファイルを利用した焦点を絞ったチャットボックスエクスペリエンスが提供され、ナビゲーションやコンテンツ閲覧のオプションは提供されません。

### 前提条件

AIチャットモードに埋め込まれたHubにアクセスするには、以下の前提条件があります。

* Hubを所有する企業では、Box AI for Hubsが有効になっている必要があります。
* ユーザーは、認証済みで、所属する企業でBox AI for Hubsが有効になっている必要があります。
* ユーザーには、Hubに対してビューアー以上の[権限][5]が必要です。

### AIチャットの埋め込みの作成

1. AIチャットのナレッジベースのソースとして機能するHubに移動します。

2. 右上にある省略記号メニューをクリックします。

3. \[**Hubを埋め込む**] をクリックします。

4. \[**Hub AIチャット**] タブを選択します。

5. チャットモードを選択します。

   * <Link href="/guides/embed/box-embed/#chat-button">チャットボタン</Link>
   * <Link href="/guides/embed/box-embed/#chat-widget">チャットウィジェット</Link>

6. 埋め込みコードをコピーします。

<Note>
  Box HubsのAIチャットの埋め込みで問題が発生した場合は、上記の手順1～6を繰り返すことで、埋め込みコードを再生成し、スクリプトの最新バージョンを取得してください。
</Note>

### チャットボタン

**チャットボタン**モードでは、ユーザーがボタンをクリックするとAIチャットウィジェットが開きます。これは、Boxでホストされる`script`として生成され、ページ上にフローティングチャットボタンを表示します。

<img src="https://mintcdn.com/box/rFCIomhPdLXkdoes/ja/guides/embed/chat-button.png?fit=max&auto=format&n=rFCIomhPdLXkdoes&q=85&s=636e8242398186977ab19dd6dcfccb02" alt="チャットボタンモード" width="3680" height="2520" data-path="ja/guides/embed/chat-button.png" />

#### チャットボタンのパラメータ

**チャットボタン**モードでは、以下のパラメータがサポートされています。

| パラメータ                    | 必須  | 説明                                                                              |
| ------------------------ | --- | ------------------------------------------------------------------------------- |
| `data-hub-id`            | はい  | チャットボットに使用されるHubのID。                                                            |
| `data-custom-box-domain` | いいえ | カスタムドメインを使用しているBoxインスタンス。デフォルト: `app.box.com`。例: `mycompanydomain.app.box.com`。 |
| `data-button-text`       | いいえ | チャットボタンに表示するカスタムテキスト。デフォルト: `Box AI`。この値は、アクセシビリティのために、このボタンのエリアラベルにも使用されます。    |
| `data-shared-link`       | いいえ | Hubにアクセスするための省略可能な共有リンク。指定されていない場合、チャットは、Hubのコラボレータであるユーザーのみに読み込まれます。           |

次の例は、利用可能なすべてのパラメータを使用したチャットボタンの構成全体を示します。

```html theme={null}
<script 
  src="https://cdn01.boxcdn.net/embeddable-ai-chat-script/2.8.0/box_integrations_ai_chat_button.js" 
  data-hub-id="123456789" 
  data-custom-box-domain="mycompanydomain.app.box.com" 
  data-shared-link="abcdefghijklmnopqrst123" 
  data-button-text="Ask our HR chatbot">
</script>
```

### チャットウィジェット

**チャットウィジェット**モードでは、ページ読み込み時に、AIチャットウィジェットが直接埋め込まれます。これは、`iframe`として生成され、チャットインターフェース全体をすぐに表示します。

<Note>
  現時点では、エージェントのセレクタドロップダウンで選択できるのは従来のエージェントのみです。
</Note>

<Frame>
  <img src="https://mintcdn.com/box/rFCIomhPdLXkdoes/ja/guides/embed/chat-widget.png?fit=max&auto=format&n=rFCIomhPdLXkdoes&q=85&s=b05239e937c6226eaf6b6a6cae1e68f4" alt="チャットウィジェットモード" width="1624" height="1124" data-path="ja/guides/embed/chat-widget.png" />
</Frame>

#### チャットウィジェットのパラメータ

**チャットウィジェット**モードでは、`iframe`を使用すると、AIチャットウィジェットが直接ページに埋め込まれます。iframeの`src`属性にURLパラメータを追加して、動作をカスタマイズできます。

| パラメータ             | 説明                                                                                                                                                                                                                                     |
| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `hubId`           | チャットボットに使用されるHubのID。                                                                                                                                                                                                                   |
| `sharedLink`      | Hubにアクセスするための共有リンクのハッシュ。指定されていない場合、チャットは、Hubのコラボレータであるユーザーのみに読み込まれます。                                                                                                                                                                  |
| `showCloseButton` | チャットインターフェースに<Link href="/guides/embed/box-embed/#using-the-close-button">X (閉じる) ボタン</Link>を表示するかどうか。`true`に設定すると、閉じるボタンが表示されます。ユーザーがこのボタンをクリックすると、Boxでは、親ウェブアプリケーションに送信されるイベントが生成されます。これにより、ユーザーの操作に基づいてカスタムの閉じるロジックを実装することが可能になります。 |

次の例は、利用可能なすべてのパラメータを使用したチャットウィジェットの構成全体を示します。

```html theme={null}
<iframe 
  src="https://yourcompanydomain.app.box.com/ai-chat?hubId=123456789&sharedLink=abcdefghijklmnop123&showCloseButton=false" 
  width="800" 
  height="550" 
  frameBorder="0" 
  <!-- Optionally replace * with your enterprise-specific domain (for example, mycompanydomain.app.box.com) -->  
  allow="local-network-access *; clipboard-read *; clipboard-write *"  
  allowfullscreen 
  webkitallowfullscreen 
  msallowfullscreen>
</iframe>
```

#### 閉じるボタンの使用

(提供されたスクリプトを使用せず) `iframe`を使用して直接Box AIチャットを埋め込む場合は、チャットインターフェース内で閉じるボタンを有効化できます。このボタンは、`postMessage`を通じて親アプリケーションと通信します。

##### 閉じるボタンの有効化

iframeの隅に閉じるボタン (✕) を表示するには、次のように、`iframe` URLに`showCloseButton=true`クエリパラメータを追加します: `https://app.box.com/ai-chat?hubId=YOUR_HUB_ID&showCloseButton=true`

##### 仕組み

1. `showCloseButton=true`を設定すると、Xボタンがチャットのiframeの隅に表示されます。
2. ユーザーがこのボタンをクリックすると、iframeから親ウィンドウに`postMessage`イベントが送信されます。
3. このイベントには、`"BOX_AI_CHAT_CLOSE"`に設定された`event.data.type`が含まれています。
4. ホストしているアプリケーションは、このイベントをリッスンし、閉じるロジックを処理します。

##### 実装例

```javascript theme={null}
window.addEventListener('message', (event) => {
    // Optional: validate origin is from Box for additional security
    // if (event.origin !== 'https://app.box.com') return;

    if (event.data && event.data.type === 'BOX_AI_CHAT_CLOSE') {
        closeChat();
    }
});
```

##### イベントのリファレンス

| プロパティ             | 値                     | 説明                                     |
| ----------------- | --------------------- | -------------------------------------- |
| `event.data.type` | `"BOX_AI_CHAT_CLOSE"` | ユーザーがチャットのiframeで閉じるボタンをクリックしたことを示します。 |

## 有効期限付き埋め込みリンク

ファイルの場合、<Link href="/reference/get-files-id">`GET /files/:id`</Link>を呼び出し、`fields`クエリパラメータを使用して`expiring_embed_link`をリクエストすることもできます。

```curl theme={null}
curl https://api.box.com/2.0/files/12345?fields=expiring_embed_link \
    -H "authorization: Bearer ACCESS_TOKEN"
```

```json theme={null}
{
  "etag": "1",
  "expiring_embed_link": {
    "token": {
      "access_token": "1!rFppcinUwwwDmB4G60nah7z...",
      "expires_in": 3646,
      "restricted_to": [
        {
          "object": {
            "etag": "1",
            "file_version": {
              "id": "34567",
              "sha1": "1b8cda4e52cb7b58b354d8da0068908ecfa4bd00",
              "type": "file_version"
            },
            "id": "12345",
            "name": "Image.png",
            "sequence_id": "1",
            "sha1": "1b8cda4e52cb7b58b354d8da0068908ecfa4bd00",
            "type": "file"
          },
          "scope": "base_preview"
        },
        ...
      ],
      "token_type": "bearer"
    },
    "url": "https://cloud.app.box.com/preview/expiring_embed/...."
  },
  "id": "12345",
  "type": "file"
}
```

`url`属性を`<iframe>`内で使用すると、自動で期限切れになるBox Embedインターフェースを埋め込むことができます。

```html theme={null}
<iframe
  src="YOUR-GENERATED-BOX-EMBED-LINK"
  width="{pixels}"
  height="{pixels}"
  frameborder="0"
  allowfullscreen
  webkitallowfullscreen
  msallowfullscreen
/>
```

### パラメータ

UIをカスタマイズするために、このURLにさらにパラメータを追加することもできます。そのためには、以下のパラメータをクエリパラメータとして`url`に追加します。最終的なURLは、次のようになります。

```sh theme={null}
https://app.box.com/preview/expiring_embed/[HASH]?[parameterName]=true
```

|                   |                                                                                                                                                                                                     |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `showDownload`    | ファイルをダウンロードするための権限がビューアーにある場合は、埋め込まれたヘッダーバーにダウンロードボタンが表示されます。また、印刷とダウンロードが同じ権限で管理されているため、ドキュメントのファイルタイプには印刷ボタンも表示されます。デフォルトでは`false`になります。                                                          |
| `showAnnotations` | プレビュー以上の権限を持つユーザーは、ドキュメントと画像のプレビューに注釈を付けることができます。また、すでにドキュメントに付けられている注釈も表示されます。注釈が利用可能なファイルタイプおよび注釈の種類の詳細については、注釈ページを参照してください。現在、注釈はウェブブラウザでのみ使用できます。モバイルブラウザでは、ユーザーは注釈を表示できますが、新しい注釈を作成することはできません。 |

## クラウド (雲) ゲーム

クラウド (雲) ゲームとは、[クリックジャッキング][cloud-game]を防ぐために作成されたウィジェットです。これは、パートナー統合ではない埋め込みサイトに表示されます。クラウド (雲) ゲームでは、ユーザーは、操作の許可を得るためにクラウド (雲) を適切な場所にドラッグする必要があります。このゲームでは、クラウド (雲) の位置とそのドラッグ先がランダムに生成されるため、クリックジャッキングが難しくなります。

<Frame>
  <img src="https://mintcdn.com/box/jPy1E1s_P1x3lZ7z/ja/guides/embed/cloud-game.png?fit=max&auto=format&n=jPy1E1s_P1x3lZ7z&q=85&s=26cfb716d92a719d15a88a91267a6981" alt="Box Embed" width="809" height="486" data-path="ja/guides/embed/cloud-game.png" />
</Frame>

`postMessage()`は、埋め込みと`showCloudGame`両方のステータスを取得するためにiframeで使用されます。埋め込まれている場合、`document.hasStorageAccess()`は、BoxからCookieにアクセスできるかどうかを示します。アクセスでき、ユーザーがログイン済みの場合、クラウド (雲) ゲームが表示されます。`showCloudGame`のステータスが`false`の場合、ユーザーはログインページに誘導されます。

## カスタムロゴ

有料のBoxをお使いの場合は、ファイルのプレビューに表示されるBoxのロゴを削除できます。削除するには、**管理コンソール**の \[**Enterprise設定**]、\[**カスタム設定**] に移動し、\[**埋め込みウィジェットのカスタマイズ**] をオフに切り替えてBoxのロゴを非表示にします。

## 制限

Box Embedは、モバイルブラウザ向けには最適化されていないため、モバイルデバイス用に設計されたウェブエクスペリエンスでは使用しないでください。多くのUI Element (**ダウンロード**オプションや**印刷**オプションなど) はモバイルブラウザに表示されない可能性があります。

[logo]: https://support.box.com/hc/ja/articles/360044193633-会社ブランドに合わせたアカウントのカスタマイズ

[5]: https://support.box.com/hc/ja/articles/360044196413-コラボレータの権限レベルについて

[cloud-game]: https://docs.box.com/ja/box-fundamentals/for-users/collaborating/sharing-content-using-box/create-a-box-embed-widget