Box Developer Blog
Published in

Box Developer Blog

Boxの統合について

Boxでプラットフォームソリューションエンジニアを務めている私には、開発者の皆さんやお客様から質問がよく寄せられます。たとえば、「どうすればアプリケーションとBoxを統合できるか」、「どうすればカスタムアプリでBoxのコンテンツをエンドユーザーに表示できるか」、「Box APIを<<フレームワーク、ID管理プロバイダ、または他のシステム>>と統合できるか」というような質問です。

この記事では、カスタムアプリやカスタム統合でユーザーにBoxコンテンツを表示する最も一般的なアプローチの概要を説明し、それぞれのアプローチのメリットと課題を示します。また、各アプローチで対処するユースケースについても説明します。さらに、ご自身で試してみたい方のために、より深く掘り下げるためのリソース、GitHubリポジトリ、コードサンプルへのリンクも多数紹介します。

Boxとの統合の開発方法を説明する前に、Boxでは実際に約1,500個の組み込みの統合を提供しているという点について触れておきたいと思います。そのため、多くのお客様は必要なものをその中から見つけることができます。こうした統合は、開発者ではなくても簡単に構成できるよう設計されており、最も人気がある統合として、Slack、Teams、Office 365、NetSuiteなどがあります。これらの統合については、この記事では取り上げませんが、すでに存在する統合の種類を把握するための出発点として紹介しておきます。

このセクションでは、最初に、最も一般的なAPI駆動型の統合について説明し、終盤では、box.comアプリケーションの機能を使用して、コーディングせずに直接Boxの機能を統合する方法をいくつか紹介します。

Box UI Elements

Box UI Elementsは、ユーザーインターフェースを備えたカスタムアプリケーションとBoxの統合を検討する際に、ほとんどの開発者が最初に考えるコンポーネントです。これらは、大半のウェブサイトで動作するReactベースのJavaScriptウィジェットです。コードに直接読み込まれるため、対話することで、一連のクライアント側イベントを介してウェブサイトでさらに機能を動作させることができます。Box UI Elementsはオープンソースであるため、ソースはGitHubで入手できます。これらはBoxが開発、管理し、npmでも配布されています。

UI Elementに必要なのは、アクセストークンと、関与するBoxファイルまたはフォルダのBox識別子「のみ」で、残りはウィジェットで管理されます。UI ElementsとReactの使用を開始する方法についてはこちらの記事を参照し、UI ElementsとPythonの使用方法についてはこちらを参照してください。

最も一般的なUI Elementはコンテンツエクスプローラで、カスタムアプリケーションでBoxフォルダを表示するために使用できます。コンテンツエクスプローラを使用すると、ユーザーは必要な場合に、全面的にホワイトラベル化した方法で (ユーザーの権限に配慮しながら) ナビゲーション、アップロード、ダウンロード、プレビューを行うことができます。

次のコードスニペットを見てみましょう。

ポータル環境では次のように表示されます。

カスタムページのコンテンツエクスプローラElement

ドキュメントを開くと、独自のBoxのプレビューアーが起動します。

プレビューUI Element

UI Elementsには、ユーザーがファイルまたはフォルダを選択できるContent Pickerも含まれていて、Boxファイルまたはフォルダがデータフローに含まれているウィザードやステップバイステップ形式の機能に統合を組み込むことができます。最後に、アップロードウィジェットを紹介します。これを使用すると、ユーザーはコンテンツのアップロードのみ可能になります。

