# General Translation Integrations: 記録の再生
URL: https://generaltranslation.com/ja/docs/integrations/rrweb/guides/replaying-recordings.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: React component または DOM プレーヤー API で gt-rrweb bundle を埋め込み、ロケール切り替えを制御する方法。

記録した walkthrough を埋め込み、視聴者が各自のロケールで視聴できるようにします。

プレーヤーは、再生コントロール、クリックに連動したカーソル、シーク操作、ライト／ダークテーマ、全画面再生を備えた形で記録を render します。bundle にロケールのメタデータが含まれる場合は ロケール切り替えのコントロール も表示されます。React のビューでは React component を、プレーヤーのライフサイクルを自分で管理する場合は DOM 関数を使用してください。いずれも `gt-rrweb/replay` から提供されます。

## Reactでの再生 [#react]

bundleを渡して[`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer)をレンダリングします。プレーヤーはコンテナの幅いっぱいに広がります。frameありの記録はアスペクト比を自身で指定しますが、frameなしの記録は親要素から与えられた高さをそのまま使うため、親要素のサイズを指定するか`style`を渡してください。

```tsx title="src/Walkthrough.tsx"
import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

export function Walkthrough() {
  return (
    <GTReplayer
      bundle={bundle}
      initialLocale="fr"
      switchLocalesAllowed
      style={{ height: '480px' }}
    />
  );
}
```

`initialLocale` は、そのロケールが `bundle.locales` に含まれている場合にのみ適用されます。含まれていない場合、再生はソースロケールで開始されます。`bundle`、`initialLocale`、`switchLocalesAllowed`、または `debug` が変更されると、コンポーネントはプレーヤーを再作成します。

`bundle.events` のみを保存した場合は、それらのイベントをbundleとして渡してください:

```tsx
<GTReplayer bundle={{ events }} />
```

`gt-rrweb` で作成された記録には、ロケールとoverlayのメタデータがイベントストリームに埋め込まれているため、イベントのみをエクスポートした場合でもローカライズされたコンテンツを再生できます。

## DOM API を使った再生 [#dom-api]

任意のブラウザアプリケーションで、DOM 要素を渡して [`createGTReplayer()`](/docs/integrations/rrweb/reference/replayer#create-gt-replayer) を呼び出します。返されたハンドルは保持しておき、ホストのビューが破棄されるタイミングで `destroy()` を呼び出してください。

`gt-rrweb/replay` の entry point は React wrapper もエクスポートしているため、DOM API を直接呼び出す場合でも、プロジェクトに React と React DOM 18 以降をインストールする必要があります。

```ts title="src/walkthrough.ts"
import { createGTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

const container = document.querySelector<HTMLElement>('#walkthrough');
if (!container) throw new Error('Missing walkthrough container');

const player = createGTReplayer(container, bundle, {
  initialLocale: 'fr',
});

// ホストビューが削除される際:
player.destroy();
```

## ロケール切り替えの制御 [#locale-switching]

ロケール切り替えのコントロールは、bundle に `locales` が含まれ、かつ `switchLocalesAllowed` が `false` でない場合に表示されます。切り替え時は、rrweb セッションを再構築することなく、テキストの overlay がインプレースで置き換えられます。

* 埋め込みを 1 つのロケールに固定するには、`switchLocalesAllowed={false}` を設定します。
* ロケールのメタデータや overlay を持たない bundle は、記録された source をそのまま再生します。

## bundle をローカルで確認する [#debug]

開発中に `debug` を有効にすると、記録の JSON ファイルをプレーヤーにドロップして、アクティブな bundle を差し替えられます。不正な JSON や記録ではないファイルの場合は、セッションは差し替えられず、通知が表示されます。

通常の埋め込みでは `debug` は無効のままにしてください。デフォルトは `false` です。

## Next steps

- /docs/integrations/rrweb/guides/configuring-recordings
- /docs/integrations/rrweb/guides/recording-walkthroughs

## Sitemap

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