メインコンテンツへスキップ
ファイルは、アプリトークンアプリケーションにアップロードされると、以下の2つの方法でプレビューすることができます。
  • 直接埋め込み: カスタムの埋め込みリンクを使用した標準のHTML <iframe>コンポーネント。
  • カスタマイズされたプレビューアー: Box UI Elementsを使用して全面的にカスタマイズされたプレビューウィジェット。

​
直接埋め込み (iframe)

直接埋め込みリンクを使用すると、アプリケーションでのプレビューをカスタマイズするためのオプションが制限されます。このメソッドは軽量であるため、このAPIには、ドキュメントでのスクロール、動画のインタラクティブな再生や一時停止、画像の回転など、クライアント側の処理に対応するオプションはありません。 Box Viewの直接<iframe>埋め込みを作成するには、以下の2つの手順を実行します。
  1. ファイル用に埋め込みURLを生成する
  2. 生成した埋め込みURLを<iframe>に追加する

​
ファイル用に埋め込みURLを生成する

アプリトークンアプリケーションにアップロードされたファイルの公開ファイルプレビューURLを作成するには、直接のSDKメソッドを使用するか、APIに直接リクエストを発行します。
埋め込みURLをAPIから直接生成する場合は、ファイル情報の取得エンドポイントを使用して、fieldsパラメータを介してexpiring_embed_linkをリクエストします。
curl https://api.box.com/2.0/files/FILE_ID?fields=expiring_embed_link \
    -H "authorization: Bearer [APP_TOKEN]"
レスポンスオブジェクト内では、公開埋め込みURLが次のようになります。 
https://app.box.com/preview/expiring_embed/gvoct6FE!YT_X1LauQ8ulDTad96hTl9xLCRYJ
5iU6O61KxiduxFIgX9HSWMcCWf7zju1XkEsf6-Ul2qtKXeaFeKPT4SysQJQdxrc144KgTIBuoI3bWMf4
cfhp3jdLYrK5hnr6KMq5H6r-AW31AcFtDJi1lnT0M4b3bvvZUaE2RRJGGINMauvS6MAT2luae5PvbFSx
Ctqqx6XlN6QrqbhfJc0UeJF9qwMv3-O8q5fWn0qr8OTY4lkeYidtTs3Ux...
セキュリティ上の理由により、生成された埋め込みリンクは1分後に期限切れになるため、生成されたらすぐにアプリに埋め込む必要があります。

​
生成した埋め込みURLを<iframe>に追加する

アプリケーションのHTML内で、iframe要素を作成し、src属性を生成された埋め込みURLに設定します。 
<iframe src="https://app.box.com/preview/expiring_embed/gvoct6FE!ixgtCKQAziW
  9tHPm-jueq4cmS4GnL9RTJRcVEsK_3W8xcxtVo_v6gKpoXY45odgG1QrcjBVYZMrriUyGvcoSM
  SX8s-smpaFFYQik0R-PCKFtwvbv0lonid6ZfYNbuNFl2j9hOIqBccvHrdVor7i6WvOm6zELzTY
  4EWshcyYYBhDbJmYMrq61RtU_kvBe5P..."></iframe>

​
カスタマイズされたプレビューアー (UI Element)

高度なプレビューのカスタマイズ機能やイベント処理機能を活用するには、Box UI Preview Elementを使用します。 このプレビューElementを設定するには、まず、必須コンポーネントをインストールします。

Box Elementsとプレビューのインストール

 新しいプレビューアーを表示するためのJavaScriptコードを追加する際、基本的なコードは次のようになります。 
var preview = new Box.Preview();
preview.show("FILE_ID", "ACCESS_TOKEN", {
    container: ".preview-container",
    showDownload: true
});
コードサンプル内のプレースホルダを以下の内容に置き換えてください。
  • FILE_ID: アプリトークンアプリケーションにアップロードされたファイルのID。ファイルのアップロード時に返されるオブジェクトから取得できます。
  • ACCESS_TOKEN: アプリケーションの構成時に設定されたプライマリアクセストークン、またはそのトークンのダウンスコープされたバージョン。
プライマリアクセストークンの高度な権限により、JavaScriptコードでは、ダウンスコープされたバージョンのトークンを使用することを強くお勧めします。ダウンスコープのベストプラクティスを参照してください。