Box Content Explorerの強化されたメタデータビューのご案内

Box Content Explorerでは、メタデータビューのエクスペリエンスが全面的に刷新されました。このコンポーネントのv2では、強力な新機能を提供し、最新のデザインと改善されたユーザーエクスペリエンスにより大幅な飛躍を実現します。

v2の新機能

Box UI Elementsパッケージのv24.0.0以降では、以下の機能を備えた、Box Content Explorer (v2) の強化されたメタデータビューを組み込むことができます。

高度なフィルタおよび編集用のインターフェース: メタデータフィールドのタイプごとに専用のUIを備えた多面的なフィルタ。
柔軟な表示オプション: リストビューとグリッドビューを切り替え。
単一および一括のカスタム操作: 複数の項目を選択し、一括操作を実行。
ページ割り: ページ割りされたコンテンツ間を移動。

このコンポーネントにはさらに機能が追加される予定のため、今後のお知らせにご期待ください。

⚠️ 重要: メタデータビューv1は公式サポートが終了しました。v1は24.0.0パッケージで引き続き利用できますが、バグ修正や新機能は提供されなくなります。最新の機能が提供されるようにするには、移行ガイドに従い、コンテンツエクスプローラのv2のメタデータビューに切り替えてください。

0_BpPSHxdiQ4rQ1xCA

前提条件

コンテンツエクスプローラのメタデータビューを使用するには、以下を行う必要があります。

Box開発者コンソールでBox Platformアプリを作成する。
BoxアプリのCORS設定にカスタムアプリのリンクを追加する。
開発者トークンを生成する。
Box管理コンソールでメタデータテンプレートを設定する。
選択したフォルダまたはファイルにメタデータテンプレートを適用する。

Box UI Elementsパッケージv24.0.0は、React 18.0.0をサポートしているため、18.0.0以上のノードが必要です。

Reactでプロジェクトを開発している場合は、必ずbox-ui-elementsパッケージからピア依存関係をコピーし、それをプロジェクトの依存関係に追加してインストールしてください。

Boxでメタデータを初めて使用する場合は、利用を開始するにあたり、以下のリソースもご確認ください。

Box Content Explorerの強化されたメタデータビューの表示

ニーズや設定に応じて、Box UI Elementsは、Vanilla JSまたはReactとともに使用できます。インストールの詳細については、こちらのガイドを参照してください。新しいバージョンのコンテンツエクスプローラを表示するには、box-ui-elementsパッケージをインストールするか、v24.0.0にアップグレードします。わかりやすくするために、Vanilla JSを使用した基本的な設定例を紹介します。大文字で記述された文字列は、カスタム値に置き換える必要があります。

const contentExplorer = new Box.ContentExplorer();

contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
   container: ".container",
   defaultView: "metadata",
   // metadataQuery must match the query files/folders by metadata API body request: 
   // https://developer.box.com/reference/post-metadata-queries-execute-read/
   metadataQuery: {
       from: "METADATA_SCOPE.TEMPLATE_KEY", // For example from: "enterprise_123456789.templatename" where the number is the enterprise_123456789 is metadata template scope)
       ancestor_folder_id: "FOLDER_ID"
       // Metadata fields and values pulled to the component
       fields: [
           "metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY1",
           "metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY2",
           "metadata.TEMPLATE_SCOPE.TEMPLATE_KEY.FIELD_KEY3",  // For example "metadata.enterprise_123456789.templatename.date"
           ...
       ]
       // Optional for filtering data with specific metadata value
       query: "METADATA_FIELD_KEY = :arg1",
       query_params: { arg1: "METADATA_FIELD_VALUE" },
  },
  features: {
      contentExplorer: {
          metadataViewV2: true, // Required for enabling V2
      },
  },
  // NEW dynamic column configuration
  metadataViewProps: {
    columns // Required - for details see section below
    ...
  }
});

Reactを使用している場合のコードスニペットを以下に示します。

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

