Box UI Elements、React、Tailwind CSS、Vercelを使用したコンテンツポータルの作成 (パート1)
Boxはそれ自体が非常に優れた製品ですが、特定のユーザーインターフェースを含むカスタマイズしたエクスペリエンスを外部ユーザーに提供したいユースケースがある場合もあります。そこで、コンテンツポータルの登場です。
このポータルシリーズのパート1では、Boxのサンプルコードリポジトリの1つを使用して、Box UI Elements、React、Tailwind CSS、Vercelを使用したポータルの開発をすぐに開始する方法について説明します。
カスタムポータルの概要
ポータルとは、基本的にBoxの上に重ねるオーバーレイのことです。これにより、社内の従業員、ベンダー、社外の顧客など、ユーザーは誰でもビジネスプロセスのストレージレイヤーとしてBoxを使用できます。
作成したポータルには、全面的にカスタマイズしたユーザーエクスペリエンスを提供できます。また、Box APIにより、デスクトップでもモバイルデバイスでもコンテンツクラウドの操作が簡単になります。
特筆したいのは、業界をリードするBoxのセキュリティメカニズムはそのままで、アクセスすべき人だけがコンテンツにアクセスできるようになっている点です。
顧客のユースケース
保険金請求や資産管理など、さまざまな目的でポータルを使用しているお客様はたくさんいます。いくつかの例を以下に示します。
Morgan Stanleyは、クライアントが顧問とコラボレーションできるように、Box APIを使用して財務や税務に関するドキュメントを管理するデジタル保管庫を作成しました。
新規企業や中小企業を金融機関につなぐFundwellは、新規顧客の融資申請や申請書類の保管にポータルを使用しています。
Nationwideは、保険金請求プロセス全体の大部分にBoxコンテンツポータルを使用しています。
一連の手順
今回のデモでは、Box UI Elementsを使用して、Increo Financialという架空の銀行のシンプルな財務ドキュメントポータルを作成する方法を説明します。このサンプルコードを起点に、独自のポータルのさらなる開発を開始できます。
UI Elementsとは、Box Platformの使いやすくカスタマイズ可能なReact UIコンポーネントです。バージョン19以降ではレスポンシブ対応になりました。
ファイルのアップロード、ダウンロード、表示を可能にするコンテンツエクスプローラや、ユーザーへファイルの表示だけを可能にするプレビューElementなど、種類はいくつかあります。今回のポータルでは、さまざまなUI Elementを使用します。
Boxの機能やスコープが組み込まれているため、たとえばユーザーがファイルのメタデータを表示したりBox AIを使用したりできるようにしたい場合は、構成を少し変更するだけで簡単に行うことができます。
最新のデスクトップおよびモバイルブラウザはすべてサポートされており、ロゴをカスタマイズすることもできます。
UI Elements v20の時点では、React v17.0.2およびNode 18.18.0まで利用できます。
🚨重要な注意事項🚨
このデモは、デモのみを目的としており、本番環境向けではありません。認証周りの対策が十分ではないため、本番環境向けにはさらに開発が必要です。
前提条件
このチュートリアルのパート1を実行するには、以下が必要です。
- GitHubアカウント
- Vercelアカウント — GitHubアカウントでログインすることをお勧めします。
- Box Developerアカウント — Box全体で一意のメールアドレスを使用する必要があります。
Boxアプリケーションの構成
- 新しいアプリケーションを作成する: Box開発者コンソールに移動し、[アプリの新規作成] をクリックして、[カスタムアプリ] を選択し、アプリに名前を付けたら、[サーバー認証 (JWT使用)] を選択します。注 — このデモでは実際に必要ありませんが、認証の種類にJWTを使用して設定しています。これは、実際の展開では、App User管理とより高いレベルのセキュリティにJWTを使用することが推奨されているためです。
- アプリケーションスコープを設定する: アプリ + Enterprise、すべてのファイルの読み取り/書き込み、ユーザー/グループ/Enterpriseのプロパティの管理、Box AI (Box AIはEnterprise Plus以上のライセンスでのみ利用可能)、およびユーザーアクセストークンの生成といった必要な権限がアプリケーションに設定されていることを確認します。繰り返しになりますが、これらのスコープの一部はデモの展開では使用されていないものの、実際のシナリオでは必要になります。
- 公開/秘密キーペアを生成する: ボタンをクリックして、公開/秘密キーペアを生成します。これには2FAが必要であることに注意してください。以前に設定したことがない場合は、設定する必要があります。ポップアップにその手順が表示され、設定が完了したら、もう一度クリックしながらキーペアのフローを実行する必要があります。
- JSON構成ファイルをダウンロードする: このファイルは、キーペアの生成時に自動的にダウンロードされますので、手元に置いておいてください。このファイルの情報は今後の手順で必要になります。
- 保存する: 右上のボタンを使用して変更を保存します。
Boxアプリケーションの承認
通常どおり、サーバー認証アプリケーションは、Boxインスタンスの管理者が承認する必要があります。カスタムアプリの承認で説明されている手順に従って、アプリケーションを承認します。承認後、サービスアカウントのメールアドレスがアプリに割り当てられます。ユーザーが変更を加えるたびに、アプリの再承認が必要になります。
Boxのダミーコンテンツの設定
デモを動作させるために、ダミーコンテンツを作成します。実際のシナリオでは、この作業のほとんどは、ユーザーの作成時やIncreo Financialへのサインアップ時に自動化される場合がありますが、わかりやすさとスピードアップのために、ここでは手動で行います。
ポータルのコンテンツすべてを配置するルートフォルダを作成し、Portal Demoという名前を付けます。
先ほど作成したJWTアプリケーションのサービスアカウントのメールアドレスをコラボレータとしてPortal Demoルートフォルダに追加します。このメールアドレスは、Box開発者コンソールのアプリケーションの [一般設定] タブで確認できます。
ポータルに複数のエンドユーザーがいることを想定したうえで、あるエンドユーザー用のフォルダを作成してみましょう。デモのルートフォルダに新しいフォルダを作成し、架空のユーザーの名前 (例: Robert Smith) を付けます。
このデモではApp Userを使用しませんが、コンテンツポータルを本番環境に実装する場合、適切なセキュリティ対策を維持するにはApp Userを利用することが不可欠です。このトピックの詳細については、こちらとこちらのページを参照してください。
Smith氏のフォルダの下に、さらに2つのフォルダ (Applications (申請書用)とStatements (口座明細書用)) を作成します。
Statementsフォルダに、こちらのダミーの口座明細書のコピーをアップロードします。
ユーザーのルートフォルダに、こちらのダミーの利用規約ファイルのコピーをアップロードします。実際のシナリオでは、このファイルは別の場所に存在するかもしれませんが、BoxのプレビューUI Elementを表示するには、実際にプレビューするためのサンプルファイルを用意する必要があります。
作成したコンテンツごとに、次の手順ではIDが必要になるため、Boxを開いたままにしておきます。
Vercelを使用した最初のサイトの展開
Boxアプリケーションといくつかのダミーコンテンツを作成したので、Boxのサンプルリポジトリからデフォルトのポータルのコピーを展開できます。
🚨重要🚨
すでに作成済みのVercelアカウントをタブで開いておくことをお勧めします。アカウントを持っていない状態やタブを開いていない状態でVercelに展開すると、混乱を招く可能性があります。GitHubから初めて展開する場合は、サードパーティ製の統合を介してGitHubとVercelを接続するよう求められます。これは正常な動作です。
Vercelに展開するには、こちらをクリックしてください。いくつかのオプションを選択するよう求められるので、そのオプションについて説明します。
まず、上記のリンクをクリックしても以下の画面が表示されない場合は、Vercelにログインしていない可能性があります。右上からログインし、ウィンドウを閉じて、もう一度リンクをクリックします。
以下の画面が表示されたら、最初のボックスの右下にある [Create (作成)] をクリックします。そうすると、アカウント内にGitHubリポジトリが作成され、Boxのサンプルリポジトリのコードが複製されます。
次に、いくつかの環境変数を貼り付ける必要があります。セキュリティ対策を維持するには、組み込みのVercel環境変数を使用する方法が最善です。BoxコンテンツのIDは、各コンテンツのURLのバーで確認できます。たとえば、以下のスクリーンショットでは、URLの末尾に表示されているIDがStatementsフォルダのフォルダIDになります。
各 [Value (値)] フィールドを確認し、必要な変数を入力します。完了したら、[Deploy (展開)] をクリックします。
- REACT_APP_BOX_CONTENT_UPLOADER_FOLDER_ID変数は、Statementsフォルダを表します。
- REACT_APP_UPLOADED_FOLDER_ID変数は、Applicationsフォルダを表します。
- REACT_APP_BOX_PREVIEW_FILE_ID変数は、利用規約ファイルを表します。
- 残りの変数はすべて、自動的にダウンロードされたJSON構成ファイルから取得できます。セキュリティ上の理由から、貼り付けた変数を表示しませんが、コピーして貼り付けるだけです。引用符は不要です。秘密キーは順不同であり、すべてのキーの中で最も長いことに注意してください。貼り付けた値に必ず\nを含めるようにしてください。
[Deploy (展開)] をクリックすると、表示される画面が以下に変わります。この処理には数分かかる場合があります。
次のエラーが表示される場合があります。回避策として、左上の自分の名前をクリックし、ダッシュボードに移動します。
ポータルプロジェクトをクリックして選択します。
プロジェクトの [Settings (設定)] タブで、[Node.js Version (Node.jsバージョン)] セクションまで下にスクロールします。ドロップダウンで [18.x] を選択します。[Save (保存)] をクリックします。
次に、ポータルプロジェクトの [Deployments (展開)] タブに切り替えます。失敗した展開が表示されたら、省略記号をクリックして [Redeploy (再展開)] を選択します。
ポップアップで、デフォルト設定をそのままにし、[Redeploy (再展開)] をクリックします。
数分後、成功した場合は、以下のように [Status (ステータス)] が [Ready (準備完了)] と表示されます。
[Visit (アクセス)] ボタンをクリックすると、展開したサンプルコンテンツポータルのホームページが表示されます。
展開後の構成
デフォルトのポータルをテストするには、Boxアプリケーションの [構成] セクションにCORSドメインを追加する必要があります。追加するCORSドメインは、[Visit (アクセス)] ボタンの下で確認できます。標準ページのほか、展開先URL (テスト中に展開先URLを参照/使用する予定の場合) も追加する必要があります。末尾にスラッシュは含めず、コンマで区切ってください。
URLを追加したら、右上の保存ボタンをクリックします。
デフォルトのポータルのテスト
展開されたデフォルトのポータルには認証が組み込まれていないため、メールアドレスフィールドは空白のままでもかまいません。パスワードフィールドには、Boxアプリケーションの [構成] セクションから取得した開発者トークンを貼り付けることができます。
[開発者トークンを生成] をクリックし、そのトークンをコピーします。
トークンをパスワードフィールドに貼り付けて、[Sign In (サインイン)] をクリックします。
サインイン後、以下の画面が表示されます。ヘッダーの [My Statements (自分の口座明細書)] オプションをクリックします。
すべてが正常に機能した場合、アップロードしたダミーの口座明細書を含むStatementsフォルダが表示されます。このページではコンテンツアップローダーUI Elementを使用しているため、多くの処理を実行できます。口座明細書をクリックします。
口座明細書のプレビューが表示されます。ここで、右上の [Logout (ログアウト)] をクリックします。
ホームページに戻るように促されます。
次回の予定
このポータルシリーズの今後のブログでは、ページの追加、認証の改善、Box AIの使用、色のカスタマイズなど、いくつかの機能強化について説明する予定です。
まとめ
パート1で説明したように、Box UI ElementsとBox APIを使用すると、内部ユーザーまたは外部ユーザー向けのカスタムエクスペリエンスを非常に簡単に作成できます。
次のパートでは、追加機能によるデフォルトのポータルの拡張に重点を置いて説明する予定です。
いつものように、Box Developer Relationsチームへのフィードバックがある場合は、Developer Forum (英語のみ) にコメントをお送りください。
