Devplatform blog

テクマトリックス 開発基盤ソリューションチームによる技術ブログ

その他開発 生成AI

Chrome DevToolsレコーダーと生成AIで手順書を作成してみた

2025-05-21

はじめに

こんにちは、テクマトリックスの長久保です。
手順書作成は、好き嫌いにかかわらず、プロジェクトの引き継ぎや再現手順の記載、実施内容の共有において避けては通れない作業です。
特に画面操作を伴う手順書は、説明文の作成、操作順序の整理、スクリーンショットの撮影など、多くの時間と手間がかかります。
また、それ以外にも、読む人の理解レベルに合わせた記載内容の調整も頭を悩ませることが多いです。

そこで今回は最近知ったChrome DevToolsのレコーダー機能と話題の生成AIを使って、この手順書作成を効率化できないか試してみました。

今回のゴール

Chrome DevToolsのレコーダー機能で操作ログ（JSONファイル）を取得し、そのJSONファイルを元に生成AIを使って手順書を作成します。

そもそもChrome DevToolsレコーダーとは？

Chrome DevToolsレコーダーとは、Google Chromeブラウザに搭載されている開発者向けツールの一つです。
この機能を使うと、ブラウザ上で行った一連の操作（クリック、入力、ページ遷移など）を記録し、記録した内容をJSON形式のファイルとしてエクスポートできます。

画面上の操作内容を記録していくことが可能です。

主な用途としては、UIテストの自動化スクリプト（Puppeteerなど）の元データ作成などがありますが、今回はこの「操作記録」機能で作成したJSON形式のファイルを手順書の元データとして活用します。

記録した内容はJSONやPuppeteer形式のファイルとしてエクスポート可能です。

Chrome DevToolsレコーダーの詳細については以下のページを参照ください。
https://developers.google.com/codelabs/devtools-recorder?hl=ja#0

手順

1. Chrome DevToolsレコーダーを利用してJSONファイルを作成する

今回は、具体例として「Jenkinsで新しいジョブを作成する」という手順を記録してみます。なお、Chrome DevToolsレコーダーのボタン名などはブラウザの言語設定に依存するようですので適宜読み替えてください。

  1. Chrome DevToolsを開く
    Jenkinsの画面を開いた状態で、右クリックして「検証」を選択するか、F12キーを押してDevToolsを開きます。
  2. レコーダータブを開く
    DevTools上部のタブから「レコーダー」を選択します。
  3. 新しい記録を開始
    「録画を作成」ボタンをクリックし、任意の記録名(Jenkins_Create_Job)を入力して、「記録を開始」ボタンを押します。
  4. 実際に操作を行う Jenkinsの画面で、新しいジョブを作成する一連の操作を行います。
    • 「新規ジョブ作成」をクリック
    • ジョブ名を入力
    • ジョブの種類を選択（パイプライン）
    • 「OK」ボタンをクリック
    • （必要であれば）ジョブの設定項目を入力・選択。今回はHello Worldのサンプルを利用。
    • 「保存」ボタンをクリック
    • 作成したジョブの実行
    • ジョブの削除
  5. 記録を終了
    操作が終わったら、レコーダーパネルの「記録を終了」ボタンをクリックします。
  6. JSONファイルとしてエクスポート
    記録が終了すると、操作ステップが一覧表示されます。パネル上部にあるエクスポートボタンをクリックし、「Export > JSON」を選択して、JSONファイルをダウンロードします。

これで、Jenkinsでジョブを作成する操作が記録されたJSONファイルが手に入りました。

JSONファイル

