Box Developerドキュメント
 

    ファイルのプレビューの作成

    ガイド Boxの埋め込み Box View ファイルのプレビューの作成

    ファイルのプレビューの作成

    ファイルは、アプリトークンアプリケーションにアップロードされると、以下の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
    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コードでは、ダウンスコープされたバージョンのトークンを使用することを強くお勧めします。ダウンスコープのベストプラクティスを参照してください。