---
title: Playwright_MCP_Serverを使い倒す
tags: 
author: [r.sasage](https://docswell.com/user/Arahabica)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/VJPP9L1DJ8.jpg?width=480
description: Playwright_MCP_Serverを使い倒す by r.sasage
published: August 01, 25
canonical: https://docswell.com/s/Arahabica/K6EVWP-2025-08-01-154513
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/VJPP9L1DJ8.jpg)

LINEDC Claude Code 実践Meetup
Playwright MCP Serverを使い倒す
~ Dev Container・Claude Code GitHub Actionsを添えて ~
2025.07.31
捧 隆二
1


# Page. 2

![Page Image](https://bcdn.docswell.com/page/2EV2MQYGEQ.jpg)

⾃⼰紹介
捧 隆⼆ (ささげ りゅうじ)
ITエンジニア
Arahabica
@Arahabica1
⼤学院在学中に⼤阪でITスタートアップを起業。
上京後、外資系ITコンサル、フィンテック企業を経験。
2017年よりAlexaスキルやClovaスキルなど⾳声系スキルの開発に携わる。
2018年 LINE BOOT AWARDS 2018 部⾨賞受賞
2019年にボイスアップラボの創業メンバーとして参画。
2021年よりLINE API Expert。
趣味は温泉めぐり。
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/57GRGWWDEL.jpg)

⽬次
1. Claude Code ニュース
2. Playwright MCP Serverでフロントデバッグ⾃動化
3. Dev Containerで安全にYOLOモード
4. Playwright MCP を Dev Containerと合わせて使う⽅法
5. GitHubからCloud Codeを使う
6. GitHubからPlaywright MCP を使ってスクショも貼ってもらう
3


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EQVX33XJP.jpg)

4


# Page. 5

![Page Image](https://bcdn.docswell.com/page/KJ4M6112E1.jpg)

5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/LE18VGGK7G.jpg)

フロントのエラーをコピペで
Claude Codeに教えるの
ダルくないですか？
6


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GEWZLKKPE2.jpg)

【動画】
7


# Page. 8

![Page Image](https://bcdn.docswell.com/page/47Z1MZZ6J3.jpg)

Playwright MCP Server
• Playwright MCPでフロントの動作確認と修正のループをClaude Codeに
任せることができる
• Playwright MCPでフロントデバッグを⾃動化しよう︕
8


# Page. 9

![Page Image](https://bcdn.docswell.com/page/YJ6LNZZLEV.jpg)

Dev Container上だと
Playwright MCPの
ブラウザ操作が見えない
9


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GJ515WWM74.jpg)

と、そのまえに
10


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LE31N44975.jpg)

Claude Codeは
Dev Container上で動かして、
安全にYOLOモードを使おう
11


# Page. 12

![Page Image](https://bcdn.docswell.com/page/8EDXWQQ8JG.jpg)

YOLOモード
• --dangerously-skip-permissions オプションを利⽤することで、Claude
に権限確認なしでコマンドを実⾏させるモードです。
• YOLOは通称
• You Only Live Once「⼈⽣⼀度きり」
• ただし、PC上で任意の操作ができてしまうため、かなり危険
12


# Page. 13

![Page Image](https://bcdn.docswell.com/page/V7PP9LLW78.jpg)

YOLOモード
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/2JV2MQQ9JQ.jpg)

Dev Container内でYOLO
• Dev Container
• VSCodeが開発環境として利⽤するDockerコンテナを作成してくれる機能
• コンテナ内なので基本コンテナ内に被害は⽌まる
• （ホストにマウントしている場所は影響を受けるが…）
• Anthropic公式のDev Containerテンプレートがあるのでそれを参考にしよう
• https://docs.anthropic.com/ja/docs/claude-code/devcontainer
14


# Page. 15

![Page Image](https://bcdn.docswell.com/page/5EGRGWW4JL.jpg)

Dev Container内でYOLO
15


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4JQVX33R7P.jpg)

Dev Container上だと
Playwright MCPの
ブラウザ操作が見えない
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/K74M611QJ1.jpg)

Dev ContainerからホストのMCP Serverにつなぐ
ホストマシン
Playwright MCP Server
Dev Container
Claude Code
17


# Page. 18

![Page Image](https://bcdn.docswell.com/page/LJ18VGGLEG.jpg)

Dev ContainerからホストのMCP Serverにつなぐ
• ホスト
npx @playwright/mcp@latest --host 0.0.0.0 --port 9222
• Dev Container
{
&quot;mcpServers&quot;: {
&quot;playwright&quot;:{
&quot;type&quot;: &quot;sse&quot;,
&quot;url&quot;: http://host.docker.internal:9222/sse
}
}
}
18


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GJWZLKKQJ2.jpg)

GitHub Actionsでも
Playwright MCP Server
使いたい
19


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4EZ1MZZ373.jpg)

と、そのまえに
20


# Page. 21

![Page Image](https://bcdn.docswell.com/page/Y76LNZZZJV.jpg)

GitHub Actionsでも
Claude Code?
21


# Page. 22

![Page Image](https://bcdn.docswell.com/page/G7515WW9E4.jpg)

22


# Page. 23

![Page Image](https://bcdn.docswell.com/page/9J21NQQ57R.jpg)

Claude Code GitHub Actions
• インストール⽅法
• Claude Code上で↓を実⾏するだけ
/install-github-app
23


# Page. 24

![Page Image](https://bcdn.docswell.com/page/DEYZPWW67M.jpg)

24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/VJN359P1J8.jpg)

Claude Code GitHub Actions
• インストール⽅法
• Claude Code上で↓を実⾏するだけ
/install-github-app
• v1.0.44からはMaxプランも利⽤可能
• バージョン要チェック
25


# Page. 26

![Page Image](https://bcdn.docswell.com/page/YE99Y23YE3.jpg)

GitHub Actionsでも
Playwright MCP Server
使いたい
26


# Page. 27

![Page Image](https://bcdn.docswell.com/page/GE8965MK7D.jpg)

GitHub上で動作検証して、
スクショまで貼って欲しい
27


# Page. 28

![Page Image](https://bcdn.docswell.com/page/LELW9Y3PJR.jpg)

途中まではできた…
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4JM9ZND2EW.jpg)

29


# Page. 30

![Page Image](https://bcdn.docswell.com/page/PJRG6D45E9.jpg)

GitHub ActionsとPlaywright MCP Server
• 公開URLにはアクセスできる
• ただGitHub Actions上で動いているlocalhostのサーバーにはアクセスで
きない
• Claude Code Actionが別のプロセス/コンテナでPlaywright MCPを
実⾏
• ⼀時的に公開するなどすれば可能かも
• Vercel, Firebaseでブランチごとの公開URLを作る︖
30


# Page. 31

![Page Image](https://bcdn.docswell.com/page/PEXXM12XEX.jpg)

公開URLのスクショを貼ってもらうためのCLAUDE.md
31


# Page. 32

![Page Image](https://bcdn.docswell.com/page/3EKWG2M9ED.jpg)

ご清聴ありがとうございました
32


