WebシステムのマニュアルはAIに書かせよう
先に成果物
Webシステムのマニュアルの作成めんどくさくないですか？
企業でWebシステムを開発すると、マニュアル作成は避けて通れない作業です。しかし、そのマニュアル作成にかかる時間を把握していますか？
私は昨年度、3つのマニュアルを作成しました。そのうち1つは自分が開発に関わっていないシステムです。各マニュアルの作成時間は半日から1日半。主な作業は画面リニューアルに伴う差し替えや、データ更新による修正でした。システム規模によっては数日から数週間を要する場合もあります。
記事の内容はエンジニア向けの内容になっていますが、時間が経てば非エンジニア向けのサービスが出てくるのであろうと思う今日この頃です。
突然ですが、Claude Code使ってますか？
突然ですが皆さん、Claude Code使っていますか？
Claude Codeが何ってかたはこちらを参照ください。
今回はMCPを簡単に使え、ファイルの操作ができるLLMとして利用します。
LLMで一番強いと噂のコーディング能力は今回は使いません。ただひたすら文章をまとめる人になってもらいます。
※Gemini CLIでもほぼ同じことができます。無料で試したい人はGemini Cliでのやり方に都度置き換えてください。
マニュアル自動作成の準備
まずは、下記を準備しましょう
- Visual Studio Code(以降VSCodeと呼びます。MarkdownのプレビューがあればなんでもOK)
- Claude Code(or Gemini CLI)の導入
- Claude Codeにplaywright MCPを登録する
1. VSCodeインストール
i. VSCodeでMarkdownを閲覧する
今回はMarkdown形式での資料作成を行います。
好みで大丈夫ですが、今回はMarkdown All in Oneを使います。
Identifier: yzhang.markdown-all-in-one
拡張機能のインストール後
2画面に虫眼鏡のマークがついたボタンが表示されるようになります。(表示されない方はReload Windowしてください。)
適当に〇〇.mdファイルを作成し、Markdownのプレビューを確認してください。
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
プレビューがもう一つの画面で確認できればOKです。
2. Claude Code(or Gemini CLI)の導入
Macであれば一発で入ります。
npm install -g @anthropic-ai/claude-code
Windowsの人はGemini CLIの方が導入が簡単です。
npm install -g @google/gemini-cli
ターミナルでclaudeと入力すると、Claude Codeが起動します。
※geminiの場合はgeminiと入力してください。
3. Playwright MCPを導入する
playwrightはMicrosoftが作成した、e2eのテスト自動化フレームワークです。
ざっくりいうと、ブラウザを自動で操作してテストを行ってくれる便利なテストツールです。
今回は、ブラウザを動かす役割とすくりんーショットを撮る役割を担ってもらいます。
i. mcpの登録
claude mcp add-json playwright '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'
playwrightはブラウザを操作するため、Chromeをインストールします。
npx playwright install chrome
ii. インストールの確認
claude mcp get playwright
playwright:
Scope: Local (private to you in this project)
Type: stdio
Command: npx
Args: @playwright/mcp@latest
Environment:
iii. claudeとの連携確認
Claude Codeで、Playwright MCPを呼び出します。
google.comにアクセスして、zennのホームページを開いて
マニュアルの自動作成
本題です。マニュアルの作成をClaude Codeにやってもらいます。
サンプルとして、https://todomvc.com のページを借ります。ブラウザでアクセスできればなんでもOKです。
ここからは勝手にClaude Codeが仕事をするのを眺めましょう
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > https://todomvc.com/examples/react/dist/ にアクセスしtodomvc(react)についてのマニュアルと紹介を playwright │
│ mcp と協力してドキュメントにまとめてください。 │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > screenshot フォルダーを作成し、@TodoMVC-React-Spec.md について playwright mcp を利用して、screenshot を撮影しドキュメントから参照できるようにまとめてください。 │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
╭──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│ > @TodoMVC-React-Spec.md にはhttps://todomvc.com/examples/react/dist/ のマニュアルが書かれている。今からこのアプリケーションの仕様を確認したい。現在の仕様を │
│ UI から判定し、playwright mcp で各操作ごとの適切なスクリーンショットを撮影し、@screenshots フォルダーに格納したのち、ドキュメントにスクリーンショットを貼り付け │
│ てください。最後に誤字脱字や、意味の通らない文章がないか確認し、できるだけわかりやすいマニュアルを作成してください。 │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
今回はこの三つの指示だけで動かしています。
screenshotは明示的にフォルダーを作成して保存させるようにした方が使い勝手が良かったです。
マニュアルの作成以外にも、画像を差し込むドキュメントの作成は大体できるイメージです。
成果物
次回予告
🎴 次回、スライドクラフト決闘（デュエル）！！
「開け！未来を写すSlidev！」
テクノロジーの波に乗り、プレゼンテーション界に現れし新たな力――SlidevとMarp。
コードで描け、デザインを操り、そして観衆の心を奪え！
次回、「コードが導くスライド・マジック！」
HTMLもMarkdownも味方につけろ。
見せてやれ、お前のターン――！
「デュエルスタンバイ！」
Discussion