# General Translation Integrations: ウォークスルーの記録
URL: https://generaltranslation.com/ja/docs/integrations/rrweb/guides/recording-walkthroughs.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: gt-rrweb でプロダクトフローをキャプチャし、セッションをレビューして、その記録バンドルを保存する方法。

繰り返し実行できるプロダクトフローを一度記録すれば、レビュー・公開・リプレイが可能なバンドルとして保存できます。

このガイドでは、実用的なキャプチャセッションの実行方法を中心に説明します。まず [Quickstart](/docs/integrations/rrweb/quickstart) を完了してください。

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

記録を開始する前に、次の準備を行います。

* 対象の製品リージョンと再生フレームに合わせて[レコーダーを設定](/docs/integrations/rrweb/guides/configuring-recordings)します。
* ソースロケールでフローを開き、毎回同じ状態から始められるようにリセットします。
* 含める公開済みロケールを決めます ([ローカライズされたリプレイの設定](/docs/integrations/rrweb/guides/configuring-recordings#localized-replay)を参照してください) 。

## キャプチャの開始と停止 [#capture]

まずソースロケールを指定して [`start()`](/docs/integrations/rrweb/reference/recorder#use-recorder) を呼び出し、続いてハーベストする対象ロケールごとに呼び出します。レコーダーはセッションをモジュール状態として保持するため、ルートの変更でコンポーネントが再マウントされても、実行中の記録が終了することはありません。

```tsx title="src/RecordButton.tsx"
const { start, stop, status } = useRecorder();

await start({ locales: ['en', 'de', 'ja'] });
const bundle = await stop();
```

`status` は `preparing` から `recording` へ遷移し、翻訳のハーベスト中は再び `preparing` に戻り、最終的に `idle` になります。カタログローダーの失敗はそのロケールにのみ影響します。より広範なハーベストに失敗しても致命的ではなく、`stop()` はソースのみのバンドルを返して解決します。

ページを離れると、実行中のセッションは翻訳のハーベストも `onComplete` の呼び出しも行わずに中断されます。アプリケーションをアンロードする画面遷移の前に、記録を停止してください。

## プロダクトフローを記録する [#product-flow]

`start()` が解決したら、視聴者に見せたい順序どおりにウォークスルーを実行します。クリック、画面遷移、DOM の変更、スクロール位置、表示中のページ内容がイベントストリームに記録されます。

セッションは要点を絞りましょう:

* 安定したページとアプリケーションの状態から開始する。
* 非同期コンテンツを操作する前に、描画が完了するまで十分に待つ。
* 視聴者が明確な成功状態に到達したところで終了する。
* 機微なアプリケーションの状態を表示しない。

フォームの入力値はマスクされ、マウス移動のテレメトリは記録されません。ただし、それ以外の表示テキストや状態はイベントストリームに残るため、公開する前に完成した記録を必ず確認してください。

記録に含めたくない操作用コントロールなどの要素には、rrweb の `rr-block` クラスを追加します:

```tsx
<div className="rr-block">
  <RecordingControls />
</div>
```

## 自動化から記録を制御する [#automation]

end-to-endテストから記録をスクリプトで制御するには、レコーダーの`expose`オプションを設定します。生成される`window[name]`ハンドルは、同じ`start`関数と`stop`関数を提供します。

```tsx title="src/RecordingTools.tsx"
<GTRecorder expose="gtRecorder" />
```

```js title="record.spec.js"
await page.evaluate(() => window.gtRecorder.start({ locales: ['en', 'es'] }));
// ... フローを操作する
const bundle = await page.evaluate(() => window.gtRecorder.stop());
```

## バンドル を保存する [#store-bundle]

返された [`RecorderBundle`](/docs/integrations/rrweb/reference/recorder#recorder-bundle) を JSON にシリアライズし、アプリケーションの assets または独自のストレージに保存してください。この package が記録をどこかにアップロードすることはありません。

バンドル全体を保存することも、`bundle.events` だけを保存することもできます。ロケールと overlay のメタデータはイベントストリームに埋め込まれているため、イベントのみをエクスポートしたものを後から `{ events }` として wrap すれば、リプレイヤーはローカライズされた再生を復元できます。

<Callout type="warn">
  公開する前に記録を review してください。入力値はマスクされますが、イベントストリームにはセッション中に表示されていたページのテキストやアプリケーションの状態が含まれたままです。
</Callout>

## Next steps

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

## Sitemap

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