# General Translation Integrations: クイックスタート
URL: https://generaltranslation.com/ja/docs/integrations/rrweb/quickstart.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: gt-rrweb をインストールし、product ウォークスルー を一度記録するだけで、公開済みの翻訳を使ってすべてのロケールで再生できます。

`gt-rrweb` は、記録した 1 本の product ウォークスルー を、あらゆるロケールで公開できる再生へと変換します。フローを一度記録し、そのテキストを既存の translation catalog と対応付ければ、視聴者は自分の言語でそれを視聴できます。

## 始める前に [#before-start]

必要なもの:

* React および React DOM 18 以降。共有の replay エントリは、その DOM API のみを使用する場合でもこれらを peer として必要とします。
* translation catalog を公開しているブラウザアプリケーション。
* 公開済みの catalog をロケール単位で読み込む関数 (アプリが使用しているものと同じ loader) 。

## クイックスタート [#quickstart]

### 1. `gt-rrweb` をインストールする

`gt-rrweb` を、capture と再生に使用する rrweb の package と一緒にインストールします。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-rrweb @rrweb/record @rrweb/replay @rrweb/types
    ```
  </Tab>
</Tabs>

### 2. translation hash を公開する

レコーダーは、renderされた [`<T>`](/docs/react/reference/components/t) のコンテンツを DOM の hash によって公開済みの翻訳と対応付けます。これらの hash が DOM に出力されるよう、既存の config で [`_tagIds`](/docs/react/reference/config#tag-ids) を有効にしてください。

```json title="gt.config.json"
{
  "_tagIds": true
}
```

### 3. レコーダーを追加する

翻訳 provider の内側に [`GTRecorder`](/docs/integrations/rrweb/reference/recorder#gt-recorder) を1つマウントし、アプリで使用している translation catalog の loader を渡します。これにより、配下のどのコンポーネントからでも [`useRecorder()`](/docs/integrations/rrweb/reference/recorder#use-recorder) を使ってセッションを制御できます。

```tsx title="src/RecordingTools.tsx"
'use client';

import { GTRecorder, useRecorder, type RecorderBundle } from 'gt-rrweb';
import loadTranslations from './loadTranslations';

function download(bundle: RecorderBundle) {
  const url = URL.createObjectURL(
    new Blob([JSON.stringify(bundle)], { type: 'application/json' })
  );
  const link = document.createElement('a');
  link.href = url;
  link.download = 'walkthrough.json';
  link.click();
  URL.revokeObjectURL(url);
}

function Controls() {
  const { start, stop, status } = useRecorder();

  return (
    <div>
      <button onClick={() => start({ locales: ['en', 'es', 'fr'] })}>
        Record
      </button>
      <button onClick={stop} disabled={status !== 'recording'}>
        Stop
      </button>
    </div>
  );
}

export default function RecordingTools() {
  return (
    <>
      <Controls />
      <GTRecorder
        harvest={{ loadTranslations, sourceLocale: 'en' }}
        onComplete={download}
      />
    </>
  );
}
```

`start()` に最初に渡すロケールが実際に記録するロケールで、それ以降のロケールはtranslation catalog からハーベストされます。停止時にはそのハーベストの完了を待ち、完成した バンドル を引数として `onComplete` を呼び出し、同じ バンドル を返します。

### 4. ウォークスルーを記録する

**Record** をクリックし、ソースロケールでフローを一通り操作したら **Stop** をクリックします。クリック、ナビゲーション、DOM の変更、スクロール位置、ページコンテンツがキャプチャされます。フォームの入力値はマスクされ、マウス移動のテレメトリは記録されません。公開する前に記録を確認してください。詳しくは [バンドルを保存する](/docs/integrations/rrweb/guides/recording-walkthroughs#store-bundle) を参照してください。

### 5. バンドルを再生する

保存したJSONをインポートし、ウォークスルーを表示したい場所で[`GTReplayer`](/docs/integrations/rrweb/reference/replayer#gt-replayer)をレンダリングします。

```tsx title="src/Walkthrough.tsx"
'use client';

import { GTReplayer, type GTReplayerBundle } from 'gt-rrweb/replay';
import recording from './walkthrough.json';

const bundle = recording as GTReplayerBundle;

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

プレーヤーは記録時のソースロケールで再生を開始し、バンドルに含まれるロケールのコントロールを表示します。

型アサーションはレコーダーが生成したJSONファイルを記述するものであり、任意のアップロードされたファイルを検証するものではありません。フレームなしの記録には、例のように明示的な再生時の高さを指定してください。

## Next steps

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

## Sitemap

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