{
“title”: “Jenkins_Create_Job”,
“steps”: [
{
“type”: “setViewport”,
“width”: 1145,
“height”: 828,
“deviceScaleFactor”: 1,
“isMobile”: false,
“hasTouch”: false,
“isLandscape”: false
},
{
“type”: “navigate”,
“url”: “http://localhost:8080/”,
“assertedEvents”: [
{
“type”: “navigation”,
“url”: “http://localhost:8080/”,
“title”: “ダッシュボード [Jenkins]”
}
] },
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“aria/新規ジョブ作成”
],
[
“#tasks > div:nth-of-type(1) a”
],
[
“xpath///*[@id=\”tasks\”]/div[1]/span/a”
],
[
“pierce/#tasks > div:nth-of-type(1) a”
] ],
“offsetY”: 21.44318389892578,
“offsetX”: 85.1988639831543,
“assertedEvents”: [
{
“type”: “navigation”,
“url”: “http://localhost:8080/view/all/newJob”,
“title”: “”
}
] },
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“aria/ジョブ名入力”
],
[
“#name”
],
[
“xpath///*[@id=\”name\”]”
],
[
“pierce/#name”
] ],
“offsetY”: 37.63636779785156,
“offsetX”: 100.45454406738281
},
{
“type”: “change”,
“value”: “AI手順作成”,
“selectors”: [
[
“aria/ジョブ名入力”
],
[
“#name”
],
[
“xpath///*[@id=\”name\”]”
],
[
“pierce/#name”
] ],
“target”: “main”
},
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“li.org_jenkinsci_plugins_workflow_job_WorkflowJob span”
],
[
“xpath///*[@id=\”j-add-item-type-standalone-projects\”]/ul/li[2]/div[2]/label/span”
],
[
“pierce/li.org_jenkinsci_plugins_workflow_job_WorkflowJob span”
] ],
“offsetY”: 11.017059326171875,
“offsetX”: 52.465911865234375
},
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“aria/OK”
],
[
“#ok-button”
],
[
“xpath///*[@id=\”ok-button\”]”
],
[
“pierce/#ok-button”
],
[
“text/OK”
] ],
“offsetY”: 6.446044921875,
“offsetX”: 63.45454406738281,
“assertedEvents”: [
{
“type”: “navigation”,
“url”: “http://localhost:8080/job/AI%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA/configure”,
“title”: “”
}
] },
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“div.dropdownList-container select”
],
[
“xpath///*[@id=\”main-panel\”]/form/div[1]/section[2]/div[4]/div/div/div[2]/div[2]/div/div[1]/select”
],
[
“pierce/div.dropdownList-container select”
] ],
“offsetY”: 17.386383056640625,
“offsetX”: 42.8636474609375
},
{
“type”: “change”,
“value”: “hello”,
“selectors”: [
[
“div.dropdownList-container select”
],
[
“xpath///*[@id=\”main-panel\”]/form/div[1]/section[2]/div[4]/div/div/div[2]/div[2]/div/div[1]/select”
],
[
“pierce/div.dropdownList-container select”
] ],
“target”: “main”
},
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“aria/Save”
],
[
“button.jenkins-submit-button”
],
[
“xpath///*[@id=\”bottom-sticker\”]/div/button[1]”
],
[
“pierce/button.jenkins-submit-button”
],
[
“text/Save”
] ],
“offsetY”: 9.8096923828125,
“offsetX”: 50.005706787109375,
“assertedEvents”: [
{
“type”: “navigation”,
“url”: “http://localhost:8080/job/AI%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA/”,
“title”: “”
}
] },
{
“type”: “click”,
“timeout”: 5000,
“target”: “main”,
“selectors”: [
“aria/ビルド実行”,
“#tasks > div:nth-of-type(3) a”,
“xpath///*[@id=\”tasks\”]/div[3]/span/a”,
“pierce/#tasks > div:nth-of-type(3) a”
],
“offsetX”: 132.1988639831543,
“offsetY”: 19.318191528320312
},
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“div:nth-of-type(5) span:nth-of-type(2)”
],
[
“xpath///*[@id=\”tasks\”]/div[5]/span/a/span[2]”
],
[
“pierce/div:nth-of-type(5) span:nth-of-type(2)”
],
[
“text/Pipelineの削除”
] ],
“offsetY”: 14.917633056640625,
“offsetX”: 69.61931991577148
},
{
“type”: “click”,
“target”: “main”,
“selectors”: [
[
“aria/Yes”
],
[
“button.jenkins-button–primary”
],
[
“xpath///*[@id=\”jenkins\”]/dialog[2]/div[3]/button[1]”
],
[
“pierce/button.jenkins-button–primary”
],
[
“text/Yes”
] ],
“offsetY”: 27.36932373046875,
“offsetX”: 49.06817626953125,
“assertedEvents”: [
{
“type”: “navigation”,
“url”: “http://localhost:8080/”,
“title”: “”
}
] }
] }

このJSONファイルをインポートして「リプレイ」ボタンを押すことで同じ動作を再現させることも可能です。

2. 作成したJSONから手順書を作成する

作成したJSONを用いて、生成AIで手順書を作成します。
ChatGPT、Gemini、Claudeなど、任意のテキストベースの生成AIツールで実行可能です。

