インストール
インストール
UI Elementsを使用するには、直接JavaScriptライブラリをダウンロードするか、またはNPMパッケージから取り込みます。すべてのUI Elementsは、正しくレンダリングするために対応するCSSスタイルシートも必要です。
すべてのUI Elementsは、NPMを介して入手することも、直接ダウンロードすることもできます。
NPMのインストール
Reactベースのアプリを構築し、構築時にアプリに直接コンポーネントをインポートする場合は、この方法を使用します。
npm install box-ui-elements
# yarn add box-ui-elements
手動によるインストール
すべてのUI Elementsは、Box CDNから直接入手することもできます。
上記のリンクを使用して要素のコードをアプリケーションのコードにダウンロードするか、CDNからページに直接埋め込みます。
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- polyfill.io only loads the polyfills your browser needs -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
<!-- Alternatively, use polyfill hosted on the Box CDN
<script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
-->
<!-- 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>
<!-- polyfill.io only loads the polyfills your browser needs -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Promise"></script>
<!-- Alternatively, use polyfills hosted on the Box CDN
<script src="https://cdn01.boxcdn.net/polyfills/bluebird/3.5.1/bluebird.min.js"></script>
-->
<!-- 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 Elementsには、2つの異なるバージョンがあります。
-
バンドルにReactとReactDOMなどが含まれている、標準的な
*.jsファイル(explore.jsなど)。- これは、Reactベースのアプリを構築していない場合や、アプリの構築プロセスの一環としてコンポーネントを含める必要がない場合に使用します。
- ReactライブラリとReactDOMライブラリが含まれています。
- このアセットのファイルサイズは以下のアセットよりも大きくなります。
-
ReactとReactDOMがバンドルされない小規模な
*.no.react.jsファイル(explore.no.react.jsなど)。- これは、ReactライブラリとReactDOMライブラリが両方ともすでにアプリケーションで読み込まれている場合に使用します。
- これらのライブラリでは、ReactおよびReactDOMが
>= 16.2かつ< 17であることを想定しています。
サポートされているロケール
上記のアセット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
Content Previewのセルフホスティング
所有するサーバーからBox Content Previewライブラリを提供するには、以下の手順に従います。
1. リリースをダウンロードする
リポジトリをフォークして、提供するバージョンをチェックアウトするか、特定のバージョンをzipとしてダウンロードします。
git checkout v2.34.0を使用して特定のバージョンをチェックアウトします。- リリースに関するページから特定のバージョンをzipとしてダウンロードします。
2. 依存関係をインストールする
次のコマンドを使用して、依存関係をインストールしてライブラリをビルドします。
yarn install && yarn build:18n && yarn:build:prod
3. ファイルを提供する
/distフォルダからdevフォルダを除くすべてをセルフサービス形式で提供します。フォルダ構造は変えずに、third-partyを2.34.0と同じフォルダに配置する必要があります。
たとえば、box-assetsディレクトリを使用したセルフホスティングを行う場合は、以下のURLにアクセスできる必要があります。
https://cdn.YOUR_SITE.com/box-assets/2.34.0/en-US/preview.jshttps://cdn.YOUR_SITE.com/box-assets/third-party/text/0.114.0/papaparse.min.jshttps://cdn.YOUR_SITE.com/box-assets/third-party/model3d/1.12.0/three.min.js
認証
UI Elementsのいずれかを初期化するには、アプリケーションから有効なアクセストークンを提供する必要があります。
アクセストークンをセキュアでない環境(ユーザーのウェブブラウザ)に渡す前にダウンスコープこともお勧めします。
UI Elementsは、アクセストークンが認証用に渡されることだけを想定しているため、Box Platformから利用できるさまざまな種類の認証に使用できます。
テスト目的の場合は、開発者トークンを使用できます。
CORS
UI Elementsを使用するには、アプリケーションで、クロスオリジンリソース共有でウィジェットが使用されるドメインを許可する必要があります。詳細については、CORSガイドを参照してください。
ソースコードとリリース
Explorer ElementのソースコードはGitHubでホストされています。このリポジトリには、使用方法と開発に関する詳細なドキュメントが含まれています。見つかったバグは、わかりやすい再現手順とともに[Issues]タブに登録してください。また、このリポジトリでは、リリースのリストも保持されています。