Vercelを使用したBoxウェブアプリ統合の作成

Published in

Box Developer Japan Blog

Apr 10, 2024

アプリケーションとデータの相互接続 (Bing Image Creatorで作成)

Boxウェブアプリを調べる中で、ファイルまたはフォルダの右側にある省略記号ボタンをクリックすると、ドロップダウンに [統合] というオプションがあることに気付くかもしれません。そのオプションにカーソルを合わせると、さらにドロップダウンが表示され、選択したコンテンツから開始できる組み込みの操作のリストが示されます。たとえば、ユーザーは [Send with Gmail] をクリックするだけで、そのコンテンツの共有リンクを別のユーザーにメールで送信できます。

Boxでは、このようなオプションをウェブアプリ統合と呼んでいます。さらに、左側のメニューバーの [アプリ] タブをクリックすると、選択可能な公開されている多数の統合が見つかります。ただし、統合は、App Centerに公開する前に、開発して設定する必要があります。今回の記事では、その方法について説明します。

それでは、始めましょう。

ウェブアプリ統合の概要

ウェブアプリ統合やサービスアクションにより、任意の開発者が提供するサードパーティ製アプリケーションやカスタムビルドアプリケーションをBoxのUIに組み込むことができ、ユーザーはBoxウェブアプリでコンテンツを表示するだけでなく、コンテンツを変更または使用できるようになります。サービスアクションを使用すると、ユーザーは、統合を開始するコンテンツの詳細を共有、編集、または表示できます。

Boxには、ポップアップ統合と呼ばれる機能が用意されています。ソリューションが、メインのBoxウェブアプリ外のポップアップウィンドウに表示される機能です。統合のコードはすべて、Boxとは別の場所でホストおよび管理する必要があります。

統合が開始されると、設定されたすべてのパラメータ (ファイルIDやファイル拡張子など) は、処理のためURLに送信されます。また、認証コードパラメータも送信できます。これは、BoxにアクセストークンをリクエストしてさらにAPIコールを行うために使用できます。パラメータのオプションの詳細については、Boxのガイドのこちらのセクションをご覧ください。

一般的なユースケース

Gmailでの共有リンクの送信、Slackでのファイルの共有、DocuSignやAdobeでの署名用ドキュメントの送信、Adobeを使用したPDFの作成など、Boxをご利用のお客様はさまざまなユースケースにこの機能を使用しています。ウェブアプリ統合により、Boxにすでに存在するコンテンツに関連する一般的なタスクを完了する際の手動によるオーバーヘッドが削減されます。

一連の手順

ウェブアプリ統合を作成するには、Boxアプリを作成して、そのアプリケーションをウェブアプリ統合として構成し、カスタムコードをサードパーティ製のホスティングプロバイダに展開して、テスト、公開する必要があります。必要に応じて、作成した統合をBox App Centerに送信できます。

このデモでは、認証コードをトークンと交換し、統合を開始したファイルの名前を変更するという、とても簡単な例を紹介します。もちろん、メインのBoxウェブアプリでファイルの名前を変更することは可能ですが、不可能なことは追い求めずに実現できることを実行する技術を示すために、このデモでは、統合を開始するコンテンツを使用するだけでなく変更する方法も紹介します。このチュートリアルを起点に、独自の開発を開始してください。

先に進む前に、この例はサンドボックス環境または開発者環境に展開する必要があることに注意してください。簡単かつ迅速に進めるため、私はブラウザにトークンを保存していますが、これは最も安全とは言えません。独自に実装する場合は、自身の組織のセキュリティポリシーに従う必要があります。

Boxアプリの設定

Box開発者コンソールで、[アプリの新規作成] をクリックした後、[カスタムアプリ] オプションを選択します。

アプリケーションに名前を付け、必要なオプションを選択します。[次へ] をクリックします。

[ユーザー認証 (OAuth 2.0)] を選択し、[アプリの作成] をクリックします。

[構成] タブで、[Boxに格納されているすべてのファイルとフォルダの読み取り] チェックボックスと [Boxに格納されているすべてのファイルとフォルダへの書き込み] チェックボックスがオンになっていることを確認します。右上の [変更を保存] をクリックします。

[統合] タブを設定する前に、ポップアップに表示されるカスタムコードを展開する必要があります。

カスタムコードの展開

このデモの完成したコードは、こちらのGitHubリポジトリにあります。わかりやすくするために、Vercelを使用して小さなウェブサーバーを作成します。READMEを下にスクロールすると、[Deploy (展開)] ボタンが見つかります。それをクリックします。

Vercelアカウントがない場合は、Gitプロバイダのいずれかをクリックして作成します。アカウントがある場合はログインします。この例ではGitHubを使用します。

まず、コードの複製先となるGitHubリポジトリを作成する必要があります。これは、デモの後にカスタマイズする場合にも役立ちます。リポジトリに名前を付け、[Create (作成)] をクリックします。

次に、前の手順で作成したBoxアプリのクライアントIDとクライアントシークレットを追加します。それぞれのボックスに情報を入力し、[Deploy (展開)] をクリックします。

完了すると、次の画面が表示されます。この時点で、ウェブアプリはクラウドに展開されています。これで、このアプリをBoxと組み合わせて使用できるようになりました。

[Continue to Dashboard (ダッシュボードに進む)] をクリックした後、右上の [Visit (アクセス)] ボタンをクリックします。URLのバーから展開先URLをコピーします。これは、次のBoxの構成手順で使用します。

リポジトリの設定方法やアプリの動作を詳しく知りたい場合は、GitHubリポジトリにあるReadmeを参照してください。

ウェブアプリ統合の構成

Box開発者コンソールで、アプリの [統合] タブにある [ウェブアプリ統合を作成] をクリックします。

次に、アプリに関連するすべての情報を入力する必要があります。名前と説明を追加します。ページを下に進みながら、これらすべてをデフォルトの選択肢のままにしましたが、このデモ以外のユースケースによっては、変更が必要になる場合があります。

展開先URLを [クライアントコールバックのURL] ボックスに追加します。プロンプトメッセージを追加します。その後、ページを下に進みます。

[コールバックパラメータ] セクションで、いくつかのオプションを追加する必要があります。展開したコードを動作させるには、私の命名規則に正確に一致させる必要があります。Getメソッドの4つのパラメータ (file_id、file_extension、redirect_uri、auth_code) を追加し、右側のドロップダウンでそれぞれのオプションを選択しました。

Boxには、ウェブアプリ統合用のメソッドとしてGetとPostの2つが用意されています。Postメソッドを使用する場合、ウェブサーバーはPostリクエストを受け入れる必要があります。それ以外の場合は、GetメソッドのパラメータがURLに表示されます (例: http://your-client-callback-url.com/?get_param1=value1)。詳細については、Boxのガイドをご覧ください。現時点では、[統合ステータス] は [開発] のままにしておきます。右上の [変更を保存] をクリックします。