コンテンツプレビューUI Element: Box AIによるユーザーエクスペリエンスの強化

コンテンツプレビューUI ElementのBox AIのベータ版リリースにより、ユーザーはカスタムアプリケーションから直接ドキュメントについて質問することができるようになりました。この機能をアプリにすばやく実装する方法について説明します。

Box UI Elementsを使用すると、開発者はカスタムアプリケーションにBox UIの要素を埋め込むことができます。Box UI Elementsにより、コラボレータやビューアーがコンテンツを操作する可能性のある場所にBox UIの要素を簡単かつ柔軟に表示できます。

Box Content Preview UI Elementとは

Box Content Preview UI Elementにより、アプリケーションやウェブサイトへのシームレスな統合が実現し、ユーザーはアプリケーションから移動することなくBoxにあるさまざまな種類のファイルを表示できます。PDF、画像、ビデオ、3Dモデルなど、さまざまなファイルの表示が可能です。さらに、Box AIをコンテンツプレビューUI Elementに追加し、カスタムアプリケーションから直接ドキュメントについて質問できるようになりました。以下のGIFでは、コンテンツプレビューUI ElementでBox AIを使用して財務ドキュメントに関する質問に回答するユースケースの例を示しています。

コンテンツプレビューUI ElementのBox AIは現在パブリックベータ版であり、Box Enterprise Plusプランでのみご利用いただけます。

Box AI for UI Elementsは、現在、npmパッケージをインストールすることでのみ利用できます。CDNバージョンはまだサポートされていません。

ReactライブラリとReactDOMライブラリの両方がすでにアプリケーションに読み込まれている場合に使用してください。これらのライブラリでは、ReactおよびReactDOMがバージョン16.6以上18未満であることを想定しています。

AIを使用する場合のデータセキュリティ、AIモデル、およびBoxの取り組みの詳細については、Box AIの原則をご覧ください。

作業の開始

独自のアプリケーションやウェブサイト内のコンテンツプレビューUI ElementでBox AIの機能の利用を開始するには、以下の簡単な手順に従います。

依存関係をインストールする

最初に、ベータ機能を含むパッケージをインストールします。

Release v20.0.0-beta.17 · box/box-ui-elements

package.jsonファイルで、box-ui-elementsのバージョンを確認できます。

"box-ui-elements": "20.0.0-beta.17",

また、formatjsをプロジェクトで使用していない場合は、このBox UI Elementに必要なため、依存関係として追加します。

npm i react-intl

アプリケーションを認証する

次の手順では、Boxアプリから適切な資格情報を使用してアプリケーションを認証します。

Box開発者コンソールで、以下の手順を実行します。

1. Boxカスタムアプリを作成し、認証方法としてOAuth 2.0を選択します。
2. [構成] タブでCORSの設定にlocalhostを追加します。
3. 開発者トークンを生成し、.envファイルに保存します。
4. Boxアカウントにファイルをアップロードし、BoxウェブアプリのURLから、またはAPIを使用してそのファイルのIDを取得して、その値を.envファイルに保存します。

REACT_APP_BOX_DEVELOPER_TOKEN=developerToken
REACT_APP_BOX_PREVIEW_FILE_ID=fileID

⚠️ 開発者トークンの有効期間は1時間だけであることに注意してください。トークンの有効期限が切れたら、Box開発者コンソールに戻ってトークンを取り消し、プロジェクト内の古いトークンを置き換えてください。

Box AIのスコープを適用する

Box AIを使用するには、管理コンソールと開発者コンソールの両方で適切なスコープを追加する必要があります。

管理コンソールでは、[Enterprise設定] に移動し、[Box AI] タブを選択します。[ユーザー権限] までスクロールし、Box AI for APIを選択してこの機能を有効にします。

開発者コンソールでは、カスタムアプリに対して [AIを管理する] スコープを選択します。

変更を保存すると、開発者トークンの再生成が必要になる場合もあります。

Box Content Preview UI Elementを追加する

それでは、Box Content Preview UI Elementの追加に進みます。react-intlパッケージからContentPreviewとIntlProviderをインポートします。.envファイルの開発者トークンとファイルIDを変数に格納します。コンポーネントを開始し、必要なプロパティを渡します。考えられる構成の詳細な説明については、Box Developerドキュメントを参照してください。

import ContentPreview from 'box-ui-elements/es/elements/content-preview';
import { IntlProvider } from "react-intl";

export default () => {
    // Storing variables in the front end is not secure.
    // You will want to grab this value from a database for production
    const token = process.env.REACT_APP_BOX_DEVELOPER_TOKEN
    let folderID = process.env.REACT_APP_BOX_PREVIEW_FILE_ID
    return (
      <IntlProvider locale="en">
         <ContentPreview 
            contentAnswersProps={{
              show: true,
            }}
            fileId={FILE_ID}
            token={TOKEN}
            {...PROPS}
         />
      </IntlProvider>
  );
};

これで、ユーザーは、簡単にドキュメントをプレビューし、Box AIを操作できるようになりました。Box AI for UI Elementsは、必要最小限の開発で簡単にBox AIをユーザーエクスペリエンスに導入できるようにする、外部ポータルとの差別化要因となります。

その他のリソース

Alex Novotnyが作成したコンテンツプレビューコンポーネントなど、他のBox UI Elementsを使用したポータルのデモ一式を含むGitHubリポジトリをご確認ください。

Box UI Elementsを人気のある他のフロントエンドフレームワークで使用する方法については、以下の記事をご覧ください。

Box UI ElementsとAngular

Box UI ElementsとVue 3

🦄 Box Platformの上級者から学びたい場合

サポートや知識共有のためのBox Developer Community (英語のみ) にご参加ください。