> ## 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.

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

export const ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

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

<ProgressBar
  pages={[
                    "guides/search/quick-start/create-metadata-template",
                    "guides/search/quick-start/locate-template-info",
                    "guides/search/quick-start/apply-template-to-file",
                    "guides/search/quick-start/metadata-query-api",
                    "guides/search/quick-start/next-steps"
                  ]}
/>

新しいメタデータテンプレートを作成するには、管理コンソールを使用する方法とAPIで管理者のアクセストークンを使用する方法の2とおりあります。使用するメタデータテンプレートをすでに作成している場合は、次の手順に進むことができます。

## 管理コンソール

管理コンソールでテンプレートを作成するには、次の場所に移動します。

\[**管理コンソール**] > \[**コンテンツ**] タブ > \[**メタデータ**] > \[**新規作成**]

<Frame center>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/search/quick-start/create-template.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=dae1487e0f84e6337beef2fb1a53ae47" alt="メタデータテンプレートの作成" width="2723" height="900" data-path="images/guides/search/quick-start/create-template.png" />
</Frame>

<Warning>
  メタデータは、Business Plus以上のアカウント向けの機能です。アカウントをアップグレードするには、Boxアカウントチームまでお問い合わせください。
</Warning>

\[**新規作成**] を選択すると、以下に示す、新しいテンプレートを作成するためのフォームが表示されます。\[**ドロップダウン - 単一選択**] 形式を選択します。

<Warning>
  \[ドロップダウン - 複数選択] 形式を選択すると、このクイックスタートの後の手順でクエリの構造が変わります。
</Warning>

<Frame center>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/search/quick-start/template-form.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=bb21005ef68c386ce63f496ae203a0a4" alt="メタデータテンプレートフォーム" width="2344" height="1500" data-path="images/guides/search/quick-start/template-form.png" />
</Frame>

## API

APIを使用してメタデータテンプレートを作成するには、**会社のメタデータテンプレートを作成、編集する**権限を持つBox管理者または共同管理者に関連付けられた<Link href="/guides/authentication/tokens">アクセストークン</Link>が必要です。トークンが誰に関連付けられているかがわからない場合は、<Link href="/reference/get-users-me">現在のユーザーを取得エンドポイント</Link>に対してAPIコールを実行してください。これらの要件を満たすトークンを取得するには、管理者または共同管理者としてログインし、[開発者コンソール][dc]でアプリケーションを見つけて、\[**構成**] タブの \[**開発者トークンを生成**] をクリックする方法が最も簡単です。<Link href="/guides/authentication/tokens/developer-tokens">開発者トークン</Link>は、必ず、このボタンがクリックされたときに開発者コンソールにログインしているユーザーに関連付けられます。

[Postman][postman]および<Link href="/guides/tooling/postman">Box Postmanコレクション</Link>を使用している場合に、上記の管理コンソールを使用して作成したのと同じメタデータテンプレートを作成するAPIコールの例を以下に示します。

<Frame center>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/search/quick-start/create-call.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=ec4fb31963e4cc6f8b679501e8dd4561" alt="テンプレート作成のAPIコール" width="3329" height="1800" data-path="images/guides/search/quick-start/create-call.png" />
</Frame>

<Tip>
  \[ドロップダウン - 単一選択] 以外のテンプレート形式を使用する場合は、APIコールの本文が上記の例とは異なるため、Boxのリファレンスドキュメントを確認してください。
</Tip>

このAPIコールに対するレスポンスでは、後で必要になる重要な情報が示されます。UIを使用してテンプレートを作成した場合は、この情報の取得方法を次の手順で確認してください。

<Next>メタデータテンプレートを作成しました</Next>

[dc]: https://account.box.com/developers/console

[postman]: https://postman.com/