Box Developer Blog
Published in

Box Developer Blog

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ファイルを開き、以下の変数を設定します。

サンプルの.envファイル

ダミーの変数を、アップロードしたファイルのIDに置き換えます。IDは、ブラウザから直接取得できます。例を以下に示します。

ブラウザに表示されたアップロードフォルダ

この場合、UPLOADER_FOLDER_ID = 163436720758となります。

ブラウザに表示されたPDFドキュメント

この場合、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以上のファイルの種類がサポートされています。サポートされているファイルの種類の一覧については、こちらをご覧ください。

一般的な実装は次のようになります。

previewer.pyのサンプルコード

file_idは、アプリでプレビューするファイルを表します。

collectionは、プレビューする複数のファイルを表します。file_idがこの配列に含まれるようにしてください。

logoUrlは、表示されるロゴを表します。画像のURLを使用できます。「box」という文字列の場合は、Boxのロゴを表します。

対応するテンプレートは次のとおりです。

previewer.htmlのサンプルコード

プレビューElementは、アプリで取得できるイベントも非常に多く含んでいます。

Viewerは、初めてファイルでプレビューアーを表示するときにトリガーされます。ファイルは、特定のビューアーに表示されます。このイベントにより、使用されている特定のビューアーのJavaScriptオブジェクトが返されます。たとえば、pdfの特定のビューアーはmp4ファイルとは異なります。

Loadは、任意のビューアーがファイルオブジェクトとビューアーオブジェクトを読み込んで返すときにトリガーされます。

Navigateは、ユーザーが矢印を押してファイル間を移動するときにトリガーされます。

Notificationは、プレビューラッパーまたはいずれかのビューアーで警告や致命的でないエラーなどの通知を行うときにトリガーされます。

Viewerイベントは、特定のビューアーがそれ自体のイベントをトリガーしたときにトリガーされます。

複数ファイルを使用した場合のアプリの表示画面を次に示します (矢印を確認できます)。

アプリ内のプレビューアー

エクスプローラーと同様、プレビューアーにもサイドバーという別のUI Elementが組み込まれています。次のように、サイドバーを設定するためのオプションを追加するだけです。

previewer.pyのサンプルコード

次のようになります。

サイドバー付きのプレビューアー

セキュリティ

この例では、開発者トークンを直接使用していますが、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つのプレビューサンプル (単一ファイル、複数ファイル、サイドバー付き) を使用して、アプリのコーディングを開始しましょう。

--

--

News and stories for working with the Box APIs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store