Chrome DevToolsレコーダーと生成AIを使ってブラウザでの操作内容をかんたんに文章化する
2025.04.29こんにちは、製造ビジネステクノロジー部の若槻です。
Chrome DevTools には「Recorder」という機能があり、ブラウザ上でのユーザーの操作フローを記録、再生、測定することができます。この機能を使えば、Webアプリケーションの操作手順を自動化したり、UI操作のテストを作成したりすることが可能です。
今回は、「操作手順のマニュアル作成をもっと効率化できないだろうか？」という課題に対して、Chrome DevToolsレコーダーで記録した操作ログを生成AIに読み込ませることで、人間が読みやすい形式の手順書に自動変換できないか試してみました。
手順
AWS マネジメントコンソールで DynamoDB のテーブルを作成する操作を記録してみます。
操作の記録
Chrome DevTools のレコーダーで Create recording をクリックして新しいレコーディングを作成します。
記録を開始したい画面をブラウザで開いたら、Start recording をクリックして、記録を開始します。
ブラウザ画面上でのクリック、スクロール、キーボード入力などの操作を行うと、DevTools のレコーダーに操作内容が記録されていきます。
記録中に誤操作や不要な画面遷移があっても心配ありません。記録後に手動で該当ステップを削除できますし、後述する生成AIへの入力時には、AIが自動的に重要な操作だけを抽出して文章化してくれます。スムーズに記録を続けましょう。
ただし、画面キャプチャについては注意が必要です。レコーダーに表示されるサムネイルは低解像度の参考画像に過ぎないため、マニュアルに使用する画面キャプチャは別途取得することをお勧めします。重要な操作ポイントでは、適宜スクリーンショットを撮影しておきましょう。
記録が完了したら、End recording をクリックして記録を停止します。
これでブラウザ操作のレコーディングを作成することができました。
生成AIで手順を整理
作成したレコーディングで Show code をクリックします。
表示される全ての操作内容のJSONコードをクリップボードにコピーします。
コピーした操作内容の記録をChatGPTなどの生成AIツールで文章化してもらいます。
今回はAI-StarterのClaude 3.7 Sonnetモデルを使用して、以下のようなプロンプトを与えました。
Chrome DevToolsレコーダーで記録したAWSマネジメントコンソールでの操作内容をブログで紹介する体で文章化して。
```
{
"title": "Recording 2025/4/29 at 20:56:09",
"steps": [
{
"type": "setViewport",
"width": 796,
"height": 812,
"deviceScaleFactor": 1,
"isMobile": false,
"hasTouch": false,
"isLandscape": false
},
{
"type": "navigate",
"url": "https://ap-northeast-1.console.aws.amazon.com/console/home?nc2=h_ct®ion=ap-northeast-1&src=header-signin#",
"assertedEvents": [
{
"type": "navigation",
"url": "https://ap-northeast-1.console.aws.amazon.com/console/home?nc2=h_ct®ion=ap-northeast-1&src=header-signin#",
"title": "コンソールのホーム | コンソールのホーム | ap-northeast-1"
}
]
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/すべてのサービスを表示"
],
[
"div:nth-of-type(25) [data-testid='dashboardWidgetFooterLink']"
],
[
"xpath///*[@data-testid=\"dashboardWidgetFooterLink\"]"
],
[
"pierce/div:nth-of-type(25) [data-testid='dashboardWidgetFooterLink']"
],
[
"text/すべてのサービスを表示"
]
],
"offsetY": 7,
"offsetX": 113.3046875
},
{
"type": "click",
"target": "main",
"selectors": [
[
"div.awsui_main_7nfqu_x10b8_321"
],
[
"xpath///*[@id=\"app\"]/div/div/main/div[3]"
],
[
"pierce/div.awsui_main_7nfqu_x10b8_321"
]
],
"offsetY": 301,
"offsetX": 469
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/DynamoDB"
],
[
"[data-testid='dynamodbv2']"
],
[
"xpath///*[@data-testid=\"dynamodbv2\"]"
],
[
"pierce/[data-testid='dynamodbv2']"
],
[
"text/DynamoDB"
]
],
"offsetY": 9,
"offsetX": 64.3203125,
"assertedEvents": [
{
"type": "navigation",
"url": "https://ap-northeast-1.console.aws.amazon.com/dynamodbv2/home?region=ap-northeast-1",
"title": ""
}
]
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/テーブルの作成",
"aria/[role=\"generic\"]"
],
[
"div.awsui_main_7nfqu_x10b8_321 > div > div > div > div.awsui_grid_14yj0_i8844_145 div > div:nth-of-type(3) span"
],
[
"xpath///*[@id=\":rm:\"]/div/div/div/div[3]/a/span"
],
[
"pierce/div.awsui_main_7nfqu_x10b8_321 > div > div > div > div.awsui_grid_14yj0_i8844_145 div > div:nth-of-type(3) span"
]
],
"offsetY": 3,
"offsetX": 54.75
},
{
"type": "keyDown",
"target": "main",
"key": "Eisu"
},
{
"type": "keyUp",
"key": "Eisu",
"target": "main"
},
{
"type": "change",
"value": "test",
"selectors": [
[
"aria/テーブル名"
],
[
"#formField\\:r43\\:"
],
[
"xpath///*[@id=\"formField:r43:\"]"
],
[
"pierce/#formField\\:r43\\:"
]
],
"target": "main"
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/パーティションキー"
],
[
"#partitionKey\\.AttributeName"
],
[
"xpath///*[@id=\"partitionKey.AttributeName\"]"
],
[
"pierce/#partitionKey\\.AttributeName"
]
],
"offsetY": 10,
"offsetX": 202
},
{
"type": "keyDown",
"target": "main",
"key": "Eisu"
},
{
"type": "keyUp",
"key": "Eisu",
"target": "main"
},
{
"type": "change",
"value": "id",
"selectors": [
[
"aria/パーティションキー"
],
[
"#partitionKey\\.AttributeName"
],
[
"xpath///*[@id=\"partitionKey.AttributeName\"]"
],
[
"pierce/#partitionKey\\.AttributeName"
]
],
"target": "main"
},
{
"type": "click",
"target": "main",
"selectors": [
[
"div > div:nth-of-type(3) > div > div > div:nth-of-type(1) div.awsui_label-wrapper_14mhv_4yfk1_311"
],
[
"xpath///*[@id=\":r3u:\"]/div[2]/div/div/div[3]/div/div/div[1]/div/div[1]"
],
[
"pierce/div > div:nth-of-type(3) > div > div > div:nth-of-type(1) div.awsui_label-wrapper_14mhv_4yfk1_311"
]
],
"offsetY": 2,
"offsetX": 290
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/テーブルの作成[role=\"button\"]",
"aria/[role=\"generic\"]"
],
[
"div.awsui_footer_1i0s3_184qa_189 div > div > div:nth-of-type(2) span"
],
[
"xpath///*[@data-testid=\"submit-form\"]/span"
],
[
"pierce/div.awsui_footer_1i0s3_184qa_189 div > div > div:nth-of-type(2) span"
]
],
"offsetY": 3.5,
"offsetX": 30.796875
},
{
"type": "click",
"target": "main",
"selectors": [
[
"aria/ナビゲーションドロワーを閉じる",
"aria/[role=\"generic\"]"
],
[
"div.awsui_hide-navigation_2p2ab_1taws_184 span"
],
[
"xpath///*[@data-testid=\"polaris-app-layout\"]/div/div[1]/div/nav/div[1]/button/span"
],
[
"pierce/div.awsui_hide-navigation_2p2ab_1taws_184 span"
]
],
"offsetY": 18,
"offsetX": 1
}
]
}
```
すると以下の回答がありました。手順1から4で操作内容が文章化されています。手順だけでなく記事の導入やまとめまで入っており、DynamoDBテーブルの作成手順としてそのままブログにできそうな内容が得られました。あとは必要に応じて操作画面のスクリーンショットを追加すれば最低限の内容としては十分そうです。
# AWSマネジメントコンソールでDynamoDBテーブルを作成する手順
今回はAWSマネジメントコンソールを使って、DynamoDBのテーブルを簡単に作成する方法をご紹介します。Chrome DevToolsのレコーダー機能を使って操作を記録しましたので、その手順を詳しく解説します。
## 手順1: AWSマネジメントコンソールにアクセス
まず、AWSマネジメントコンソールにログインします。今回は東京リージョン（ap-northeast-1）で作業を行いました。
## 手順2: DynamoDBサービスを見つける
1. コンソールホーム画面から「すべてのサービスを表示」をクリックします
2. 表示されたサービス一覧から「DynamoDB」を選択します
## 手順3: テーブルの作成
1. DynamoDBのダッシュボードが表示されたら、「テーブルの作成」ボタンをクリックします
2. テーブル名に「test」と入力します
3. パーティションキーの設定では、キー名として「id」を入力します
4. データ型はデフォルトの「文字列」のままにしました
## 手順4: テーブルの作成を完了
1. 画面下部の「テーブルの作成」ボタンをクリックして、テーブルの作成を実行します
2. テーブルの作成が完了すると、テーブルの詳細画面が表示されます
3. 必要に応じて、左側のナビゲーションドロワーを閉じることで、より広い作業スペースを確保できます
## まとめ
AWSマネジメントコンソールを使えば、わずか数クリックでDynamoDBテーブルを作成できます。今回は最もシンプルな設定でテーブルを作成しましたが、実際のプロジェクトでは、キャパシティモードの選択やセカンダリインデックスの追加など、より詳細な設定が必要になることもあります。
DynamoDBは、スケーラブルで高性能なNoSQLデータベースサービスであり、多くのアプリケーションで活用されています。まずはこのようなシンプルなテーブルから始めて、徐々に機能を理解していくことをおすすめします。
注意点
Chrome DevToolsのレコーダー機能で対応しているのは、1つのタブでの操作のみです。今回は試しませんでしたが、複数タブでの操作を記録する場合はタブごとにレコーダーを起動する必要があるので注意しましょう。
おわりに
Chrome DevToolsレコーダーと生成AIを組み合わせることで、ブラウザ操作の手順書やチュートリアルを簡単に作成できることがわかりました。特に以下のようなケースで役立ちそうです：
- 新しく入ったメンバー向けのマニュアル作成
- クライアントへの操作手順の説明資料
- ブログ記事やチュートリアルの執筆時間短縮
- 複雑なWeb操作の記録と共有
このように、開発者ツールとAIを組み合わせることで、ドキュメント作成の効率が大幅に向上します。ぜひ皆さんも試してみてください。
以上
