REACTでのBox UI Elementsの使用

Published in

Box Developer Japan Blog

Jul 18, 2022

Box UI Elementsとは、開発者がメインのBoxウェブアプリの要素を自分のアプリケーションに追加できるようにする、あらかじめ組み込まれたUIコンポーネントです。これは、Boxに保存されているコンテンツの参照、アップロード、プレビュー、選択に使用できるほか、Reactコンポーネントとしても、フレームワークに依存しないJavaScriptライブラリとしても使用できます。

ある種のウェブポータルがあり、ユーザーのドキュメントを管理する必要がある場合や、Box.comを使用している顧客がSignやSkillsなどの機能を利用できるようにBox.comと統合する必要がある場合を考えてみましょう。

これらのUI Elementsは、Box.comの基本的なドキュメント管理機能を自分のアプリに組み込むための実用的な方法です。

ファイルブラウザ、プレビューアーに加え、ファイルを特定のフォルダにアップロードし、ファイルメタデータを探してコメントを追加する方法や、ユーザーがファイルを選択してその参照をアプリに渡せるようにする方法も必要です。

この記事では、REACT.jsアプリケーションでエクスプローラElementを使用する方法について説明します。

それでは、始めましょう。

開発者アカウントの取得

最初に、Box.comアカウントを取得する必要があります。

[サインアップ] を選択し、[個人またはチーム] に切り替えて、無料プランを選択します。

Boxアプリの作成

登録後、ログインして開発者コンソールにアクセスし、アプリケーションを作成します。

開発者コンソールにアクセスするには、https://app.box.com/developers/consoleに移動するのが最も迅速な方法です。

先に進み、新しいアプリを作成します。

アプリを変更するために2要素認証の設定が必要になる場合があります。

[構成] タブで、開発者トークンが表示されていることを確認します。

開発者トークンの有効期間は1時間です。

アプリを実行しているURLと一致するようにCORSドメインを調整します。

REACTプロジェクトの開始

このサンプルアプリは、こちらのリポジトリからダウンロードできます。

プロジェクトにBox UI Elementsのコンポーネントをインストールするための手順 (英語) に従い、必要な依存関係をすべてインストールします。

UI Element: コンテンツエクスプローラ

コンテンツエクスプローラとは、アプリユーザーがBoxに保存されているデジタルコンテンツを操作するためのすべての機能を備えたコンポーネントです。

コンテンツエクスプローラでは、ファイルやフォルダの検索、プレビュー、アップロード、ダウンロード、削除、名前変更、作成、共有が可能です。

基本情報

コンテンツエクスプローラコンポーネントを使用するために最低限必要なのは、アクセストークン、言語、国際化メッセージです。

ここでは、生成したBoxアプリの開発者アクセストークンを使用しましょう。

OAuth 2.0またはJWTの例をお探しの場合は、コメント欄でお知らせください。

すべてのBox UI Elementsは、複数の言語とローカリゼーションをサポートしています。明示的に、英語のメッセージを読み込み、要素を構成します。

必要最低限のコンポーネント:

これで、必要なのはREACTでこのコンポーネントをレンダリングすることだけになりました。次のように表示されます。

プロパティ

基本的なプロパティのセット

ルートフォルダIDは、要素が参照できる最上位のフォルダを表します。ゼロの場合は、ユーザーのルートフォルダを表します。
言語とメッセージは、ローカリゼーションを表します。
現在のフォルダIDは、現在表示されているフォルダを表します。
ロゴのURLは、表示されるロゴを表します。画像のURLを使用できます。「box」という文字列の場合は、Boxのロゴを表します。

オンとオフの切り替えが可能な一連のフラグを以下に示します。これらのフラグで、ユーザーが実行できる機能や操作を有効または無効にします。

具体的に、ユーザーがファイルをプレビューする場合は、次のようにカスタマイズできます。