Box UI ElementsとPythonの使用 (パート2)
このBox UI ElementsとPythonの使用ガイドのパート1では、エクスプローラーの使用方法について説明しました。パート2では、プレビューアーUI Elementを見ていきましょう。Boxアプリの開始および作成方法については、パート1を参照してください。
準備
この例では、いくつかのファイルとフォルダが必要になります。
Box.comに移動し、パート1と同じユーザーでログインしていることを確認します。
開発者コンソールに移動し、開発者トークンを生成します。
アカウントに戻り、「Box UI Elements Demo」という名前のフォルダを作成して、そのフォルダにファイルをいくつかアップロードします。pdf、doc、xlsx、画像、動画など、ドキュメントを表すものをいくつか選択します。
最後に、.envファイルを開き、以下の変数を設定します。
ダミーの変数を、アップロードしたファイルのIDに置き換えます。IDは、ブラウザから直接取得できます。例を以下に示します。
この場合、UPLOADER_FOLDER_ID = 163436720758となります。
この場合、PREVIEWER_FILE_ID = 976816493098となります。
アップロードしたコンテンツからさらにいくつかのファイルIDを取得し、プレビューアーファイルリストを作成します。プレビューアーファイルIDがそのリストに含まれていることを確認してください。
この場合、PREVIEWER_FILE_LIST=976816493098, 960391244732, 962024331798, 962023145830となります。
それでは、始めましょう。
UI Element: プレビューアー
プレビューUI Elementを使用すると、開発者は、Boxファイルの高品質でインタラクティブなプレビューを自身のアプリケーションに埋め込むことができます。さらに、複数のファイルのプレビューを同じコンテナに読み込むことが可能になり、ファイル間を移動するための矢印が表示されます。
プレビューアーElementを使用すると、この機能を実装でき、アプリケーションでファイルの内容を表示できます。
このElementでは、大半のドキュメント形式や画像形式、HD動画、3Dモデル、360度画像、360度動画を含む、120以上のファイルの種類がサポートされています。サポートされているファイルの種類の一覧については、こちらをご覧ください。
一般的な実装は次のようになります。
file_idは、アプリでプレビューするファイルを表します。
collectionは、プレビューする複数のファイルを表します。file_idがこの配列に含まれるようにしてください。
logoUrlは、表示されるロゴを表します。画像のURLを使用できます。「box」という文字列の場合は、Boxのロゴを表します。
対応するテンプレートは次のとおりです。
プレビューElementは、アプリで取得できるイベントも非常に多く含んでいます。
Viewerは、初めてファイルでプレビューアーを表示するときにトリガーされます。ファイルは、特定のビューアーに表示されます。このイベントにより、使用されている特定のビューアーのJavaScriptオブジェクトが返されます。たとえば、pdfの特定のビューアーはmp4ファイルとは異なります。
Loadは、任意のビューアーがファイルオブジェクトとビューアーオブジェクトを読み込んで返すときにトリガーされます。
Navigateは、ユーザーが矢印を押してファイル間を移動するときにトリガーされます。
Notificationは、プレビューラッパーまたはいずれかのビューアーで警告や致命的でないエラーなどの通知を行うときにトリガーされます。
Viewerイベントは、特定のビューアーがそれ自体のイベントをトリガーしたときにトリガーされます。
複数ファイルを使用した場合のアプリの表示画面を次に示します (矢印を確認できます)。
エクスプローラーと同様、プレビューアーにもサイドバーという別のUI Elementが組み込まれています。次のように、サイドバーを設定するためのオプションを追加するだけです。
次のようになります。
セキュリティ
この例では、開発者トークンを直接使用していますが、JavaScriptのUI Elementオブジェクトにはアクセストークンが渡されます。その他のJavaScriptオブジェクトと同様、これはブラウザコンソールで確認できます。
この問題を解決するため、Boxでは、UI Elementsに対して特定の権限および許可のセットを作成しました。これらは、アプリの権限よりも制限が厳しくなっています。
プレビューアーUI Elementに固有のものとして、base_preview、item_download、annotation_edit、annotation_view_all、annotation_view_selfがあります。
詳細については、ドキュメントをご確認ください。
アクセストークンは、常に上記の権限を使用してダウンスコープする必要があります。
OAuth 2.0認証またはJWT認証について詳細が必要な場合は、コメント欄でお知らせください。
まとめ
このサンプルアプリは、リポジトリから入手できます。このアプリを実行すると、次のように表示されます。
この3つのプレビューサンプル (単一ファイル、複数ファイル、サイドバー付き) を使用して、アプリのコーディングを開始しましょう。
