26
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Advent Calendarの運営だってClaude Codeに任せたい —— Chrome DevTools MCPとPlaywright MCPでの自動化の記録

26
Last updated at Posted at 2025-12-17

はじめに

KDDIアジャイル開発センター(KAG)でアドベントカレンダーの運営を担当しています。
弊社では毎年、新着記事を社内Slackでお知らせして盛り上げているのですが、今年は4つのシリーズを並行して運営しています。

非常にありがたいことではあるものの、これらを手作業で一々確認し、文面を作成してSlackに投稿するのは地味にめんどくさい骨の折れる作業です。
作業時間は1日あたり5分〜10分程度ですが、毎日続くとなると負担ですし、URLの貼り付けミスなどのコピペ事故も頻発していました。

これをClaude Codeを利用し、自動化してみたところ、想定していたよりも楽になったので、Tipsとして共有します。

Qiita API v2について
短時間に大量アクセスを行うなどのサーバー負荷をかける行為は厳禁ですので、節度を持って利用してください。

前提条件

運営(管理者)は、毎日以下のような作業が発生していました。

  1. 各シリーズの記事チェック(当日分 + 過去の未投稿分)
  2. 記事タイトルとURLの収集
  3. 日付別にフォーマット整形(絵文字装飾など)
  4. 社内Slackへの投稿

手作業の場合、平日で約5分、週末分をまとめる月曜日は10分ほどかかる作業です。

問題点

たかが5分と最初は思っていたのですが、実際に運営してみると、

  • コンテキストスイッチのコスト: 業務の合間に単調作業を行うことで、集中が途切れる
  • ヒューマンエラー: リンクの貼り間違いや、リプライミスなどが頻発する

といった問題がありました。

何より、特に週末分をまとめて作る際、「面倒だな…」という気持ちが先行してしまいます。この定型作業、LLMに任せられないか?と思ったのが自動化のきっかけです。

Try & Error

今回は単に「自動化できた」という結果だけでなく、そこに至るまでのClaude Codeへの指示と、それに対する挙動が非常に面白かったので、実際のログを交えて紹介します。

Step 1: Webfetch の限界

最初は標準機能の Fetch(HTTP GET)で、具体的なテンプレートを渡して取得を試みました。

> 本日分の投稿をテンプレートを元に作成してください。

(実際のテンプレート略)

fetch先:https://qiita.com/advent-calendar/2025/kag

シリーズ1,2,3の本日分と、シリーズ4の12/1,3の分も入れてください。
テキストは今日はシリーズ4まであります!みたいな感じで考えています。 

Output:

⏺ シリーズ1の情報しか取得できませんでした。... もう一度、より詳細な情報を取得してみます。

