> ## 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 Link = ({href, children, className, ...props}) => {
const localizedHref = localizeLink(href);
return
{children}
;
};
export const MultiRelatedLinks = ({sections = []}) => {
if (!sections || sections.length === 0) {
return null;
}
return
{sections.map((section, index) => )}
;
};
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 ;
};
ファイルはアプリケーションにアップロードされると、以下の2つの方法でプレビューすることができます。
* 直接埋め込み: カスタムの埋め込みリンクを使用した標準のHTML `
```
## カスタマイズされたプレビューアー (UI Element)
高度なプレビューのカスタマイズ機能やイベント処理機能を活用するには、Box UI Preview Elementを使用します。
このプレビューElementを設定するには、まず、必須コンポーネントをインストールします。
新しいプレビューアーを表示するためのJavaScriptコードを追加する際、基本的なコードは次のようになります。
```js theme={null}
var preview = new Box.Preview();
preview.show("FILE_ID", "ACCESS_TOKEN", {
container: ".preview-container",
showDownload: true
});
```
コードサンプル内のプレースホルダを以下の内容に置き換えてください。
* `FILE_ID`: アプリケーションにアップロードされたファイルのID。ファイルのアップロード時に返されるオブジェクトから取得できます。
* `ACCESS_TOKEN`: アプリケーションの構成時に設定されたプライマリアクセストークン、またはそのトークンのダウンスコープされたバージョン。
プライマリアクセストークンの高度な権限により、JavaScriptコードでは、ダウンスコープされたバージョンのトークンを使用することを強くお勧めします。ダウンスコープのベストプラクティスを参照してください。