Box Content Explorerのメタデータビュー

Yuko Taniguchi

Published in

Box Developer Japan Blog

15 min readFeb 8, 2024

Box UI Elementであるコンテンツエクスプローラが、メタデータビューの導入により拡張されました。この記事では、Reactベースのカスタムプロジェクトにコンポーネントを追加する方法について説明します。

さらに、Box UI Elementsがレスポンシブ対応になったため、すべてのモバイルデバイスユーザーにより適したエクスペリエンスを提供できるようになりました。 🎉

このデモの前提条件:

Nodeのバージョン: ^18.18.2
Reactのバージョン: ^17.0.2
最新リリースのbox-ui-elementsパッケージ: ^19.0.0

このプロジェクトのために実行する必要がある手順:

1. Boxアカウントを設定する

Boxアカウントをまだお持ちでない場合は、先に進むために用意してください。

無料のDeveloperアカウントに関わる最近の出来事により、Boxでは、新規の無料Developerアカウントオプションを制限せざるを得なくなりました。
既存のEnterpriseアカウントをお持ちの場合は、手順に従ってサンドボックスを作成してください。

2. Boxアプリを作成して構成する

Boxアプリの種類の詳細については、Boxの開発者向けガイドをご覧ください。

このプロジェクトでは、必ず開発者コンソールのCORSの設定にローカルでの開発用のアドレスを追加してください。

特に必要でない限り、URLの末尾にスラッシュを使用しないでください。

また、このアプリケーションの開発に必要なため、開発者トークンも生成します。

開発者トークンの有効期間は1時間のみのため、無効になったら必ず取り消してください。

3. メタデータテンプレートを作成してフォルダに適用する

Boxメタデータの基本的な概念を理解するには、Rui Barbosaのブログ記事の翻訳またはBoxドキュメントのクイックスタートガイドをご確認ください。メタデータテンプレートを作成してフォルダに適用する方法の詳細な手順も記載されています。

Boxのメタデータ管理の入門ガイド

この記事では、メタデータがデータを明確にする場合やユーザーに役立つようにする場合に重要なツールであること説明します。ドキュメントへのリンクについては、後述の参照資料をご確認ください。

medium.com

メタデータテンプレートは、以下のような方法で構成できます。

Box管理コンソールで直接構成
APIを使用 (フォルダにメタデータインスタンスを作成、メタデータカスケードポリシーを作成)
TS SDKを使用 (MetadataTemplatesManager、MetadataCascadePoliciesManager)

Box内のフォルダを選択して、メタデータテンプレートを適用します。必ずカスケードポリシーを有効にしてください。

以下のスクリーンショットは、contentExplorerメタデータテンプレートが適用されるBoxアプリのフォルダ設定ポップアップです。カスケードポリシーが有効としてマークされています。

コンテンツエクスプローラのメタデータビュー

完成したサンプルプロジェクトは、こちらから直接複製できます。実際に一から試したい場合は、ターミナルで次のコマンドを使用してReactアプリを作成してください。

npx create-react-app my-app

Box UI Elementsは現在、React v17をサポートしています。デフォルトでは、create-react-appはReact v18を起動するため、この場合はダウングレードする必要があります。

また、場合によっては、react-scriptsをローカルマシンにインストールする必要もあります。

npm i react-scripts

依存関係の競合に起因する問題を回避するには、以下のpackage.jsonファイルの内容をご確認ください。

{
  "name": "content-explorer-metadata",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "box-ui-elements": "^19.0.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-intl": "^6.6.1",
    "react-scripts": "^5.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "overrides": {
    "draft-js": {
      "react": "$react",
      "react-dom": "$react-dom"
    },
    "react-tether": {
      "react": "$react",
      "react-dom": "$react-dom"
    },
    "react-beautiful-dnd": {
      "react": "$react",
      "react-dom": "$react-dom"
    },
    "react-textarea-autosize": {
      "react": "$react",
      "react-dom": "$react-dom"
    }
  },
  "devDependencies": {
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^9.3.0",
    "web-vitals": "^3.5.1"
  }
}

次に、React v17の構文を使用してindex.jsファイルを調整してください。

import React from 'react';
import { render } from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = document.getElementById('root');
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  root
);
reportWebVitals();

最後に、App.jsファイルに切り替えます。まず、いくつかのimportを追加します。

import React from "react";
import "./App.css";
import {IntlProvider} from "react-intl";
import ContentExplorer from "box-ui-elements/es/elements/content-explorer";

次に、ContentExplorerコンポーネントに渡されるデータを定義します。

