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

# Platformアプリ

export const SignupCTA = ({children}) => {
  return <div className="flex flex-wrap items-center gap-4 p-5 rounded-lg border border-gray-200 dark:border-gray-700 my-6" style={{
    background: "linear-gradient(135deg, rgba(0, 97, 213, 0.06), rgba(0, 97, 213, 0.02))"
  }}>
      <div className="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300" style={{
    minWidth: "280px"
  }}>
        {children}
      </div>
      <div className="flex flex-col items-center gap-2">
        <a href="https://account.box.com/signup/developer#ty9l3" className="signup-cta-button inline-flex items-center whitespace-nowrap px-5 py-2 text-sm font-semibold text-white no-underline">
          {translate("Get started for free")}
        </a>
        <a href="https://account.box.com/developers/console" className="signup-cta-login text-xs text-gray-500 dark:text-gray-400 no-underline whitespace-nowrap">
          {translate("Already have an account? Log in")}
        </a>
      </div>
    </div>;
};

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>;
};

Platformアプリは、通常、カスタムインターフェースでBox機能をユーザーに表示します。Boxには、コンテンツの閲覧、検索、プレビューなどの機能のために、<Link href="/guides/embed/ui-elements">UI Elements</Link>と呼ばれる、組み込みのカスタマイズ可能なユーザーインターフェースコンポーネントが用意されています。

## 認証方法

Platformアプリでは、認証方法として<Link href="/guides/authentication/oauth2">OAuth 2.0</Link>、<Link href="/guides/authentication/jwt">JWT</Link>、および<Link href="/guides/authentication/client-credentials">クライアント資格情報許可</Link>がサポートされています。

<Card href={localizeLink("/guides/authentication/select")} arrow title="認証方法の詳細を確認する" />

## 使用するタイミング

以下の場合にPlatformアプリを使用します。

* 認証に<Link href="/guides/authentication/oauth2">OAuth 2.0</Link>、<Link href="/guides/authentication/jwt">JWT</Link>、または<Link href="/guides/authentication/client-credentials">クライアント資格情報許可</Link>を使用する
* ファイルをアップロードおよびダウンロードする
* 自分が所有するファイルにも、<Link href="/platform/user-types/#managed-users/">管理対象ユーザーまたは外部ユーザー</Link>が所有するファイルにもアクセスする
* Box統合にアプリケーションを掲載する
* Boxウェブアプリとの統合を可能にする

## ユースケース

ユースケースの例を以下に示します。

* アプリケーション内のファイル保存場所。これにより、エンドユーザーが自分と共有されているファイルにアクセスできると同時に、従業員にもBoxウェブアプリを介して同じファイルへのアクセス権限が提供されます。

  この一例として、ファイナンシャルアドバイザは、Platformアプリケーション内で閲覧またはコメントが可能な取引明細書や投資目論見書を投資家と共有します。

* アプリケーションのファイルアップロード機能。これにより、エンドユーザーは、独自に構築したアプリケーション内からBoxにファイルを送信したりアップロードしたりできます。その後、これらのアップロードにより、Boxウェブアプリを使用したビジネスプロセスが開始されます。

  この一例として、志願者が採用ポータルに送信した経歴書のPDFは、審査のため適切な従業員に転送されます。

<SignupCTA>
  無料のDeveloperアカウントを作成すると、開発者コンソールにアクセスして、お好みの認証方法を使用するPlatformアプリを作成できます。
</SignupCTA>

## 承認

Platformアプリは、使用前に承認が必要になる場合があります。

<Card href={localizeLink("/guides/authorization/platform-app-approval")} arrow title="Platformアプリの承認方法を確認する" />

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("OAuth 2.0 Auth"), href: "/guides/authentication/oauth2/index", badge: "GUIDE" },
{ label: translate("JWT Auth"), href: "/guides/authentication/jwt/index", badge: "GUIDE" },
{ label: translate("Client Credentials Grant"), href: "/guides/authentication/client-credentials/index", badge: "GUIDE" }
]}
/>
