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

# Box View

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

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

Box Viewは、開発者が自分のウェブアプリやモバイルアプリで、忠実度の高いインタラクティブなファイルビューアーを使用してファイルをアップロード、変換、および表示できるようにする、埋め込み可能なサービスです。

## 機能

### 任意のファイルの表示

標準の`<iframe>`を使用して、ドキュメント、画像、動画、360度動画および画像、3Dモデル、その他の多くのファイルを任意のウェブアプリまたはモバイルアプリに埋め込みます。

### 使いやすさ

セキュアなAPIを介してBoxにファイルをアップロードすると、アプリケーションのUIに埋め込み可能なHTML5スニペットが配置されます。

### 状況に応じたコラボレーション

エンドユーザーが注釈を使用して、ドキュメント、プレゼンテーション、および画像のコラボレーションやマークアップを実行できるようにします。ユーザーは、テキストをハイライトしたり、ファイルレンダリングの特定の領域にコメントを付けたりできます。

## Box Viewのしくみ

1. <Link href="/reference/post-files-content">セキュアなアップロードAPI</Link>を使用してBoxにファイルをアップロードします。コンテンツはすべて、ウイルススキャンと256ビット暗号化を備えたBoxのセキュアなクラウドストレージインフラストラクチャに保存されます。
2. アップロード時に、ファイルはHTML5互換のアセットに変換されます。これらのアセットは、明瞭にすばやくレンダリングするよう作られています。
3. ファイルレンダリングにアクセスするために埋め込み可能なURLがリクエストされます。プレビューは、`<iframe>` URLを使用してアプリケーションに直接埋め込むことができます。

<Frame border center shadow>
  <img src="https://mintcdn.com/box/_tECS-SYBYV9K-kZ/images/guides/embed/box-view/box-view-flow.png?fit=max&auto=format&n=_tECS-SYBYV9K-kZ&q=85&s=18ba1d242f6a91dbc48e171dfa3b3f76" alt="Box Viewのフロー" width="3000" height="950" data-path="images/guides/embed/box-view/box-view-flow.png" />
</Frame>

## Box Content Previewによる操作のカスタマイズ

<Link href="/guides/embed/ui-elements/preview">Box Content Preview</Link>を使用すると、変換されたファイルに対するクライアント側の操作をカスタマイズできます。

## ユースケース

* 求人アプリケーションで履歴書PDFを変換して表示する
* 学生用ポータルで、ドキュメント、動画、PDFなどの教材を変換して表示する
* メディアルームでHD動画を変換して表示する
* 現場の営業支援アプリケーションで、ドキュメント、動画、PDF、3Dモデルなどの営業資料を変換して表示する

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("Setup"), href: "/guides/embed/box-view/setup", badge: "GUIDE" },
{ label: translate("FAQ"), href: "/guides/embed/box-view/faq", badge: "GUIDE" }
]}
/>