function App() {
  // Get the token from Developer Console (app's configuration tab)
  const token = "<DEVELOPER_TOKEN>";

   // Folder ID with a metadata template applied
  // The metadataQuery will apply to this folder
  const rootFolderID = "<ROOTFOLDER_ID>";
  // Get ENTERPRISE_ID from Developer Console (app's general settings)
  const EID = "<ENTERPRISE_ID>"
  // Get templatekey from Admin Console (Content -> Metadata -> check url for ID)
  const templateName = "<METADATA_TEMPLATE_NAME>"
  
  // Define metadata source
  // Example: enterprise_123456789.metadatatemplate
  const metadataSource = `metadata.enterprise_${EID}.${templateName}`
  const metadataQuery = {
    from: metadataSource,
    // Filter items in the folder by existing metadata key
    query: "key = :arg1",
    // Display items with value
    query_params: { arg1: "value" },
    // Define the ancestor folder ID
    ancestor_folder_id: 0,
    // Define which other metadata fields you'd like to display
    fields:[
      `${metadataSource}.name`,
      `${metadataSource}.last_contacted_at`,
      `${metadataSource}.industry`,
      `${metadataSource}.role`,
    ]
  };
  // The metadata fields/columns to view - must be valid field names from the metadata template
  const fieldsToShow = [
    // Determine if the user can edit the metadata directly from Content Explorer component
    { key: `${metadataSource}.name`, canEdit: false },
    // Determine label alias on metadata column with displayName prop
    { key: `${metadataSource}.industry`, canEdit: false, displayName: "alias" },
    { key: `${metadataSource}.last_contacted_at`, canEdit: true },
    { key: `${metadataSource}.role`, canEdit: true },
  ];
  
  // defaultView - a required prop to paint the metadata view.
  // If not provided, you'll get regular folder view.
  const defaultView = "metadata";
  return (
      <IntlProvider locale="en">
        <div className="App">
          TODO
        </div>
      </IntlProvider>
  );
}
export default App;

メタデータクエリの例をいくつか示します。

// Filter all files withing given folder that are due by date: 17/01/24.
query: "dueByDate = :arg1",
query_params: { arg1: "2024-01-17T00:00:00.000Z" },

// or

// Filter all files withing given folder in the technology industry.
query: "industry = :arg1",
query_params: { arg1: "Technology" },

Boxメタデータクエリの詳細については、Rui Barbosaが用意した詳細なガイドの翻訳をご覧ください。

Boxのメタデータクエリの使用

Boxメタデータとは、キーと値のペアとして格納される、コンテンツに関連付けられたカスタムデータです。これにより、コンテンツのコンテキストを示すことができます。メタデータクエリを使用すると、コンテンツに追加されたメタデータのコンテキストを検索…

medium.com

必要な詳細をすべて準備できたら、そのデータをコンテンツエクスプローラコンポーネントに渡します。

[...]

function App() {
  [...]
  return (
      <IntlProvider locale="en">
        <div className="App">
          <header className="App-header">
            <h2>Metadata view in Content Explorer</h2>
          </header>
          <section>
            <div className="metadata-based-view">
              <ContentExplorer
                rootFolderId={rootFolderID}
                token={token}
                metadataQuery={metadataQuery}
                fieldsToShow={fieldsToShow}
                defaultView={defaultView}
              />
            </div>
          </section>
        </div>
      </IntlProvider>
  );
}
export default App;

また、Box TS SDKを使用して、特定のフォルダまたはファイルのメタデータをプログラムで取得することもできます。このためには、パッケージをインストールします。

npm install box-typescript-sdk-gen

App.jsファイルでSDKをインポートします。

import { BoxClient, BoxDeveloperTokenAuth } from "box-typescript-sdk-gen";

さらに、特定のファイルまたはフォルダのメタデータをプルします。

const getMetadata = async function main(token) {
    try {
      const client = new BoxClient({
        auth: new BoxDeveloperTokenAuth({ token }),
      });
      const metadata = await client.fileMetadata.getFileMetadataById(
        'FOLDER_ID',
        'enterprise_123456789',
        'templatekey'
      );
      console.log(metadata)
    } catch (e) {
      alert(String(e));
      console.error(e);
    }
  }

次のスニペットでは、コンソールのメタデータファイルの詳細にログインします。

canEdit: true
extraData: 
  $canEdit: true
  $id: "ID"
  $parent: "file_ID"
  $scope: "enterprise_123456789"
  $template: "templatekey"
  $type: "templatekey-ID"
  $typeVersion: 5
  $version: 6
  dueByDate: "2024-01-17T00:00:00.000Z"
  owner: "Peter Pan"
  type: "Internal"

Box TS SDKのドキュメント (FolderMetadataManager、FileMetadataManager) をご確認ください。別の方法として、ファイルのメタデータインスタンスを取得またはフォルダのメタデータインスタンスを取得のAPIコールを実行することもできます。

完成したサンプルプロジェクトは、こちらにあります。

また、Enterpriseに適したメタデータ構造を作成する方法の詳細を確認することもできます。

今後のチュートリアルやBox Platformの最新情報にご期待ください。

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