# General Translation Integrations: Replayer API
URL: https://generaltranslation.com/ja/docs/integrations/rrweb/reference/replayer.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: ローカライズされたテキストオーバーレイと再生コントロールでrrwebバンドルを再生します。gt-rrweb replayerのAPIリファレンス。

`gt-rrweb/replay`からreplayerの値をインポートします。このエントリポイントはReactラッパーをエクスポートし、`createGTReplayer`のみを使用する場合でも、React、React DOM 18以降、および`@rrweb/types`が必要です。DOMプレーヤーには、任意のピア依存関係である`@rrweb/replay`も必要です。

## 概要 [#overview]

| API                                       | 説明                                |
| ----------------------------------------- | --------------------------------- |
| [`createGTReplayer`](#create-gt-replayer) | DOM 要素にプレーヤーをマウントします。             |
| [`GTReplayer`](#gt-replayer)              | `createGTReplayer` 用の React ラッパー。 |
| [`GTReplayerProps`](#replayer-props)      | `GTReplayer` が受け取る props。         |
| [`GTReplayerBundle`](#replayer-bundle)    | イベントストリームと任意のロケールデータ。             |
| [`GTReplayerOptions`](#replayer-options)  | 初期ロケール、切り替え、デバッグのオプション。           |
| [`GTReplayerHandle`](#replayer-handle)    | マウントされたプレーヤーを破棄します。               |

## `createGTReplayer` [#create-gt-replayer]

```ts
function createGTReplayer(
  container: HTMLElement,
  bundle: GTReplayerBundle,
  options?: GTReplayerOptions
): GTReplayerHandle;
```

この関数はスタンドアロンのプレーヤーをマウントして再生を開始します。レターボックス表示のステージ、クリックベースのカーソル、スクラバー、ライト／ダークテーマの切り替え、全画面表示コントロール、およびバンドルが対応している場合はロケール切り替えを備えています。

コンテナのサイズは親要素で指定してください。コンテナを削除または再利用する前に、`destroy()` を呼び出してください。

イベントが2つ未満のバンドルの場合、プレーヤー内にエラーが表示され、`destroy()` メソッドが安全に何も行わないハンドルが返されます。

## `GTReplayer` [#gt-replayer]

`GTReplayer` は、`createGTReplayer` を React 管理下のコンテナにマウントし、アンマウント時に破棄します。`bundle`、`initialLocale`、`switchLocalesAllowed`、`debug` のいずれかが変更されると、プレーヤーを再作成します。

## `GTReplayerProps` [#replayer-props]

| Prop                   | 説明                              | 型                  | 任意  | デフォルト               |
| ---------------------- | ------------------------------- | ------------------ | --- | ------------------- |
| `bundle`               | 再生する録画データ。                      | `GTReplayerBundle` | いいえ | —                   |
| `initialLocale`        | マウント時にレンダリングするロケール。             | `string`           | はい  | `bundle.locales[0]` |
| `switchLocalesAllowed` | ロケールのコントロールを表示し、実行中の切り替えを許可します。 | `boolean`          | はい  | `true`              |
| `debug`                | ドロップした録画 JSON ファイルを受け入れます。      | `boolean`          | はい  | `false`             |
| `className`            | ホストコンテナに適用するクラス。                | `string`           | はい  | —                   |
| `style`                | ホストコンテナに適用するインラインスタイル。          | `CSSProperties`    | はい  | —                   |

## `GTReplayerBundle` [#replayer-bundle]

| フィールド     | 説明                              | 型                | 任意  | デフォルト |
| --------- | ------------------------------- | ------------------- | --- | ------- |
| `events`  | rrweb イベントストリーム。                | `eventWithTime[]`   | いいえ | —       |
| `locales` | ソースロケールを先頭にした利用可能なロケール。         | `readonly string[]` | はい  | —       |
| `overlay` | ロケールと rrweb ノード ID のテキストマップの対応。 | `LocaleTextOverlay` | はい  | —       |

イベントのみで構成される生のバンドルは、記録時のソースロケールで再生されます。`gt-rrweb` が出力するイベントには、ストリーム内にロケールとオーバーレイのメタデータを含めることもできます。

## `GTReplayerOptions` [#replayer-options]

| オプション                  | 説明                                             | 型         | 任意 | デフォルト   |
| ---------------------- | ---------------------------------------------- | --------- | -- | ------- |
| `initialLocale`        | マウント時に表示するロケール。バンドル に含まれていない場合は無視されます。       | `string`  | はい | ソースロケール |
| `switchLocalesAllowed` | プレーヤー内のロケール切り替えを有効にします。                        | `boolean` | はい | `true`  |
| `debug`                | ローカルで確認するための、ドラッグ＆ドロップによる バンドル の置き換えを有効にします。 | `boolean` | はい | `false` |

ロケールを変更すると、再生を再構築せずにテキストがインプレースで置き換えられます。無効なファイルをドロップすると、プレーヤー内に通知が表示されます。

## `GTReplayerHandle` [#replayer-handle]

`GTReplayerHandle` は `destroy(): void` という1つのメソッドを公開します。このメソッドは、プレーヤーとそのリスナーをコンテナから削除します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.