> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

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

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

<RelatedLinks
  title="必須のガイド"
  items={[
{ label: translate("Installation"), href: "/guides/embed/ui-elements/installation", badge: "GUIDE" }
]}
/>

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

コンテンツエクスプローラを使用すると、メタデータに基づいてファイルおよびフォルダを表示できます。メタデータビューでは、<Link href="/reference/get-metadata-templates-id">メタデータテンプレート</Link>と<Link href="/guides/metadata/queries">メタデータクエリ</Link>を使用して、表示するデータを探します。

<Frame>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/embed/ui-elements/explorer-view.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=cf627a11cd18d49f716efd0a0466a84d" alt="メタデータビュー" width="1037" height="399" data-path="images/guides/embed/ui-elements/explorer-view.png" />
</Frame>

## 前提条件

* <Link href="/guides/embed/ui-elements/explorer">コンテンツエクスプローラ</Link>ガイドを読む。
* <Link href="/guides/metadata/#metadata-terminology">メタデータの用語</Link>を確認する。
* <Link href="/guides/metadata/queries">メタデータクエリ</Link>に関する情報を確認する。

## アプリの作成と構成

1. <Link href="/guides/applications/platform-apps/create">Boxアプリを作成します</Link>。
2. \[CORSドメイン] にローカルでの開発用のアドレスを追加します。 <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/embed/ui-elements/box-app-cors.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=5a0ee09c03978dc56bcbd4d369eaa28f" alt="CORSドメイン" width="1346" height="644" data-path="images/guides/embed/ui-elements/box-app-cors.png" />
3. <Link href="/guides/authentication/tokens/developer-tokens">開発者トークン</Link>を生成します。

## メタデータテンプレートの作成

次の手順では、メタデータテンプレートを作成します。

1. <Link href="/guides/metadata/templates/create">メタデータAPI</Link>または[管理コンソール][creating-templates-ui]を使用してテンプレートを作成します。
2. すでに作成済みのテンプレートをBoxフォルダに適用します。必ずカスケードポリシーを有効にするようにしてください。詳細な手順については、[テンプレートのカスタマイズと適用の手順][apply-templates]を参照してください。

<Note>
  メタデータテンプレートは、ファイルにも適用できます。
</Note>

### 表示名と主なパラメータ

* `displayName`パラメータは、管理コンソールに表示されるテンプレートの表示名です。
* `templateKey`パラメータは、テンプレートの一意の識別子です。これは、メタデータテンプレート作成の対象となる企業全体で一意である必要があります。`templateKey`パラメータを指定しなかった場合は、APIによって、`displayName`の値を基に一意の識別子が作成されます。
* `[fields].displayName`パラメータは、ウェブアプリおよびモバイルアプリでユーザーに表示されるフィールドの表示名です。
* `[fields].key`パラメータは、テンプレート内の特定のフィールドの一意の識別子です。この識別子は、そのフィールドが属するテンプレート内で一意である必要があります。

## メタデータビューの表示

次に、コンテンツエクスプローラに渡される必須のプロパティを入力します。作業を簡単にするために、基本的なReactアプリに基づいた[サンプルプロジェクト][metadata-project]を使用して、メタデータビューを起動できます。

1. メタデータのサンプルプロジェクトを複製します。

2. [`App.js`][appjs]内のプレースホルダを実際の値で更新します。

   | パラメータ                    | 説明                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
   | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
   | `DEVELOPER_TOKEN`        | 開発者コンソールで生成された<Link href="/guides/authentication/tokens/developer-tokens">開発者トークン</Link>。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
   | `ENTERPRISE_ID`          | Boxアプリケーションの \[**一般設定**] タブからコピーしたEnterprise ID。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
   | `METADATA_TEMPLATE_NAME` | 作成済みのメタデータテンプレートの`templateKey`。**注**: 適切な名前を指定済みであることを確認するには、<Link href="/guides/metadata/templates/get/#get-a-metadata-template-by-name">メタデータAPI</Link>を使用して名前を取得するか、管理コンソールでURLから名前をコピーします。<img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/embed/ui-elements/metadata-template-name.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=6e97a4db595636e965452ff3c0220b67" alt="管理コンソールにおけるメタデータ名" width="1416" height="632" data-path="images/guides/embed/ui-elements/metadata-template-name.png" /> UIでテンプレート名を変更しても、変更されるのは表示名のみです。コンポーネントで使用する名前は、常に最初に指定した名前になります。 |
   | `METADATA_SOURCE`        | <Link href="/guides/metadata/scopes">メタデータ</Link>のソース。これは、スコープ、Enterprise ID、メタデータキーを組み合わせた文字列です。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
   | `ROOTFOLDER_ID`          | メタデータクエリを適用してフィルタがかけられたファイルを表示するBoxフォルダのID。                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

   `defaultView`、`fieldsToShow`、`metadataQuery`の各パラメータは、すでにサンプルプロジェクトで定義されています。これらのパラメータの例は、サンプルプロジェクトで確認できます。

   | パラメータ           | 説明                                                                                                                                |
   | --------------- | --------------------------------------------------------------------------------------------------------------------------------- |
   | `defaultView`   | メタデータビューを描画するための必須プロパティ。指定されていない場合は、通常のファイルビューが表示されます。                                                                            |
   | `fieldsToShow`  | コンテンツエクスプローラに表示する特定のメタデータ列を追加または非表示にします。                                                                                          |
   | `metadataQuery` | ファイルやフォルダに設定されているメタデータを検索してそのファイルやフォルダを探す方法を指定します。メタデータクエリの詳細については、<Link href="/guides/metadata/queries">こちらのガイド</Link>を参照してください。 |

