> ## 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.

# インストール

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

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

UI Elementを使用するには、Box CDNから直接JavaScriptライブラリをダウンロードするか、[NPMパッケージ][npm]をインストールします。すべてのUI Elementは、正しくレンダリングするために対応するCSSスタイルシートが必要です。

## 前提条件

Box UI Elementsを使用するには、NodeおよびReactの以下のバージョンが必要です。

* Nodeのバージョン: `>=18.18.2 <22.11.0`
* Reactのバージョン: `>=18.0.0 <=19.0.0`

UI Elementsの利用可能なバージョンは、[手動によるインストール][manual-installation]セクションに記載されています。

### React 19への移行

React 18以下をベースとした既存のプロジェクトの場合は、[React 19の移行ガイド][react-migration]を参照してください。

<Warning>
  互換性の問題を回避するには、`package.json`内の`react-tether`を`>= v3.0.3`に更新してください。
</Warning>

プロジェクトでReactをアップグレードしたら、`npm`または`yarn`で`box-ui-elements`パッケージを更新します。

```shell theme={null}
npm install box-ui-elements --legacy-peer-deps

yarn add box-ui-elements
```

これにより、`package.json`ファイルのバージョンが更新されます。

```json theme={null}
"box-ui-elements": "^26.3.0"
```

コードでは、Box UI Elementsに関連した追加の変更は必要ありません。

詳細については、UI ElementsのためのReact 19へのアップグレードに関するブログ記事を参照してください。

## NPMのインストール

Reactベースのアプリを構築し、構築時にアプリに直接コンポーネントをインポートする場合は、この方法を使用します。

> **注** ライブラリの依存関係が原因で、`npm`を使用してUI Elementsをインストールする場合は`--legacy-peer-deps`フラグが必要です。

```sh theme={null}
npm install box-ui-elements --legacy-peer-deps
yarn add box-ui-elements
```

<Card href="https://www.npmjs.com/package/box-ui-elements" arrow title="NPMウェブサイトの詳細を確認する" />

<Warning>
  ## コンテンツプレビュー

  特定のバージョンのプレビューライブラリが必要な場合は、コンテンツプレビューSDKを使用します。それ以外の場合は、コンテンツプレビューUI Elementラッパーを使用します。
</Warning>

## 手動によるインストール

すべてのUI Elementは、Box CDNから直接入手することもできます。

| Element                                                                             | バージョン    | ファイル                                                                                                                                                                                          |
| ----------------------------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <Link href="/guides/embed/ui-elements/explorer">コンテンツエクスプローラ</Link>                 | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.css`</Link>                           |
|                                                                                     |          | Reactを使用するJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.js`</Link>                    |
|                                                                                     |          | Reactを使用しないJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.no.react.js`</Link> |
| <Link href="/guides/embed/ui-elements/open-with">Content Open With</Link>           | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.css`</Link>                           |
|                                                                                     |          | Reactを使用するJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.js`</Link>                    |
|                                                                                     |          | Reactを使用しないJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/openwith.no.react.js`</Link> |
| <Link href="/guides/embed/ui-elements/picker">Content Picker</Link>                 | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.css`</Link>                               |
|                                                                                     |          | Reactを使用するJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.js`</Link>                        |
|                                                                                     |          | Reactを使用しないJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/picker.no.react.js`</Link>     |
| <Link href="/guides/embed/ui-elements/sidebar">Content Sidebar</Link>               | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.css`</Link>                             |
|                                                                                     |          | Reactを使用するJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.js`</Link>                      |
|                                                                                     |          | Reactを使用しないJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/sidebar.no.react.js`</Link>   |
| <Link href="/guides/embed/ui-elements/uploader">コンテンツアップローダー</Link>                 | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.css`</Link>                           |
|                                                                                     |          | Reactを使用するJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.js`</Link>                    |
|                                                                                     |          | Reactを使用しないJS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.no.react.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/uploader.no.react.js`</Link> |
| <Link href="https://github.com/box/box-content-preview">コンテンツプレビューUI Element</Link> | `26.3.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.css">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.css`</Link>                             |
|                                                                                     | `26.3.0` | JS <Link href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.js">`https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/preview.js`</Link>                                |
| <Link href="/guides/embed/ui-elements/preview">コンテンツプレビューSDK</Link>                 | `3.55.0` | CSS <Link href="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css">`https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.css`</Link>                               |
|                                                                                     |          | JS <Link href="https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js">`https://cdn01.boxcdn.net/platform/preview/3.55.0/en-US/preview.js`</Link>                                  |

上記のリンクを使用して要素のコードをアプリケーションのコードにダウンロードするか、CDNからページに直接埋め込みます。

```html theme={null}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <!-- Latest version of the explorer css for your locale -->
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/explorer.css"
    />
  </head>
  <body>
    <!-- Latest version of the explorer js for your locale -->
    <script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/explorer.js"></script>
    ...
  </body>
</html>
```

Boxプレビューでは、このサンプルは若干異なって見えます。