一般的なユースケース:

  • ドキュメントの安全な保管庫。このケースでは、銀行などのお客様が機密性の高い保護されたドキュメントの保存、取得、コラボレーションを行うことができます。Morgan Stanleyのこちらのケーススタディ (英語) を参照してください。
  • お客様/ベンダー/請負業者のポータル。このケースでは、ドキュメントの安全な交換とコラボレーションが中心的な機能となっています。Broadcomのこちらのケーススタディ (英語) を参照してください。
  • ローン申請やオンボーディングのシナリオ。このケースでは、Boxを単一のコンテンツレイヤーとして使用し、さまざまなシステムとメールによるコンテンツの散乱を回避できます。Maxwellのこちらのケーススタディを参照してください。
  • SalesforceデジタルエクスペリエンスでのBoxコンテンツの表示。これは、標準的なBox for Salesforce複合アプリとの連携でうまく機能します。使用を開始するには、こちらのGitHubリポジトリを確認してください。ケーリーという町のこちらのケーススタディ (英語) も参照してください。

メリット

  • リリースまでの期間が短くなります。
  • UI Elementがクライアントで読み込まれると、アップロード/ダウンロードを含むすべてのトラフィックがクライアントからBoxに送信され、アプリケーションホストのCPUリソースとネットワークリソースの両方が節約されます。
  • UI ElementsはBoxが管理しているため、修正や新機能が定期的に追加されます。
  • プレビューUI Elementを使用すると、プラグインの必要なく、140種類を超える形式のプレビューが可能になります。そのため、時間のかかるダウンロードを回避し、より安全なドキュメント共有方法 (プレビューのみの権限や電子すかしなど) を利用できます。
  • すべての既存IDプロバイダと連携できます。Auth0OktaCognitoAzureB2Cの実際の例を参照してください。

課題

  • UI Elementsは、実装のスピードを考慮して設計されているため、全体的なスタイルと機能はほぼ固定されています。

Box REST API/Box SDK

Box REST APIを使用すると、開発者はすべてのBoxコンテンツサービスにアクセスできます。つまり、カスタムアプリケーションでユーザーにコンテンツを公開する必要がある場合に役立ちます。このAPIを基に開発されているのがBox SDKで、Box SDKのエンジニアが開発および管理しており、人気の高いプログラミング言語のほか、モバイル開発向けにAndroidとiOSにも対応しています。そのため開発者は、「フォルダ項目のAPI」とお気に入りの言語または直接のREST呼び出しを使用するだけで、 DataTablesツリー表示のような別のUIアプローチを通して、上記のUI Elementの例で示したのと同じファイルリストを表示できます。

以下の例では、DataTablesを使用して前の例と同じファイルリストを表示しています。この例には、ドキュメントに追加したカスタムメタデータ ([Document Type] 列) も含まれています。このAPIを使用したアプローチでは、情報の操作や表示および好みのUIフレームワークの使用については柔軟性が向上します。

DataTableの例

こちらのサンプルをお試しいただけます。

次に、別の例として、Box APIの出力から作成し、Boxのプレビューアーと統合したツリー表示を示します。

ツリー表示の例

こちらのサンプルをお試しいただけます。

一般的なユースケース:

  • ユースケースは、基本的にはUI Elementsで示したものと同じです。

メリット

  • APIとBox SDKを使用すると、開発者はUIフレームワークを選択でき、デザインと表示に関して正確性を高めることができます。
  • すべての既存IDプロバイダと連携できます。Auth0OktaCognitoAzureB2Cの実際の例を参照してください。

課題

  • 通常は、UI Elementsを使用する場合よりも多くの開発作業が必要になります。

当然ながら、Box API、Box SDK、Box CLIを使用して、直接的なユーザーの操作を必要とせず、主に自動化とマシン間の処理の問題である統合を推し進めることもできます。

認証

認証に関していくつか補足したい点があります。Box APIは、API認証の方法として、クライアント側の3-legged OAuthと、JWTまたはクライアント資格情報許可を使用したサーバー側の認証の2つをサポートしています。クライアント側認証は、API統合を利用しているユーザーが、すでにBoxログインを持つBoxユーザーである場合に効果的です。ユーザーが別のID管理システムを経由してログインしているアプリケーションでBox APIが公開されているシナリオでは、サーバー側認証がうまく機能します。それは、APIによってユーザー認証が調整されるため、サーバー側認証では、ユーザーが2回ログインする必要がなくなるからです。ユーザーモデルの詳細とBoxのApp Userの概念を参照してください。そうすると、Boxを任意のID管理プロバイダと簡単に統合できるようになります (この点については、今後の記事で取り上げます。そこでApp Userについて説明します)。