// Fill with custom values of your metadata template
// You can use this endpoint to get all needed values: https://developer.box.com/reference/get-metadata-templates-id-id-schema/
const metadataScopeAndKey = `${METADATA_TEMPLATE_SCOPE}.${METADATA_TEMPLATE_KEY}`;
const metadataFieldNamePrefix = `metadata.${metadataScopeAndKey}`;
const folderID = "FOLDER_ID"
const metadataQuery = {
    // Check this endpoint for more details on query structure: 
    // https://developer.box.com/reference/post-metadata-queries-execute-read/
    from: metadataScopeAndKey,
    ancestor_folder_id: folderID,
    fields: [
       "metadata.METADATA_SCOPE.TEMPLATE_KEY.METADATA_FIELD_KEY1",
       "metadata.METADATA_SCOPE.TEMPLATE_KEY.METADATA_FIELD_KEY2",  // For example "metadata.enterprise_123456789.templatename.date"
       ...
    ]
};
// Required - for details see section below
const columns = [
    {
       textValue: "METADATA_FIELD_DISPLAY_NAME1", // or our your custom value
       id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY1}`,
       type: field.type,
       allowsSorting: true,
       minWidth: 150,
       maxWidth: 150,
    },
    {
       textValue: "METADATA_FIELD_DISPLAY_NAME2", // or our your custom value
       id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY2}`,
       type: field.type,
       allowsSorting: true,
       minWidth: 150,
       maxWidth: 150,
    },
    ...
];
const componentProps = {
  features: {
    contentExplorer: {
        metadataViewV2: true,
    },
  },
  metadataQuery,
  metadataViewProps: {
    columns
  },
};
const ContentExplorerContainer = () => {
  const { features, metadataQuery, metadataViewProps } = componentProps;
  // Store token in a secure way
  return (
    <IntlProvider locale="en">
      <ContentExplorer
        title="Component title" // The title of the whole component, if not defined, defaults to the folder name specified in the `ancestor_folder_id`.
        token={TOKEN} 
        defaultView="metadata"
        features={features}
        metadataQuery={metadataQuery}
        metadataViewProps={metadataViewProps}
      />
    </IntlProvider>
  );
};
export default ContentExplorerContainer;

コンテンツエクスプローラのためのデータ収集

作業を簡単にするために、データ (使用可能なメタデータフィールドとそのキーなど) をBox APIから取得することができます。データを照会するのに非常に便利なエンドポイントが2つあります。

名前を指定してメタデータテンプレートを取得。このエンドポイントによって、メタデータテンプレートのスコープ、使用可能なフィールドなどの多数の有用なデータが、関連付けられたキー、タイプ、表示名などとともに返されます。これは、このコンポーネントに必要なmetadataQueryオブジェクトやcolumnsオブジェクトを作成する際に役立つ場合があります。
メタデータによるファイル/フォルダに対するクエリ。このエンドポイントは、このUIコンポーネントのデータを照会するために内部で使用されます。そのため、metadataQueryプロパティは、仕様に一致する有効なクエリである必要があります。

メタデータテンプレートキーは、管理コンソールのUIに表示される表示名とは異なる場合があることに注意してください (ただし、URLアドレスで確認可能です)。フィールドキーと表示名についても同様で、管理コンソールのUIでフィールドの表示名を変更しても、その変更はフィールドキーに反映されません。これにより、表示名を変更したい場合にコンポーネントが破損するのを防ぎます。フィールドの表示名がラテン文字以外で記述されている場合、フィールドキーはより汎用的な名前に変更されます。

メタデータ列の表示

表示、並べ替え、サイズ変更を厳密に制御するメタデータ列の定義を詳しく見ていきましょう。上記のスニペットでわかるように、コンポーネントでメタデータの表を表示する新しい方法があります。fieldToShowの代わりに、columnsという新しいプロパティがあります。このプロパティでは、minWidth、maxWidth、typeなど、さらにいくつかのパラメータを使用できます。