```html theme={null}
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Box Content Preview Demo</title>

    <!-- Latest version of Box Content Preview for en-US locale -->
    <script src="https://cdn01.boxcdn.net/platform/preview/{VERSION}/en-US/preview.js"></script>
    <link
      rel="stylesheet"
      href="https://cdn01.boxcdn.net/platform/preview/{VERSION}/en-US/preview.css"
    />
  </head>
  <body>
    <div class="preview-container" style="height:400px; width:100%;"></div>
    <script>
      var preview = new Box.Preview();
      preview.show("93392244621", "EqFyi1Yq1tD9mxY8F38sxDfp73pFd7FP", {
        container: ".preview-container",
        showDownload: true,
      });
    </script>
  </body>
</html>
```

### バージョン

ほとんどのUI Elementには、2つの異なるバージョンがあります。

* バンドルにReactとReactDOMなどが含まれている、標準的な`*.js`ファイル (`explore.js`など)。
  * これは、Reactベースのアプリを構築していない場合や、アプリの構築プロセスの一環としてコンポーネントを含める必要がない場合に使用します。
  * ReactライブラリとReactDOMライブラリが含まれています。
  * このアセットのファイルサイズは以下のアセットよりも大きくなります。
* ReactとReactDOMがバンドルされない小規模な`*.no.react.js`ファイル (`explore.no.react.js`など)。
  * これは、ReactライブラリとReactDOMライブラリが両方ともすでにアプリケーションで読み込まれている場合に使用します。
  * これらのライブラリでは、ReactおよびReactDOMが`>= 16.6`かつ`< 18`であることを想定しています。

<message>
  2つの`js`ファイルのうち1つのみと追加の`css`ファイルをプロジェクトに追加する必要があります。
</message>

### サポートされているロケール

上記のアセットURLでは`en-US`が使用されています。別のロケールを使用する場合は、上記のURLに含まれる`en-US`を以下のいずれかに置き換えてください。

`en-AU`, `en-CA`, `en-GB`, `da-DK`, `de-DE`, `es-ES`, `fi-FI`, `fr-CA`, `fr-FR`,
`it-IT`, `ja-JP,`, `ko-KR`, `nb-NO`, `nl-NL`, `pl-PL`, `pt-BR`, `ru-RU`,
`sv-SE`, `tr-TR`, `zh-CN`, `zh-TW`

## コンテンツプレビューのセルフホスティング

所有するサーバーからBox Content Previewライブラリを提供するには、以下の手順に従います。

### 1. リリースをダウンロードする

リポジトリをフォークして、提供するバージョンをチェックアウトするか、特定のバージョンをzipとしてダウンロードします。

* `git checkout v3.0.0`を使用して特定のバージョンをチェックアウトします。
* [リリース][preview-releases]に関するページから特定のバージョンをzipとしてダウンロードします。

### 2. 依存関係をインストールする

次のコマンドを使用して、依存関係をインストールしてライブラリをビルドします。

```sh theme={null}
yarn install && yarn build:i18n && yarn build:prod
```

### 3. ファイルを提供する

`/dist`フォルダから`dev`フォルダを除くすべてをセルフサービス形式で提供します。フォルダ構造は変えずに、`third-party`を`3.0.0`と同じフォルダに配置する必要があります。

たとえば、`box-assets`ディレクトリを使用したセルフホスティングを行う場合は、以下のURLにアクセスできる必要があります。

* `https://cdn.YOUR_SITE.com/box-assets/3.0.0/en-US/preview.js`
* `https://cdn.YOUR_SITE.com/box-assets/third-party/text/2.65.0/papaparse.min.js`
* `https://cdn.YOUR_SITE.com/box-assets/third-party/model3d/1.12.0/three.min.js`

## 認証

UI Elementのいずれかを初期化するには、アプリケーションから有効なアクセストークンを提供する必要があります。

<Card href={localizeLink("/guides/authentication/select")} arrow title="アプリケーションの認証方法を確認する" />

アクセストークンをセキュアでない環境 (ユーザーのウェブブラウザ) に渡す前に<Link href="/guides/authentication/tokens/downscope">ダウンスコープ</Link>することもお勧めします。

UI Elementは、アクセストークンが認証用に渡されることだけを想定しているため、Box Platformから利用できるさまざまな種類の認証に使用できます。

テスト目的の場合は、<Link href="/guides/authentication/tokens/developer-tokens">開発者トークン</Link>を使用できます。

## CORS

UI Elementを使用するには、アプリケーションで、クロスオリジンリソース共有でウィジェットが使用されるドメインを許可する必要があります。詳細については、<Link href="/guides/security/cors">CORSガイド</Link>を参照してください。

## ソースコードとリリース

Box UI Elementsのソースコードは[GitHubでホストされています][gh]。このリポジトリには、使用方法と開発に関する詳細なドキュメントが含まれています。見つかったバグは、わかりやすい再現手順とともに \[Issues] タブに登録してください。また、このリポジトリでは、[リリース][releases]のリストも保持されています。

[npm]: https://www.npmjs.com/package/box-ui-elements

[gh]: https://github.com/box/box-ui-elements

[releases]: https://github.com/box/box-ui-elements/releases

[scopes]: /guides/api-calls/permissions-and-errors/scopes

[preview-releases]: https://github.com/box/box-content-preview/releases

[manual-installation]: #manual-installation

[react-migration]: https://react.dev/blog/2024/04/25/react-19-upgrade-guide

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("Select Auth Method"), href: "/guides/authentication/select", badge: "GUIDE" },
{ label: translate("Cross-Origin Resource Sharing (CORS)"), href: "/guides/security/cors", badge: "GUIDE" }
]}
/>