Mentioned in days
ぼくはウェブアプリケーションを開発する機会が多いので、Agentic Codingにおいても「ウェブブラウザとの連携をどうするか」ってのはそこそこ大事なトピック。実際にアプリケーションにアクセスしてもらって、表示や挙動を確認してもらえると捗ることはあるからね。今日はagent-browerってやつを知ったので導入してみた。
Playwright→Chrome DevTools→Vibiumと渡り歩いて、agent-browerというMCPじゃないアプローチに着地したのでなかなかおもしろい。Agent Skillsを定義してClaude Codeからアクセスできるようにしておいた。MCPからSkillsへの重心移しは順次でやっていく。
Chrome DevTools MCP https://github.com/ChromeDevTools/chrome-devtools-mcp がよさげ。Chromeで任意のページを開いてDevToolsにアクセスしたりスクリーンショットを撮ったりできる。
いったんPlaywrightのMCPを外して、Chrome DevTools MCPを使うことにしてしばらく過ごしてみようか。
また、Claude Codeの設定ファイルの類であるCLAUDE.mdやsettings.jsonなどに知見がたまってきているがM4 MacBook Air 2025のファイルシステム上に置いてあるだけでバックアップがないな〜とずっと思ってきたのを、ここにきてちょっと管理することにした。さすがに、ぜんぶ消し飛んだら少し困るくらいのものにはなってきたので。
きのうProject FHのためにHerokuとSentryのMCPを設定して、ちょっと前にはPlaywrightのMCPも設定していたので、これらを活用して「パフォーマンス改善計画をつくってね」とClaude Codeに頼んでみたら、けっこういい感じの計画ができた。おもしろ〜〜。
「パフォーマンス改善」をGitの親branchにしつつ、そこから子branchを生やして実際の改善作業をやってもらおうと思ったら、いよいよworktreeをちゃんと使った方がいい気がする〜となったので今日は複数のworktreeをつくって並列でClaude Codeに動いてもらった。まだ慣れていなくて、ぼくの作業がぎこちない。
Git worktreeを大活用してウェブアプリケーション開発をオラオラと進めているぜ、って人がいたら話を聞かせてほしい。細かい部分で「これは、どうするといいんだ?」ってことがけっこうある。
Claude CodeのTaskツールの並列実行(parallelTasksCount)は分析タスク向け を読んでparallelTasksCountってやつに興味を持ったので、試しに3にしてみる。
claude config set -g parallelTasksCount 3
ウェブアプリケーションの開発をClaude Codeでやるなら、PlaywrightのMCPは設定しておいて損はないな…と思った。ウェブブラウザで確認してくれるの助かる。ウェブブラウザの自動操作は眺めていておもしろい。
明日以降も、またClaude Codeをがっつり使っていくだろうから、今日は足回りを整えることに時間を使った。まずはMCPを試していこうと思っていくつか設定する。
- Playwright https://github.com/microsoft/playwright-mcp
- OpenAIのo3のウェブ検索 https://github.com/yoshiko-pg/o3-search-mcp
- Gemini https://github.com/junebako/jejeje/tree/main/gemini_mcp
- いろいろ調べて試していたら「自分でも作れそう」と感じたので小さいものをつくってみた
- 雑リポジトリの中のひとつのディレクトリになっているけれど、リポジトリとして切り出してもいいかも
ぼくはこれまで通りにClaude Codeをインターフェイスとして活用しつつ、Geminiで最新のニュースをシュッと参照したり、o3にがっつりまとめてもらったり、ってことができるようになった。
ちょっと前まではdotfilesをいじいじして「最強の開発環境をつくるぜ!」と息巻いていたけれど、こうしてMCPをセットアップしていると、ひとつひとつのツールがもたらすインパクトが相対的にかなり大きいな〜と感じる。ちょっとした効率化の範疇じゃなくて、作業の進め方そのものが大きく変わり得る。ワークフローの刷新をやり続けているような感触。