const columns = [
    {
       textValue: "METADATA_FIELD_DISPLAY_NAME", // or our your custom value
       id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY}`,
       type: field.type, // Could be string, float, date, multiSelect, ect.
       allowsSorting: true,
       minWidth: 150,
       maxWidth: 150,
    },
    ...
];

このプロパティは、オブジェクトの配列であり、必須のmetadataViewPropsオブジェクトで入れ子になっています。

metadataViewProps: {
    columns
},

行の選択の有効化

個々の行の選択を有効化できるようになりました。ユーザーが1つ以上の項目を選択すると、ヘッダーには、選択記述子とメタデータ編集ボタンが表示されます。この機能は、以下のセクションで説明する単一の操作と一括操作を有効にするために必要です。行の選択の範囲は、ページ割りされたコンテンツに限定されます。

0_vfGl2EkYk7nBsh5M

選択機能を有効にするには、以下のコードスニペットのように、metadataViewPropsオブジェクト内でisSelectionEnabledをtrueに設定します。

const contentExplorer = new Box.ContentExplorer();

contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
  ...
  metadataViewProps: {
    columns,
    isSelectionEnabled: true
  },
});

メタデータの編集

1つ以上の項目が選択されると、コンポーネントのヘッダーにある [メタデータ] ボタンを選択でき、これによってサイドバーが開きます。これにより、コンポーネントのサイドバーに表示される項目を編集できます。コンポーネントのヘッダーには、選択したファイル数が表示されます。この機能は、初期設定で有効になっているため、追加のプロパティは必要ありません。

0_35VwWBE97o7bOmMV

メタデータのフィルタ

強化されたコンテンツエクスプローラのV2で使用できる他の機能として、フィルタがあります。ユーザーは、ファイルタイプで項目にフィルタをかけたり、フォルダにフィルタをかけたり、Boxのメタデータテンプレートで指定されたメタデータフィールド値でフィルタをかけたりできるようになりました。

0_MBajRxa-JwhhUghM

フィルタチップは、デフォルトで有効になっています。[すべてのフィルタ] チップを無効にするには、actionBarPropsオブジェクトのisAllFiltersDisabledをtrueに設定します。

const contentExplorer = new Box.ContentExplorer();

contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
 ...  
 metadataViewProps: {
   columns,
   isSelectionEnabled: true,
   actionBarProps: { 
     isAllFiltersDisabled: true,
   }
 }
});

リストビューとグリッドビューの切り替え

コンテンツエクスプローラのV2では、グリッドビューを導入しました。ユーザーは、コンポーネントの操作バーにある専用のボタンを使用して、リストビューとグリッドビューをシームレスに切り替えることができるようになりました。選択、フィルタ、編集などのその他の機能もこのビュー内で使用できます。

0_qvNmessBulhYG3gn

グリッドビューを無効にするには、以下のコードスニペットのように、metadataViewPropsオブジェクト内でactionBarProps.isViewModeButtonDisabledをtrueに設定します。

const contentExplorer = new Box.ContentExplorer();

contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
  ...
  metadataViewProps: {
    columns,
    actionBarProps: {
      isViewModeButtonDisabled: true,
    }
  },
});

V2への移行

V2に移行するには、コンポーネントの呼び出しで次の構成を変更する必要があります。

box-ui-elementsパッケージのバージョンを24.0.0以上にアップグレードします。
featuresフラグを追加して、強化されたメタデータビューを有効にします。

features: {
contentExplorer: {
metadataViewV2: true
}
}
メタデータのfieldToShowの構成を新しいcolumnオブジェクトに変換します。columns配列を新しいmetadataViewPropsオブジェクトに渡します。

const columns = [
{
textValue: "METADATA_FIELD_DISPLAY_NAME", // or our your custom value
id: `${metadataFieldNamePrefix}.${METADATA_FIELD_KEY}`,
type: field.type,
allowsSorting: true,
minWidth: 150,
maxWidth: 150,
},
...
];
カスタム操作、一括操作、選択などの追加オプションを使用してコンポーネントを構成します。

スタイル設定とカスタマイズ

コンテンツエクスプローラの強化されたメタデータビューは、さらにカスタマイズできます。Box UI Elementsのテーマ、スタイル設定、高度なカスタマイズに関するその他の記事もぜひご確認ください。

今回のリリースでは、コンテンツエクスプローラのメタデータビューが大幅に向上しました。実際に試してみて、簡単かつ大規模なメタデータ管理を体験してください。機能のリストは今後数か月で拡充される予定のため、Boxの開発者向けニュースのフォローもお勧めします。

🦄 Box Platformの他のエキスパートと交流したい場合は、サポートや知識共有のためのBox Developer Community (英語のみ) にご参加ください。