次に、エクスポートしたJSONファイルの内容を元に、生成AIを使って手順書を作成します。
この時、手順書の理解者に併せてプロンプトを変更することで、利用者の理解レベルに応じた手順書を作成することが可能です。

プロンプト例1：基本的な手順書

以下のJSONデータは、Jenkinsで新しいジョブを作成する操作を記録したものです。
この操作内容を元に、手順書をmdファイル形式で作成してください。

以下の手順書を作成してくれました。

手順書の全文はこちらから参照ください(生成AIで出力されたままのMarkdownファイルとなります)。


プロンプト例2：初心者向けの手順書

以下のJSONデータは、Jenkinsで新しいジョブを作成する操作を記録したものです。
この操作内容を元に、IT初心者にも理解できるように、丁寧な言葉遣いで手順書を手順書をmdファイル形式で作成してください。
専門用語には簡単な説明を加えてください。

手順書の全文はこちらから参照ください(こちらも同様に生成AIで出力されたままのMarkdownファイルとなります)。

このように閲覧者の知識レベルに応じた手順書を作成することが可能です。

備考：スクリーンショットの挿入について

残念ながら、Chrome DevToolsレコーダーの機能だけでは、操作中のスクリーンショットを自動で記録・挿入することはできません。しかし、生成されたJSONファイルはブラウザのレコーダーにインポートして再生（リプレイ）することが可能です。これにより、実際にどのような画面遷移で操作が行われるのかを確認できるため、ある程度は補完できるかと思います。
スクリーンショットがどうしても必要な場合は、手動で追加するか、他ツールとの連携を検討してください。

また、このJSONファイルをもとに、生成AIを利用し、PythonとSeleniumを使った自動操作スクリプトを作成させることもできました。
画面ショットの挿入についても、少し作り込めば、JSONファイルの指定したポイントでスクリーンショットを取得し、Markdownファイルに埋め込むことも実現できそうです。

まとめ

今回、まずChrome DevToolsレコーダーの使い勝手の良さに驚きました。
X(旧Twitter)のChrome DevToolsアカウントで2021年11月4日にプレビュー版として公開された機能のため、比較的新しい機能かと思います。
https://x.com/ChromeDevTools/status/1455936412646199296
ブラウザだけで完結できるのはとても便利ですね。

また、今回の様に生成AIを組み合わせることで、手順書作成の手間を大幅に削減できる可能性を感じました。
もちろん、生成された手順書で完成とは言いませんし、最終的な確認や微調整は必要でしょう。しかし、ゼロから作成するのに比べて、時間と労力を削減できるのではないかと思います。
それだけでなく、読む人の理解レベルに合わせた調整ができることも良いポイントかと思います。
今回の例ですと「初めてJenkinsを利用する方」と「Jenkinsを使ったことがある人」で必要な情報が異なります。前者の場合、そもそも「ジョブ」とは何か、今自分は何の目的でこの操作をしているのか、といった補足情報が書いてある方が親切でしょう。しかし後者の場合、これらの情報は冗長に感じます。

より生成AIが普及した未来では、JSONファイルやPuppeteerスクリプトのような操作記録データのみを共有し、読む側が生成AIを用いて自身のレベルに合った手順書を作成・利用する、といった形式も一般化するかもしれません。

By nagakubo

主にCI環境構築をメインで担当しています。 Certified CloudBees Jenkins Engineer (CCJE)

Related Post

OneDrive/SharePoint その他開発

rcloneを用いてSharePoint(OneDrive)にファイルをアップロードしてみた

4月 30, 2025 nagakubo
セキュアコーディング その他開発

Secure Code Warriorでセキュアコーディングを学んでみた

2月 3, 2025 nagakubo
その他開発 未分類

ビアバッシュLT大会をやってみた

12月 25, 2024 amahisa

You missed

Jenkins

JenkinsのLockable Resourcesプラグインでエージェントを排他的に利用する

5月 22, 2025 kenmotsu
その他開発 生成AI

Chrome DevToolsレコーダーと生成AIで手順書を作成してみた

5月 21, 2025 nagakubo
OneDrive/SharePoint その他開発

rcloneを用いてSharePoint(OneDrive)にファイルをアップロードしてみた

4月 30, 2025 nagakubo
Jenkins

Jenkinsの認証管理をHashiCorp Vaultでやってみた

4月 16, 2025 tachibana