⏺ Fetch(https://qiita.com/advent-calendar/2025/kag-2)
  ⎿  Error: Request failed with status code 404

⏺ Fetch(https://qiita.com/advent-calendar/2025/kag-3)
  ⎿  Error: Request failed with status code 404

モバイル版表示になってしまい、Series 1の情報しか取得できませんでした。
Claude Codeは勝手にURLを推測してリトライし始めました。
「kag-2」「kag-3」があるのではないか?と推測してくれましたが、Qiitaの構造はそうなっていないため失敗しました。

Step 2: 力技での解決

次に、MCP (Model Context Protocol) の Playwright を使い、ブラウザ経由でアクセスさせました。

⏺ 申し訳ございません。シリーズ2、3、4の情報を自動的に取得することができませんでした。
  投稿を作成するために、以下の情報を教えていただけますか?

⏺ User answered Claude's questions:
  ⎿  · 12/5の投稿作成に必要な記事情報を直接提供いただけますか?シリーズ2、3
     の12/5分と、シリーズ4の12/1、12/3分の記事タイトル、著者、URLをご提供く
     ださい。
     → デスクトップverを取得

これによって全シリーズの情報が表示され、無事にデータは取得できました。
しかし、ログを見ると一つ気になる点がありました。

⏺ playwright - Navigate to a URL (MCP)
  url: "https://qiita.com/advent-calendar/2025/kag"
  
  ⎿  ⚠ Large MCP response (~19.2k tokens), this can fill up context quickly

「約19.2kトークン」という巨大な消費量です。
Playwrightでページ全体をレンダリングしてHTMLをコンテキストに突っ込むと、Qiitaのアドベントカレンダーのようなリッチなページでは一瞬でトークン制限に近づいてしまいます。

Step 3: Chrome DevToolsによる細かなデバッグ作業

他の方法も試そうと思い、別のセッションでAPIドキュメントを参照しつつ、よりスマートに取れないかを試行させました。

input:

> https://qiita.com/advent-calendar/2025/kagからシリーズ1〜4の
12/16の枠の記事情報を取得して。
ドキュメント:https://qiita.com/api/v2/docs
(APIキーをマスク)
⏺ Qiita APIを使ってアドベントカレンダーの記事情報を取得します。まずAPIドキュメントを確認してから...

⏺ Fetch(https://qiita.com/api/v2/docs)
  ⎿  Received 149KB (200 OK)

⏺ APIドキュメントには記載がないようですが、...

Claude CodeはまずAPIドキュメントをFetchして読み込みましたが、「アドベントカレンダーに関する記載がない」と判断。
すると、諦めずにエンジニアが手動で行うような調査を自律的に開始しました。

1. Networkタブの調査

まず、chrome-devtools ツールを使ってページを開き、裏でAPIが呼ばれていないか調査を始めました。

⏺ chrome-devtools - list_network_requests (MCP)
     Showing 1-48 of 48...

ブラウザの検証ツールのNetworkタブを見ているのと同じ挙動です。

2. 当てずっぽうなAPIエンドポイントの推測

APIが見つからないと見るや、curl コマンドでそれらしいAPIエンドポイントを叩き始めました。

Bash(curl -H "Authorization: Bearer ..." "https://qiita.com/api/v2/advent_calendars/2025/kag"){ "message": "Not found" }

これでAPIではカレンダー情報は取れないことを再度確認しました。

3. JavaScript注入

APIがないと確定した後、Claude CodeはDOM操作スクリプトを書いて実行しました。
Playwrightのようにページ丸ごと(19kトークン)を取得するのではなく、必要な情報だけを抽出するJavaScriptをその場で書いて実行しました。

実際のログの一部:

() => {
  const series = [];
  // シリーズごとのセクションを探す
  const headings = document.querySelectorAll('h2');
  headings.forEach(heading => {
     // ...(中略:DOMを走査して "16日" の枠を探し、リンクがあれば取得する処理)...
  });
  return series;
}

このスクリプトを実行した結果、必要なJSONデータが綺麗に返ってきました。

最終的な出力結果

こうして取得した正確なデータを元に、Slack投稿用のテキストを生成してもらいました。

> pbcopyにパイプして文字列を受け取れますか?
────────────────────────────────
:qiitan: KAG Advent Calendar 2025 - Day 16 :christmas_tree:
────────────────────────────────

本日は計3記事です!
Advent Calendar 16日目の記事 :gift: はこちら!:eeveeclapgif:

[シリーズ1]
Proxmox + n8n + NPM + Tailscaleで作る、セキュアな自動化サーバの構築   (by @yu_720)
https://qiita.com/yu_720/items/8110f57ee5995f0e93b7
...(以下略)

pbcopy にパイプしてもらい、クリップボードに入ったテキストをSlackに貼り付けるだけで毎朝の作業が完了です。

導入後の効果

作業時間が5分→30秒に短縮

毎朝のルーチンが、「Claude Codeに一行指示するだけ」になりました。
週末明けのまとめ投稿も、以下のように指示するだけで完璧にこなしてくれます。

> 今日は月曜日です。土日月×シリーズ4つ分について、同様の形式で作成して

Qiita API v2について

本記事では Claude Code の MCP (Chrome DevTools/Playwright) を利用してWeb画面から情報を取得しました。

本来であれば公式の Qiita API v2 を利用すべきですが、今回の調査でAPIには「この記事はどのAdvent Calendarの何日枠か」の情報が含まれていないことが判明したため、やむを得ずブラウザ操作による取得を行っています。

もし同様のツールを開発される際は、短時間に大量アクセスを行うなどのサーバー負荷をかける行為は厳禁ですので、節度を持って利用してください。

まとめ

今回の記事を書くに当たって再確認したことは、Claude Codeは単にコードを書いてくれるだけでなく、APIがないならDevToolsで裏側を見て、それでもダメならJSを書いてDOMを解析しようという、トラブルシューティング能力を持っていることでした。

その過程で、存在しないURLやAPIを当てずっぽうに叩いてみたり、モバイル版の表示に躓いたりと、時折あれれ?と思うようなTryも見せますが、それも含めて新人エンジニアとペアプロしているような面白さがあります。

Claude Codeがどうやって正解にたどり着こうとしているか、その人間臭いログを見るだけでも非常に勉強になります。
もし同様の方がいたら、ぜひClaude Codeとのペアプロを試してみてください。

付録:MCPの導入方法

今回使用したMCPサーバーの追加コマンドは以下の通りです。

# Chrome DevTools MCPの追加
claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

# Playwright MCPの追加
claude mcp add playwright npx @playwright/mcp@latest
26
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
26
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?