3. コンテンツエクスプローラコンポーネントに必須パラメータを渡します。

コンテンツエクスプローラのメタデータビューを含むReactコンポーネントのサンプルコードは次のようになります。

```js theme={null}
function App() {
    const token = "<DEVELOPER_TOKEN>";
    const rootFolderID = "<ROOTFOLDER_ID>";
    const EID = "<ENTERPRISE_ID>";
    const templateName = "<METADATA_TEMPLATE_NAME>";
    const metadataSource = `enterprise_${EID}.${templateName}`;
    const metadataSourceFieldName = `metadata.${metadataSource}`;
    const metadataQuery = {
    	from: metadataSource,
    	query: "key = :arg1",
    	query_params: { arg1: "value" },
    	ancestor_folder_id: 0,
    	fields: [
        `${metadataSourceFieldName}.name`,
        `${metadataSourceFieldName}.last_contacted_at`,
        `${metadataSourceFieldName}.industry`,
        `${metadataSourceFieldName}.role`,
        ],
    };

    const fieldsToShow = [
    // canEdit propetry determines if the user can edit the metadata directly from Content Explorer component
    { key: `${metadataSourceFieldName}.name`, canEdit: false },
    // displayName alows to change the label on metadata column
    { key: `${metadataSourceFieldName}.industry`, canEdit: false, displayName: "alias" },
    { key: `${metadataSourceFieldName}.last_contacted_at`, canEdit: true },
    { key: `${metadataSourceFieldName}.role`, canEdit: true },
    ];

const defaultView = "metadata";
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;
```

## メタデータキー

表示するフィールドを決定するには、コンテンツエクスプローラで、<Link href="/reference/post-metadata-templates-schema/#param-fields-displayName">表示名</Link>ではなく、メタデータの<Link href="/reference/post-metadata-templates-schema/#param-fields-key">フィールドキー</Link>を使用します。表示名は管理コンソールやユーザービューで確認できる一方、フィールドキーはAPIを使用して取得できます。

フィールドキーは、メタデータの表示名を変更した場合でも変わりません。これにより、UIビューでメタデータが変更されても、この機能は正常に動作します。

### メタデータキーのサニタイズ

<Link href="/reference/post-metadata-templates-schema/#param-fields-key">キー</Link>は、英数字のみに制限されています。

* ハイフン`-`とアンダースコア`_`は許可されていません。
* 許可されているのは文字 (`a-z, A-Z`) と数字 (`0-9`) のみです。

**ラテン語以外の文字:**

キーにラテン語以外のアルファベット (キリル文字、アラビア語、中国語など) が含まれている場合、それらは自動的に共通識別子に変更されます。

* 最初に出現した文字は`field`
* それ以降出現した文字は`field1`、`field2`と続く

キーは、表示名に基づいています。

<Note>
  **ヒント**: 詳細なフローについては、[メタデータビューに関するブログ記事][blogpost]を参照してください。
</Note>

[blogpost]: https://medium.com/box-developer-blog/metadata-view-in-box-content-explorer-4978e47e97e9

[creating-templates-ui]: https://support.box.com/hc/en-us/articles/360044194033-Customizing-Metadata-Templates

[appjs]: https://github.com/box-community/content-explorer-metadata/blob/main/src/App.js

[apply-templates]: https://support.box.com/hc/en-us/articles/360044196173-Using-Metadata

[metadata-project]: https://github.com/box-community/content-explorer-metadata/tree/main

[get-id]: /reference/get-metadata-templates-id-id-schema/

<RelatedLinks
  title="関連するAPI"
  items={[
{ label: translate("Get metadata template by ID"), href: "/reference/get-metadata-templates-id", badge: "GET" }
]}
/>

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("UI Elements"), href: "/guides/embed/ui-elements/index", badge: "GUIDE" }
]}
/>