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

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

このページでは、ファイルタイプごとのプレビュー機能について説明します。また、ビューアーの種類別にリッスンできるイベントのリストも示します。

## テキストビューアー

テキストビューアーでは、テキストファイルのプレビューがレンダリングされます。`py`や`rb`のようなコードファイルの場合は、構文のハイライトを追加するために[`highlight.js`](https://github.com/isagalaev/highlight.js)が使用されます。

### 動作

テキストビューアーには、ファイル内のテキストのうち最初の192KBが表示されます。その他のテキストは省略され、通知とダウンロードボタンがプレビューの最下部に追加されます。

ビューアーウィンドウのサイズを変更すると、使用可能なスペースに収まるようテキストの再流し込みが行われます。また、拡大ボタンと縮小ボタンにより、フォントサイズがそれぞれ縮小または拡大されます。

このビューアーでは印刷がサポートされており、`print()`が呼び出されるか印刷ボタンが押されると、適切な構文をハイライトした状態で印刷が行われます。サイズの大きなファイルを印刷すると、一部のブラウザでは数秒間動作が停止する場合があります。

### コントロール

* 拡大
* 縮小
* 全画面: Escキーを押すと終了可能

### サポートされているファイル拡張子

`as`, `as3as`, `asmas`, `batas`, `cas`, `ccas`, `cmakeas`, `cppas`, `csas`,
`cssas`, `cxxas`, `diffas`, `erbas`, `groovyas`, `has`, `hamlas`, `hhas`,
`htmas`, `htmlas`, `javaas`, `jsas`, `lessas`, `mas`, `makeas`, `mdas`, `mlas`,
`mmas`, `phpas`, `plas`, `plistas`, `propertiesas`, `pyas`, `rbas`, `rstas`,
`sassas`, `scalaas`, `scriptas`, `scmas`, `smlas`, `sqlas`, `shas`, `vias`,
`vimas`, `webdocas`, `xhtmlas`, `yaml`,

### イベント

テキストビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                                |
| -------------- | ------------------------ | ------------------------------------------------------ |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                        |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ              |
|                |                          | 2. `{object}` **`file`**: 現在のファイル                      |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報                  |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー                   |
| `notification` | 通知が表示されます。               |                                                        |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                                         |
| `reload`       | プレビューが再読み込みされます。         |                                                        |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ                   |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅                     |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `{number}` **`zoom`**: 新しい拡大/縮小値                    |
|                |                          | 2. `{boolean}` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能  |
|                |                          | 3. `{boolean}` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能 |
| `printsuccess` | 印刷が正常に開始されました。           |                                                        |

## 360度動画ビューアー

360度動画ビューアーでは、正距円筒図法を使用して保存された動画 (ほとんどの場合に360度カメラで撮影) のプレビューがレンダリングされます。

### 動作

このビューアーでは、360度動画がインタラクティブに表示されます。

### コントロール

* マウスの左ボタンで表示方向を変更します (タッチ対応デバイスでは1回タッチ)。

### VRボタン

WebVRをサポートするブラウザの使用時に、対応するVRデバイスがコンピュータに接続されると、VRボタンを使用して、VRモードの開始と終了を切り替えることができます。

### 制限

現在、このプレビューアーを使用するには、ファイルの名前を付ける際にファイル拡張子の前に`.360`を付ける必要があります。こうすることで、Preview SDKは、標準の動画プレビューではなく、このビューアーを実行することを認識します。

### サポートされているファイル拡張子

`360.3g2`, `360.3gp`, `360.avi`, `360.m2v`, `360.m2ts`, `360.m4v`, `360.mkv`,
`360.mov`, `360.mp4`, `360.mpeg`, `360.mpg`, `360.mts`, `360.qt`, `360.wmv`

### イベント

360度動画ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## SWFビューアー

SWFビューアーは、[`SWFObject`](https://github.com/swfobject/swfobject)を使用してSWFファイルを埋め込みます。

### 動作

ユーザーがAdobe Flash Playerプラグインを使用している場合、`SWFObject`はSWFファイルを埋め込み、このプラグインで関連するコンテンツをレンダリングできるようにします。

Flashコンテンツによるネットワークリクエストはすべて、セキュリティの制約によってブロックされるため、ネットワーク接続を必要とするコンテンツはレンダリングされないことに注意してください。

### サポートされているファイル拡張子

* `swf`

### イベント

SWFビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## プレゼンテーションビューアー

プレゼンテーションビューアーでは、PowerPointファイルのプレビューがレンダリングされます。

### 動作

プレゼンテーションビューアーには、プレビューを閉じるときに表示していたスライドが記憶されます。次回そのファイルを開くと、すぐにそのスライドが表示されます。マウスで上下にスクロールするか、モバイルデバイスで上下にスワイプすると、スライド間を移動します。ビューアーを拡大または縮小すると、スライドのサイズもそれぞれ拡大または縮小されます。ズームレベルが原因でコンテンツがはみ出す場合は、マウスをスクロールすると、スライドをスクロールできます。通常のスクロール動作に戻すには、はみ出さなくなるまで縮小する必要があります。

### コントロール

* 拡大
* 縮小
* ページの設定: 上矢印と下矢印を使用するか、ページ番号をクリックしてテキストを入力します。
* 全画面: Escキーを押すと終了可能

### サポートされているファイル拡張子

`ppt`, `pptx`, `odp`

### オプション

| オプション         | 型       | 説明                                      |
| ------------- | ------- | --------------------------------------- |
| `annotations` | boolean | 省略可。コンテンツの注釈を表示するかどうか。デフォルト値は`false`です。 |

### イベント

プレゼンテーションビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                               |
| -------------- | ------------------------ | ----------------------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                       |
| `load`         | プレビューが読み込まれます。           | 1. `string` **`error`** (省略可): エラーメッセージ               |
|                |                          | 2. `object` **`file`**: 現在のファイル                       |
|                |                          | 3. `object` **`metrics`**: ロガーからの情報                   |
|                |                          | 4. `object` **`viewer`**: 現在のビューアー                    |
| `notification` | 通知が表示されます。               |                                                       |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `object`ファイル                                          |
| `reload`       | プレビューが再読み込みされます。         |                                                       |
| `resize`       | プレビューのサイズが変更されます。        | 1. `number` **`height`**: ウィンドウの高さ                    |
|                |                          | 2. `number` **`width`**: ウィンドウの幅                      |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `number` **`zoom`**: 新しい拡大/縮小値                     |
|                |                          | 2. `boolean` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能   |
|                |                          | 3. `boolean` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能  |
| `pagerender`   | ページがレンダリングされます。          | `number` レンダリングされたページのページ番号                           |
| `pagefocus`    | ページが表示可能です。              | `number` フォーカスされたページのページ番号                            |
| `scrollstart`  | ビューアーでスクロールを開始します。       | 1. `number` **`scrollTop`**: ビューポートの上部からスクロールしたピクセル数  |
|                |                          | 2. `number` **`scrollLeft`**: ビューポートの左側からスクロールしたピクセル数 |
| `scrollend`    | ビューアーでスクロールを停止します。       | 1. `number` **`scrollTop`**: ビューポートの上部からスクロールしたピクセル数  |
|                |                          | 2. `number` **`scrollLeft`**: ビューポートの左側からスクロールしたピクセル数 |

## MP4ビューアー

MP4ビューアーでは、動画ファイルのプレビューがレンダリングされます。

### 動作

MP4ビューアーは、黒い背景を使用して見やすくしています。音量は、音量アイコンをクリックしてミュートまたはミュート解除したり、音量スクラバをドラッグして変更したりできます。動画の位置は、再生スクラバをクリックまたはドラッグして変更できます。

### コントロール

* 再生/一時停止
* 音量
* 設定
* 全画面 (Escキーを押すと終了可能)

### 設定

設定は、プレビューツールバーにある歯車アイコンから使用できます。

* 動画速度の値: `0.25`、`0.5`、標準 (`1`)、`1.25`、`1.5`、`2.0`

### サポートされているファイル拡張子

`3g2`, `3gp`, `avi`, `m2v`, `m2ts`, `m4v`, `mkv`, `mov`, `mp4`, `mpeg`, `mpg`,
`ogg`, `mts`, `qt`, `wmv`

### イベント

MP4ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                 |
| -------------- | ------------------------ | --------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                         |
| `load`         | プレビューが読み込まれます。           | 1. `string` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `object` **`file`**: 現在のファイル         |
|                |                          | 3. `object` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `object` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                         |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `object`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                         |
| `resize`       | プレビューのサイズが変更されます。        | 1. `number` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `number` **`width`**: ウィンドウの幅        |
| `speedchange`  | メディアの速度が変更されます。          | `string` 再生速度                           |
| `play`         | 動画が再生されます。               |                                         |
| `pause`        | 動画が一時停止されます。             |                                         |
| `seek`         | 動画は任意の時点までスキップします。       | `number` 時刻                             |

## MP3ビューアー

MP3ビューアーでは、オーディオファイルのプレビューが表示されます。

### 動作

音量は、音量アイコンをクリックしてミュートまたはミュート解除したり、音量スクラバをドラッグして変更したりできます。音声の位置は、再生スクラバをクリックまたはドラッグして変更できます。

### コントロール

* 再生/一時停止
* 音量
* 設定

### 設定

設定は、プレビューツールバーにある歯車アイコンから使用できます。

* 音声速度: `0.25`、`0.5`、標準 (`1`)、`1.25`、`1.5`、`2.0`

### サポートされているファイル拡張子

`aac`, `aif`, `aifc`, `aiff`, `amr`, `au`, `flac`, `m4a`, `mp3`, `ra`, `wav`, `wma`

### イベント

MP3ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                 |
| -------------- | ------------------------ | --------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                         |
| `load`         | プレビューが読み込まれます。           | 1. `string` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `object` **`file`**: 現在のファイル         |
|                |                          | 3. `object` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `object` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                         |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `object`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                         |
| `resize`       | プレビューのサイズが変更されます。        | 1. `number` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `number` **`width`**: ウィンドウの幅        |
| `speedchange`  | メディアの速度が変更されます。          | `string` 再生速度                           |
| `play`         | 動画が再生されます。               |                                         |
| `pause`        | 動画が一時停止されます。             |                                         |
| `seek`         | 動画は任意の時点までスキップします。       | `number` 時刻                             |

## Officeビューアー

Officeビューアーでは、MicrosoftのOffice Onlineビューアーの`<iframe>`を埋め込むことで、Microsoft Officeドキュメントのプレビューをレンダリングします。

### 動作

現在、Officeビューアーでは、Boxウェブアプリ内からMicrosoft Office Onlineを使用したExcelファイルのプレビューがサポートされています。プラットフォームのユースケースおよび他のOfficeファイル形式のサポートは開発中です。

現時点では、次のように、いくつかの制限があります。

* ファイルはダウンロード可能にする必要があります。
* ファイルのサイズは5 MB未満にする必要があります。
* ファイルは、パスワード付きのBox共有リンクで共有できません (パスワードのない共有リンクは問題ありません)。

### サポートされているファイル拡張子

`xlsx`

### イベント

Officeビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## Markdownビューアー

Markdownビューアーでは、[`Remarkable`](https://github.com/jonschlinkert/remarkable)を使用してマークダウンファイルと[`highlight.js`](https://github.com/isagalaev/highlight.js)を解析し、ビューアーに表示されるコードブロックに構文のハイライトを追加します。

### 動作

Markdownビューアーでは、ファイル内の未加工のマークダウンのうち最初の192KBを解析し、GitHubのMarkdownスタイルを使用してレンダリングします。その他のコンテンツは省略され、ダウンロードボタンとともに通知がプレビューの最下部に追加されます。

このビューアーは、テーブル、構文のハイライト、自動URLリンクなど、[GitHub Flavored Markdown](https://guides.github.com/features/mastering-markdown/)をサポートします。

ビューアーウィンドウのサイズを変更すると、使用可能なスペースに収まるようマークダウンの再流し込みが行われます。また、このビューアーでは印刷がサポートされており、解析されたマークダウンが印刷されます。さらに、`print()`が呼び出されるか印刷ボタンが押されると、コード上で構文がハイライトされます。サイズの大きなファイルを印刷すると、一部のブラウザでは数秒間動作が停止する場合があります。

### コントロール

* 全画面 (Escキーを押すと終了可能)

### サポートされているファイル拡張子

`md`

### イベント

Markdownビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |
| `printsuccess` | 印刷が正常に開始されました。           |                                           |

## `Model3D`ビューアー

`Model3D`ビューアーでは、3Dモデルファイルのプレビューがレンダリングされるほか、各種レンダリングモードを有効にして、ワイヤフレームやテクスチャ座標など、モデルのさまざまな側面を調査できます。また、アニメーションデータは、それを含むファイル (`box3d`、`fbx`、`dae`など) でサポートされています。

### 動作

`Model3D`ビューアーでは、モデルがインタラクティブに表示されます。マウスの左ボタンを使用すると、モデルを回転させることができます (タッチ対応デバイスでは1回タッチ)。モデルの任意の場所をクリックすると、軌道のフォーカスを変更できます。

### コントロール

* マウスホイールを使用 (またはタッチ対応デバイスの場合は2本指でスクロール) して拡大/縮小 (モデルまでの距離を変更)。
* マウスの右ボタンを使用 (またはタッチ対応デバイスの場合は3本指でスワイプ) して平行移動 (横方向の移動)。
* アニメーションの選択: 表示中のモデルにアニメーションが含まれている場合、ツールバーには2つのアニメーションボタンが表示されます。1つはアニメーションを再生/一時停止できるボタン、もう1つは現在のアニメーションを選択できるボタンです。
* VRボタン: WebVRをサポートするブラウザを使用していて、対応するVRデバイスがコンピュータに接続された場合、VRボタンを使用すると、VRモードの開始と終了を切り替えることができます。

### 設定

設定は、プレビューツールバーにある歯車アイコンから使用できます。

* レンダリングモード: ライティングあり、ライティングなし、標準、シェイプ、UVオーバーレイ
* ワイヤフレームの切り替え
* スケルトンの切り替え
* カメラ投影: 透視投影、平行投影
* レンダリング品質: 自動、詳細
* モデルの回転: X、Y、Z

## `Box3D`パッケージ

プレビューを使用すると、ユーザーはBox内に1つのファイルを表示できるため、デフォルトでは、モデルでテクスチャを表示できません。ただし、Boxウェブアプリを使用すると、ユーザーは、Box3Dパッケージを作成できます。このパッケージでは、依存するすべてのファイルが、共有およびプレビュー可能な1つファイルに統合されます。このパッケージを作成するには、Box内でモデルファイルを右クリックし、\[3Dパッケージの作成] を選択します。Box内にある参照ファイルはすべて、作成されるパッケージに含まれます。

### サポートされているファイル拡張子

`box3d`, `fbx`, `dae`, `3ds`, `obj`, `stl`, `ply`

### イベント

`Model3D`ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## 360度画像ビューアー

360度画像ビューアーでは、正距円筒図法を使用して保存された画像 (ほとんどの場合に360度カメラで撮影) のプレビューがレンダリングされます。

### 動作

このビューアーでは、360度画像がインタラクティブに表示されます。まず、低解像度バージョンの画像が読み込まれ、フル解像度の画像の読み込みが終了するまで簡易表示されます。マウスの左ボタンでクリックしてドラッグすると、表示方向が変更されます (タッチ対応デバイスでは1回タッチしてドラッグ)。

### コントロール

* 全画面 (Escキーを押すと終了可能)
* VRボタン: WebVRをサポートするブラウザの使用時に、対応するVRデバイスがコンピュータに接続されると、VRボタンを使用して、VRモードの開始と終了を切り替えることができます。

### 制限

現在、このプレビューアーを使用するには、ファイルの名前を付ける際にファイル拡張子の前に「.360」を付ける必要があります。こうすることで、Preview SDKは、標準の画像ビューアーではなく、このビューアーを実行することを認識します。

### サポートされているファイル拡張子

`360.jpg`, `360.jpeg`, `360.png`, `360.ai`, `360.bmp`, `360.dcm`, `360.eps`,
`360.gif`, `360.ps`, `360.psd`, `360.svg`, `360.svs`, `360.tga`, `360.tif`,
`360.tiff`

### イベント

360度画像ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## 画像ビューアー

画像ビューアーでは、画像ファイルのプレビューがレンダリングされます。

### 動作

ビューアーを回転させると、画像が右へ90度回転します。デフォルトのズームレベルでは、画像をクリックすると1回拡大されます。拡大されたドキュメントをクリックすると、デフォルトのズームレベルに戻ります。縮小されたドキュメントをクリックすると、元のズームレベルになるまで拡大されます。

### コントロール

* 拡大
* 縮小
* 回転
* 全画面: Escキーを押すと終了可能

### サポートされているファイル拡張子

`ai`, `bmp`, `dcm`, `eps`, `idml`, `indt`, `indd`, `inx`, `gif`, `png`, `ps`,
`psd`, `svs`, `tga`

### オプション

| オプション         | 型       | 説明                                      |
| ------------- | ------- | --------------------------------------- |
| `annotations` | boolean | 省略可。コンテンツの注釈を表示するかどうか。デフォルト値は`false`です。 |

### イベント

画像ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                                |
| -------------- | ------------------------ | ------------------------------------------------------ |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                        |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ              |
|                |                          | 2. `{object}` **`file`**: 現在のファイル                      |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報                  |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー                   |
| `notification` | 通知が表示されます。               |                                                        |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                                         |
| `reload`       | プレビューが再読み込みされます。         |                                                        |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ                   |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅                     |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `{number}` **`zoom`**: 新しい拡大/縮小値                    |
|                |                          | 2. `{boolean}` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能  |
|                |                          | 3. `{boolean}` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能 |
| `pan`          | プレビューが平行移動します。           |                                                        |
| `panstart`     | 平行移動が開始されます。             |                                                        |
| `panend`       | 平行移動が終了します。              |                                                        |
| `rotate`       | 画像が回転します。                |                                                        |
| `printsuccess` | 印刷が正常に開始されました。           |                                                        |

## 複数画像ビューアー

複数画像ビューアーでは、複数画像のファイル (`tiff`、`tif`) のプレビューがレンダリングされます。

### 動作

デフォルトのズームレベルでは、画像をクリックすると1回拡大されます。拡大されたドキュメントをクリックすると、デフォルトのズームレベルに戻ります。縮小されたドキュメントをクリックすると、元のズームレベルになるまで拡大されます。

### コントロール

* 拡大
* 縮小
* 全画面: Escキーを押すと終了可能
* ページの設定: 上矢印と下矢印を使用するか、ページ番号をクリックしてテキストを入力します。

### サポートされているファイル拡張子

`tif`, `tiff`

### オプション

| オプション         | 型       | 説明                                      |
| ------------- | ------- | --------------------------------------- |
| `annotations` | boolean | 省略可。コンテンツの注釈を表示するかどうか。デフォルト値は`false`です。 |

### イベント

画像ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                                |
| -------------- | ------------------------ | ------------------------------------------------------ |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                        |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ              |
|                |                          | 2. `{object}` **`file`**: 現在のファイル                      |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報                  |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー                   |
| `notification` | 通知が表示されます。               |                                                        |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                                         |
| `reload`       | プレビューが再読み込みされます。         |                                                        |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ                   |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅                     |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `{number}` **`zoom`**: 新しい拡大/縮小値                    |
|                |                          | 2. `{boolean}` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能  |
|                |                          | 3. `{boolean}` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能 |
| `pagefocus`    | ページが表示可能です。              | `{number}` フォーカスされたページのページ番号                           |
| `pan`          | プレビューが平行移動します。           |                                                        |
| `panstart`     | 平行移動が開始されます。             |                                                        |
| `panend`       | 平行移動が終了します。              |                                                        |

### メソッド

複数ページの画像ビューアーでは以下のメソッドを使用できます。

| メソッド名              | 説明             | メソッドのパラメータ                       |
| ------------------ | -------------- | -------------------------------- |
| `zoom`             | 画像を拡大/縮小します。   | `{string}` 「in」、「out」、または「reset」 |
| `previousPage`     | 前のページに移動します。   |                                  |
| `nextPage`         | 次のページに移動します。   |                                  |
| `setPage`          | 指定したページに移動します。 | `{number}` ページ番号                 |
| `toggleFullscreen` | 全画面モードを切り替えます。 |                                  |

## ドキュメントビューアー

ドキュメントビューアーでは、さまざまなドキュメントタイプのプレビューがレンダリングされます。

### 動作

ドキュメントビューアーには、プレビューを閉じるときに表示していたページが記憶されます。次回そのファイルを開くと、すぐにそのページが表示されます。ビューアーウィンドウのサイズを変更すると、ドキュメントのサイズが変更されます。

### コントロール

* 拡大
* 縮小
* ページの設定: 上矢印と下矢印を使用するか、ページ番号をクリックしてテキストを入力します。
* 全画面 (Escキーを押すと終了可能)

### サポートされているファイル拡張子

`as`, `as3`, `asm`, `bat`, `c`, `cc`, `cmake`, `cpp`, `cs`, `css`, `csv`, `cxx`,
`diff`, `doc`, `docx`, `erb`, `gdoc`, `groovy`, `gsheet`, `h`, `haml`, `hh`,
`htm`, `html`, `java`, `js`, `less`, `log`, `m`, `make`, `md`, `ml`, `mm`,
`msg`, `odp`, `ods`, `odt`, `pdf`, `php`, `pl`, `plist`, `ppt`, `pptx`,
`properties`, `py`, `rb`, `rst`, `rtf`, `sass`, `scala`, `scm`, `script`, `sh`,
`sml`, `sql`, `tsv`, `txt`, `vi`, `vim`, `webdoc`, `wpd`, `xhtml`, `xls`,
`xlsm`, `xlsx`, `xml`, `xsd`, `xsl`, `yaml`

### オプション

| オプション         | 型       | 説明                                      |
| ------------- | ------- | --------------------------------------- |
| `annotations` | boolean | 省略可。コンテンツの注釈を表示するかどうか。デフォルト値は`false`です。 |

### イベント

ドキュメントビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                                 |
| -------------- | ------------------------ | ------------------------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                         |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ               |
|                |                          | 2. `{object}` **`file`**: 現在のファイル                       |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報                   |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー                    |
| `notification` | 通知が表示されます。               |                                                         |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                                          |
| `reload`       | プレビューが再読み込みされます。         |                                                         |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ                    |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅                      |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `{number}` **`newScale`**: 新しい拡大/縮小値                 |
|                |                          | 2. `{boolean}` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能   |
|                |                          | 3. `{boolean}` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能  |
| `pagerender`   | ページがレンダリングされます。          | `{number}` レンダリングされたページのページ番号                           |
| `pagefocus`    | ページが表示可能です。              | `{number}` フォーカスされたページのページ番号                            |
| `scrollstart`  | ビューアーでスクロールを開始します。       | 1. `{number}` **`scrollTop`**: ビューポートの上部からスクロールしたピクセル数  |
|                |                          | 2. `{number}` **`scrollLeft`**: ビューポートの左側からスクロールしたピクセル数 |
| `scrollend`    | ビューアーでスクロールを停止します。       | 1. `{number}` **`scrollTop`**: ビューポートの上部からスクロールしたピクセル数  |
|                |                          | 2. `{number}` **`scrollLeft`**: ビューポートの左側からスクロールしたピクセル数 |
| `printsuccess` | 印刷が正常に開始されました。           |                                                         |
| `printsuccess` | 印刷に失敗しました。               |                                                         |

### 注釈

| イベント名                      | 説明                                                                                 | イベントデータ |
| -------------------------- | ---------------------------------------------------------------------------------- | ------- |
| `annotationdraw`           | テキストがハイライトされます。                                                                    |         |
| `annotationcommentpending` | ユーザーは、保留中のコメントが表示されているダイアログに戻ります。                                                  |         |
| `annotationcreate`         | 注釈の作成                                                                              |         |
| `annotationcancel`         | 注釈が開始されましたが、作成前に破棄されました。                                                           |         |
| `annotationdelete`         | `AnnotationID`が指定されている注釈が削除されます。IDが指定されていない場合は、スレッド内にある最初の (かつ残っている唯一の) 注釈が削除されます。 |         |

## `<iframe>`ビューアー

`<iframe>`ビューアーは、外部ソースからレンダリングされたコンテンツを表示するためのフレームを埋め込みます。

### 動作

`<iframe>`ビューアーは、Box Notesのプレビューに使用されます。

Box Notesは、メインのBoxウェブアプリ内にフル機能搭載のビューアーを備えています。ただし、このようなフル機能搭載のビューアーは、Notesのファイルと同じディレクトリ内にある他のファイルのプレビューから移動しても初期化されません。この場合、`<iframe>`ビューアーは、Box Noteファイルの表示専用のレンダリング機能を埋め込みます。

### サポートされているファイル拡張子

`boxnote`

### イベント

`<iframe>`ビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                   |
| -------------- | ------------------------ | ----------------------------------------- |
| `destroy`      | プレビューは意図的に破棄されます。        |                                           |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                |                          | 2. `{object}` **`file`**: 現在のファイル         |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification` | 通知が表示されます。               |                                           |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                            |
| `reload`       | プレビューが再読み込みされます。         |                                           |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅        |

## DASHビューアー

DASHビューアーでは、[`Shaka Player`][shaka]を使用して、動画ファイルのプレビューがレンダリングされます。

### 動作

DASHビューアーは、黒い背景を使用して、より自然な表示を実現しています。動画は、自動的に決まる初期の品質で、数バイトのチャンクに分割されてストリーミングされます。音量は、音量アイコンをクリックしてミュートまたはミュート解除したり、音量スクラバをドラッグして変更したりできます。動画の位置は、再生スクラバをクリックまたはドラッグして変更できます。

### コントロール

* 再生/一時停止
* 音量
* 設定
* 全画面 (Escキーを押すと終了可能)

### 設定

設定は、プレビューツールバーにある歯車アイコンから使用できます。

* 動画速度: `0.25`、`0.5`、標準 (`1`)、`1.25`、`1.5`、`2.0`
* 動画品質: `480p`、`1080p`、`auto`

### サポートされているファイル拡張子

`3g2`, `3gp`, `avi`, `m2v`, `m2ts`, `m4v`, `mkv`, `mov`, `mp4`, `mpeg`, `mpg`,
`ogg`, `mts`, `qt`, `wmv`

### イベント

DASHビューアーでは、以下のイベントがトリガーされます。

| イベント名              | 説明                              | イベントデータ                                   |
| ------------------ | ------------------------------- | ----------------------------------------- |
| `destroy`          | プレビューは意図的に破棄されます。               |                                           |
| `load`             | プレビューが読み込まれます。                  | 1. `{string}` **`error`** (省略可): エラーメッセージ |
|                    |                                 | 2. `{object}` **`file`**: 現在のファイル         |
|                    |                                 | 3. `{object}` **`metrics`**: ロガーからの情報     |
|                    |                                 | 4. `{object}` **`viewer`**: 現在のビューアー      |
| `notification`     | 通知が表示されます。                      |                                           |
| `navigate`         | 指定したインデックスのプレビューが表示されます。        | `{object}`ファイル                            |
| `reload`           | プレビューが再読み込みされます。                |                                           |
| `resize`           | プレビューのサイズが変更されます。               | 1. `{number}` **`height`**: ウィンドウの高さ      |
|                    |                                 | 2. `{number}` **`width`**: ウィンドウの幅        |
| `speedchange`      | メディアの速度が変更されます。                 | `{string}` 再生速度                           |
| `qualitychange`    | 動画品質が変更されます。                    | `{string}` メディア品質                         |
| `bandwidthhistory` | プレビューが破棄されたときに、帯域幅の履歴を提供します。    | `{array}` 帯域幅情報                           |
| `switchhistory`    | プレビューが破棄されたときに、品質の切り替え履歴を提供します。 | `{array}` 品質切り替えオブジェクト                    |
| `adaptation`       | 品質が帯域幅の変更に適合されます。               | `{number}` 帯域幅                            |
| `play`             | 動画が再生されます。                      |                                           |
| `pause`            | 動画が一時停止されます。                    |                                           |
| `seek`             | 動画は任意の時点までスキップします。              | `{number}` 時刻                             |

## CSVビューアー

CSVビューアーでは、[`PapaParse`](https://github.com/mholt/PapaParse)を使用してCSVおよびTSVファイルを解析し、[`React Virtualized`][reactv]を使用して解析後のデータを表形式で表示します。

### 動作

ビューアーウィンドウのサイズを変更すると、表のサイズが変更されます。拡大ボタンと縮小ボタンにより、フォントサイズがそれぞれ縮小または拡大されます。現在、列と行のサイズは固定されているため、はみ出すテキストは省略されます。

このビューアーは、印刷をサポートしていません。

### コントロール

* 拡大
* 縮小
* 全画面 (Escキーを押すと終了可能)

### サポートされているファイル拡張子

`csv`, `tsv`

### イベント

CSVビューアーでは、以下のイベントがトリガーされます。

| イベント名          | 説明                       | イベントデータ                                                |
| -------------- | ------------------------ | ------------------------------------------------------ |
| `destroy`      | プレビューは意図的に破棄されます。        |                                                        |
| `load`         | プレビューが読み込まれます。           | 1. `{string}` **`error`** (省略可): エラーメッセージ              |
|                |                          | 2. `{object}` **`file`**: 現在のファイル                      |
|                |                          | 3. `{object}` **`metrics`**: ロガーからの情報                  |
|                |                          | 4. `{object}` **`viewer`**: 現在のビューアー                   |
| `notification` | 通知が表示されます。               |                                                        |
| `navigate`     | 指定したインデックスのプレビューが表示されます。 | `{object}`ファイル                                         |
| `reload`       | プレビューが再読み込みされます。         |                                                        |
| `resize`       | プレビューのサイズが変更されます。        | 1. `{number}` **`height`**: ウィンドウの高さ                   |
|                |                          | 2. `{number}` **`width`**: ウィンドウの幅                     |
| `zoom`         | プレビューが拡大または縮小されます。       | 1. `{number}` **`zoom`**: 新しい拡大/縮小値                    |
|                |                          | 2. `{boolean}` **`canZoomIn`**: trueにするとビューアーをさらに拡大可能  |
|                |                          | 3. `{boolean}` **`canZoomOut`**: trueにするとビューアーをさらに縮小可能 |

[reactv]: https://github.com/bvaughn/react-virtualized

[shaka]: https://github.com/google/shaka-player

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