マニュアル作成の自動化に挑戦してみた話
こんにちは、横山です。
最近、AI の活用が一気に進んできたと感じています。
実際に HP を作ったり、簡単な UI であれば自然言語で作れるようになってきました。
そこで、マニュアルの作成も自動化できないかと思い、AI（Claude Code）に相談してみました。
今回はその過程を書いていきます。
作成のイメージ
イメージはシンプルです。
- 画面を自動でスクリーンショット
- 画像に赤枠をつける
- テンプレート（Word） に自動でまとめる
既存のマニュアルはこのような見た目です↓
| No. | 画面 | 操作手順 |
|---|---|---|
| 1 |
スクリーンショット
|
ブラウザで Teams を開きます。 左メニューの「カレンダー」アイコンをクリックします。 |
| 2 |
スクリーンショット
|
カレンダー画面が表示されます。 右上の「新しい会議」ボタンをクリックします。 |
これをできるだけ自動で作りたい、という話です。
作成物
最終的に3段階のツールができました。
ステップ1：スクリーンショット自動取得
YAML というファイルに自動でやってほしい内容を記載します。PowerShell を実行すると、自動でブラウザが動いて画像を保存してくれます。
※YAML の中身は、参考にさせたドキュメントの内容を見て自動で作成してくれました。
ステップ2：赤枠を GUI で指定
画像を見ながらマウスでドラッグすると赤枠が描ける専用アプリを作ってくれました。枠の追加、保存、スキップなどの機能がついていました。
※アプリが作成されるのは想定外でした。
ステップ3：Word 自動生成
ステップ1の画像とステップ2の赤枠情報を組み合わせて、テンプレートと同じ形式の Word ファイルを自動で作ります。
つまずいたポイント
その1：ブラウザが開いた瞬間に閉じる
Playwright というブラウザ自動操作ライブラリを使って画面キャプチャをお願いした処理を実行したところ、起動した瞬間に閉じてしまう現象が発生しました。
原因： Edge は起動中のプロファイルをロックしていて、別のプログラムが同じプロファイルを使おうとすると弾かれる仕様でした。
解決策： プロファイルを一時フォルダにコピーしてから起動する、という迂回路を提案してくれました。
※指定のプロファイルを閉じておく必要があり、他に良い方法がないか検討しているところです
その2：MFA の壁
環境にアクセスするには、多要素認証がかかっている場合が多くあります。パスワードを入力した後にスマホで承認が必要なので、そこだけはどうしても自動化できないところでした。
解決策： ログインを自動化するのをやめて、すでにログイン済みの Edge プロファイルをそのまま使う方式にしました。
その3：ポップアップとの戦い
画面を移動するたびにいろんなポップアップが出ます。
「このページから移動しますか？」（Edge の確認ダイアログ）
「未保存の変更があります。編集を続けますか？」
これらがスクリーンショットに写り込んでしまう問題が続きました。実際に動かしてみないと何が出るかわからないというのが難しいところでした。
今回と今後
現時点では、スクリーンショットと説明が一致していないステップがあったり、ポップアップへの対応が十分ではなかったり、複数セクションを1つの Word にまとめる機能が未実装だったりと、まだいくつか課題は残っています。
それでも、一通り動くところまでは形にすることができました。
この先、実際に運用に耐えられるものにできるのかは分かりませんが、引き続き作り込んでいきたいと思います。
