インストール

インストール

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

NPMのインストール

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

npm install box-ui-elements
# yarn add box-ui-elements

NPMウェブサイトの詳細を確認する

コンテンツプレビュー

現在、Box Content PreviewライブラリはNPMから入手できません。

手動によるインストール

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

Elementバージョンファイル
コンテンツエクスプローラ19.0.0CSS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/explorer.css
Reactを使用するJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/explorer.js
Reactを使用しないJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/explorer.no.react.js
Content Open With19.0.0CSS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/openwith.css
Reactを使用するJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/openwith.js
Reactを使用しないJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/openwith.no.react.js
Content Picker19.0.0CSS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/picker.css
Reactを使用するJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/picker.js
Reactを使用しないJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/picker.no.react.js
Content Sidebar19.0.0CSS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/sidebar.css
Reactを使用するJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/sidebar.js
Reactを使用しないJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/sidebar.no.react.js
コンテンツアップローダー19.0.0CSS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/uploader.css
Reactを使用するJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/uploader.js
Reactを使用しないJS https://cdn01.boxcdn.net/platform/elements/19.0.0/en-US/uploader.no.react.js
コンテンツプレビュー2.93.0CSS https://cdn01.boxcdn.net/platform/preview/2.93.0/en-US/preview.css
JS https://cdn01.boxcdn.net/platform/preview/2.93.0/en-US/preview.js

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

<!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プレビューでは、このサンプルは若干異なって見えます。

<!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であることを想定しています。
2つの`js`ファイルのうち1つのみと追加の`css`ファイルをプロジェクトに追加する必要があります。

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

上記のアセット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 v2.93.0を使用して特定のバージョンをチェックアウトします。
  • リリースに関するページから特定のバージョンをzipとしてダウンロードします。

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

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

yarn install && yarn build:i18n && yarn build:prod

3. ファイルを提供する

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

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

  • https://cdn.YOUR_SITE.com/box-assets/2.93.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のいずれかを初期化するには、アプリケーションから有効なアクセストークンを提供する必要があります。

アプリケーションの認証方法を確認する

アクセストークンをセキュアでない環境 (ユーザーのウェブブラウザ) に渡す前にダウンスコープすることもお勧めします。

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

テスト目的の場合は、開発者トークンを使用できます。

CORS

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

ソースコードとリリース

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