次のパートでは、必ずしもAPIを使用しなくてもBoxを統合できる方法をいくつか説明します。これらは、メインのBoxウェブエクスペリエンスでオプションとして提供されています。

Box Embed

すでにBoxを使用していて、特定のBoxフォルダまたはファイルを別のアプリのユーザーエクスペリエンスに埋め込みたいお客様向けに、Boxでは埋め込みウィジェットを提供しています。埋め込みウィジェットはUIまたはAPIから直接生成できます。このタイプの埋め込みは、すべてのユーザーに公開されるように設定することも、ユーザーに認証を要求するよう設定することもでき、いくつかの構成オプションが用意されています。基本的に、埋め込みウィジェットは、iframe内にbox.comのエクスペリエンスの一部を公開します。

box.comから、ユーザーはウィジェットを構成できます。

埋め込みコードをウェブページに追加します。

iframeの埋め込みコード

最終的に、ポータルにフォルダが埋め込まれます。

Box Embedを使用したサンプルのポータル

一般的なユースケース:

  • 共通ドキュメントのフォルダを別のコンテキスト (人事ポータル、インターネット、別のアプリケーションなど) で表示
  • プロジェクト管理ポータルでプロジェクトのドキュメントのフォルダを表示

メリット

  • 作成と構成にコーディングが必要ありません。
  • 参照、表示、アップロード、ダウンロード、検索、コメント、タスクなど、Boxコンテンツのよく使用される機能が含まれています。

課題

  • iframeに埋め込むアプローチでは、主にクロスサイトスクリプティングの制限によって、クライアント側が埋め込みコンポーネントとやり取りする余地がほとんどありません。
  • 埋め込みコンポーネントは常にbox.comから読み込まれますが、現時点ではbox.comのユーザーエクスペリエンスを100%提供しているわけではないため、そのデザインと操作性を変更する余地はほとんどありません。
  • コンテンツは、自由にアクセスできるようにするか、アクセスするユーザーにBoxアカウントを要求する必要があります。

Boxファイルリクエスト

Boxファイルリクエストを使用すると、ユーザーはいくつかの構成 (ロゴ、色、必須のメタデータのオプションなど) を含むアップロードページを作成し、ユーザーに直接メールで送信するかウェブサイトに埋め込むことができます。アップロードページは、Box UIから作成するか、APIを使用して既存のファイルリクエストからコピーすることができます。リンクを知っている人であれば誰でもドキュメントをアップロードできますが、構成で指定されていない限り、Boxでの認証は不要です。

box.comで、ユーザーはフォルダにファイルリクエストを設定できます。

サイトのiframeにリンクを追加します。

最終的に、ポータルにBoxファイルリクエストが埋め込まれます。

ユースケース

  • 一時的なユーザーからのドキュメントの取得 (オンボーディングに関するドキュメント、パートナーや請負業者からのドキュメント、法執行に必要な公的証拠を収集するポータルなど)
  • 必須のメタデータを要求するアップロード

メリット

  • 作成と構成にコーディングは必要なく、かつエンドユーザーはログインの必要もありません。
  • Box Relayとうまく統合できます。

課題

  • iframeに埋め込むアプローチでは、主にクロスサイトスクリプティングの制限によって、クライアント側が埋め込みコンポーネントとやり取りする余地がほとんどありません。

終わりに

ここまで、お読みいただきありがとうございました。皆さんがアプリにBoxを統合する方法を十分ご理解いただけたのであれば幸いです。この記事全体で役に立つリソースへのリンクをご紹介しましたが、これまでどおり、まずはja.developer.box.comを参照することをお勧めします。皆さまの開発作業が充実することを願っています。次回は、App UserとApp Userが便利な理由について詳しく説明します。

--

--

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