Box UI ElementsとPythonの使用 (パート1)
Box UI Elementsは、開発者がメインのBoxウェブアプリの要素を自分のアプリケーションに追加できるようにする、あらかじめ組み込まれたUIコンポーネントです。これは、Boxに保存されているコンテンツの参照、アップロード、プレビュー、選択に使用できるほか、Reactコンポーネントとしても、フレームワークに依存しないJavaScriptライブラリとしても使用できます。
ある種のウェブポータルがあり、ユーザーのドキュメントを管理する必要がある場合や、Box.comを使用している顧客がSignやSkillsなどの機能を利用できるようにBox.comと統合する必要がある場合を考えてみましょう。
これらのUI Elementsは、Box.comの基本的なドキュメント管理機能を自分のアプリに組み込むための実用的な方法です。
ファイルブラウザ、プレビューアーに加え、ファイルを特定のフォルダにアップロードし、ファイルメタデータを探してコメントを追加する方法や、ユーザーがファイルを選択してその参照をアプリに渡せるようにする方法も必要です。
この記事では、Python FlaskアプリケーションでUI Elementsを使用する方法について説明します。
それでは、始めましょう。
開発者アカウントの取得
最初に、Box.comアカウントを取得する必要があります。
[サインアップ] を選択し、[個人またはチーム] に切り替えて、無料プランを選択します。
Boxアプリの作成
登録後、ログインして開発者コンソールにアクセスし、アプリケーションを作成します。
開発者コンソールにアクセスするには、https://app.box.com/developers/consoleに移動するのが最も迅速な方法です。
先に進み、新しいアプリを作成します。
アプリを変更するために2要素認証の設定が必要になる場合があります。
[構成] タブで、開発者トークンが表示されていることを確認します。
開発者トークンの有効期間は1時間です。
アプリを実行しているURLと一致するようにCORSドメインを調整します。
Pythonプロジェクトの開始
リポジトリでこの例を確認してください。この例では、PythonとFlaskを使用してシンプルなウェブサイトを作成します。
UI Element: エクスプローラ
エクスプローラとは、アプリユーザーがBoxに保存されているデジタルコンテンツを操作するためのすべての機能を備えたコンポーネントです。
エクスプローラでは、ファイルやフォルダの検索、プレビュー、アップロード、ダウンロード、削除、名前変更、作成、共有が可能です。
基本情報
エクスプローラコンポーネントを使用するために最低限必要なのは、アクセストークン、ルートフォルダIDのほか、エクスプローラを表示するためのコンテナです。
ここでは、生成したBoxアプリの開発者アクセストークンを使用しましょう。
.env.exampleを.envにコピーし、開発者トークンを自分のトークンで更新します。
メインのアプリファイルは次のようになります。
OAuth 2.0またはJWTの例をお探しの場合は、コメント欄でお知らせください。
上記のimport explorerで、エクスプローラテンプレートを呼び出しています。
エクスプローラテンプレートには、エクスプローラを表示するために必要なhtmlとJavaScriptがあります。
Box CDNからexplorer.cssとexplorer.jsを読み込みます。バージョンとローカリゼーションに注意してください。
ブラウザコンソールで、オプションとエクスプローラオブジェクトのログを確認します。
アプリを実行すると、次のように表示されます。
プロパティ
エクスプローラには、その動作を調整するためのプロパティが多数用意されています。
基本的なプロパティのセットは次のとおりです。
ルートフォルダIDは、要素が参照できる最上位のフォルダを表します。ゼロの場合は、ユーザーのルートフォルダを表します。
現在のフォルダIDは、現在表示されているフォルダを表します。
ロゴのURLは、表示されるロゴを表します。画像のURLを使用できます。「box」という文字列の場合は、Boxのロゴを表します。
また、オンとオフの切り替えが可能な一連のフラグもあります。これらのフラグで、ユーザーが実行できる機能や操作を有効または無効にします。
エクスプローラにはプレビューアーコンポーネントとサイドバーコンポーネントが含まれるため、これらのコンポーネント用のオプションもいくつかあります。
イベント
アプリケーションでユーザーの操作を追跡する必要がある場合は、エクスプローライベントを実装してコンテキストを返すことができます。
イベントの実装例を以下に示します。
この例では、イベントデータをサーバーに戻すために、シンプルなajax呼び出しを使用しています。
当然ながら、アプリには、イベントデータを処理するためのエントリポイントが必要です。この例では、単純にイベントデータを出力しています。
セキュリティ
この例では、開発者トークンを直接使用していますが、JavaScriptのUI Elementオブジェクトにはアクセストークンが渡されます。その他のJavaScriptオブジェクトと同様、これはブラウザコンソールで確認できます。
この問題を解決するため、Boxでは、UI Elementsに対して特定の権限および許可のセットを作成しました。これらは、アプリの権限よりも制限が厳しくなっています。
エクスプローラUI Elementに固有のものとして、base_explorer、item_preview、item_download、item_rename、item_share、item_deleteがあります。
詳細については、ドキュメントをご確認ください。
アクセストークンは、常に上記の権限を使用してダウンスコープする必要があります。
OAuth 2.0認証またはJWT認証について詳細が必要な場合は、コメント欄でお知らせください。
まとめ
このサンプルアプリは、リポジトリから入手できます。このアプリを実行すると、次のように表示されます。
ブラウザのコンソールでエクスプローラオブジェクトとイベントに注目します。
エクスプローラコンポーネントには、プレビューアーと、ファイルに関する追加情報を表示するためのサイドバーも含まれています。
さらに、複数ファイルのアップロードも可能です。
詳細については、UI Elementsに関する開発者向けガイドをご確認ください。
Boxエクスプローラの使用方法を理解したら、実際にいくつかアプリを作成してみましょう。
