AIを使用して英語から翻訳されました
このアーティクルはAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
Chrome Recorder（Edgeやその他のChromiumベースのブラウザでも利用可能）を使用して、ウェブサイトとの自分のインタラクションを簡単に記録し、その後、記録をシナリオとしてSpeed Analysis Labにインポートします。
記録の作成とエクスポート
ステップ1: Chrome開発者コンソールを開く
1. Google Chromeを使用して、記録したいウェブサイトを開きます。
2. プロファイル写真の隣にある'三点リーダー'アイコンをクリックして、開発者コンソールを開きます。
3. ‘その他のツール’をクリックし、次に‘開発者ツール’をクリックします。
4. 開発者コンソールの右上隅にある'三点リーダー'アイコンをクリックし、次に‘その他のツール’ > ‘レコーダー’をクリックします。
ステップ2: 記録を作成する
1. 開いたウィンドウで‘新しい記録を作成’を選択します。
2. 記録の名前を入力します。注意：記録の名前はエクスポート時のファイル名およびSpeed Analysis Labでのシナリオ名になります。
3. ‘記録するセレクタの種類’の下で、任意の好みに応じて‘CSS’または‘XPath’を選択します。注意：選択したセレクタの種類はSpeed Analysis Labで使用されます。
4. ‘記録を開始’をクリックします。
5. 記録したいアクションを実行し、完了したら記録を停止します。
ステップ3: 記録をエクスポートする
録画を停止したら、‘エクスポート’ボタンをクリックして‘JSON’を選択することで、JSONファイルとしてエクスポートできます。
録画されたアクションとブラウジングについて
録画されたアクション
ウェブサイト上で行うすべてのアクションは、録画を終了するまで記録されます。
ブラウジングを録画する際には、結果のシナリオの質を向上させるために、役立つアクションのみを実行するようにしてください。キーボードナビゲーションはスピード分析ラボではサポートされていないため、クリックのみを使用する必要があります（タブ、上矢印キー、フォームを提出するための「Enter」キーなどは使用しないでください）。
録画されたアクションはタイムラインとして表示されます。タイムライン内のアクションをクリックすると、そのアクションに関する詳細（例：アクションが発生したイベントの種類やセレクタなど）を確認できます。
録画されたブラウジング
Chromeは自動的にブラウジング（例：ページの変更）を検出し、スピード分析ラボはこの情報を再利用してステップとそのアクションを定義します。
ただし、ページの変更がない場合（例：「カートに追加」、またはSPAナビゲーション）、Chromeはスピード分析ラボのための適切な実装を作成せず、すべてのアクションが同じステップに含まれます。
‘Add assertedEvents’をクリックすることで、レコーダーにシナリオを複数のステップに分割させることができます。
録画のインポートとシナリオの作成
ステップ1: 録画をインポートする
1. ‘スピード分析ラボ’に移動し、‘シナリオ’を選択します。
2. ‘Chromeレコーダーからインポート’ボタンをクリックします。
3. エクスポートしたJSONファイルを見つけて選択し、アップロードします。
4. アップロードが完了すると、インポートできなかったアクションが画面に表示されます。
インポートされたアクションタイプ
スピード分析ラボにインポートできるのは、以下のChromeレコーダーアクションのみです:
| Chromeレコーダーアクション | 対応するスピード分析ラボアクションタイプ |
| ナビゲート | ページへの直接アクセス |
| クリック | 要素をクリック |
|
変更 |
入力を記入 |
ステップ2: シナリオをレビューして絞り込む
シナリオを実行する前に、以下のアクションを実行してレビューする必要があります:
- ステップとアクションの名前の変更: あなたとあなたのチームが理解しやすい命名規則を使用してください
- 任意のステップを必要に応じて分割: Chrome Recorderはページ変更があるときにのみ「ステップ」を作成します（したがって、SPAナビゲーションは検出されません）。ほとんどのシナリオでは、いくつかのインポートされたステップをいくつかに分割し、記録されたアクションとして定義されたアクションに特に注意を払う必要があるかもしれません。
-
不要な「入力を埋める」アクションを削除:
- 録画中に、入力フィールドを埋める前にクリックした可能性が高く、そのためシナリオにクリックアクションが表示されます。このアクションは削除できます。「入力を埋める」アクションはすでに入力フィールド内でクリックを実行するためです。
- Chrome Recorderは、単一のキーボード入力に対して複数のアクションを記録した可能性があります。これは通常、大文字で最初の文字を入力したときに発生します。たとえば、「HEllo」は通常、「HE」を含むアクションと「HEllo」を含むアクションを生成します。シナリオから関連のないアクションを削除する必要があります。
- 必要に応じて「チェック」アクションを追加: デフォルトでは、シナリオをインポートするときに「チェック」アクションはありません。チェックを使用すると、ページが期待される状態にあるかどうかを確認し、そうでない場合は実行時に警告を発行できます。
-
シナリオの構成を編集: 場所と帯域幅を好みに応じて確認し、更新してください。
- 場所は、最後に作成されたシナリオと同じか、ない場合はデフォルトで「フランス」になります。
- デフォルトの帯域幅は、選択した場所/デバイスの最初のものです。
ここでステップとアクションの管理についてさらに詳しく学んでください。
追加のアクション（該当する場合）:
- 「スクロール」アクションを追加: Chrome Recorderはスクロールアクションを記録しません。シナリオが遅延読み込みされた要素と対話する必要がある場合は、手動でこれらを追加する必要があります。
- shadowDOMを使用しているウェブサイト: スピード分析ラボはXPATHとCSSセレクタのみをサポートしています。shadowDOMの場合、以下に示すようにセレクタを::shadowRoot::キーワードを使用するように更新する必要があります: