Playwright_MCP_Serverを使い倒す

>100 Views

August 01, 25

スライド概要

profile-image
スライド一覧

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

slide-thumbnail

LIFF&LINEミニアプリの基礎&おさらい
user-img r.sasage 10.3K
slide-thumbnail

ChatGPTのLINEボットを本番運用してみた話
user-img r.sasage 9.4K
slide-thumbnail

リアル環境でLIFFアプリを爆速で起動する
user-img r.sasage 6.2K
slide-thumbnail

猫でも分かるUnreal Engineの学び方 - 超初心者向け編 - 2023 v1.0
ue4 ue5 ue-beginner
user-img エピック ゲームズ ジャパン 1.6M
slide-thumbnail

Unreal Engine5 Lumenの仕組みと肝心なところ
ue5 ue-rendering ue-lumen
user-img エピック ゲームズ ジャパン 1.3M
slide-thumbnail

Meta XR SDK(V66-74)でQuestアプリを開発
spatial anchor unity quest pro shaperecognizeractivatestate oculus integration transformfeaturestateprovider building blocks transformrecognizeractivestate ovrsemanticclassification jointdeltaprovider ovrscenemanager jointvelocityactivestate オクルージョン sequenceactivestate scene manager ambisonic depth api metaxraudiosource playerlocomotor meta xr sdk quest3 ovrplayercontroller マルチモーダル meta haptics studio direct touch ui meta xr haptics sdk ovrspatialanchor ovrtrackedkeyboard hapticclipplayer fingerfeaturestateprovider hapticclip ワイドモーションモード wmm mruk mr utility kit voice sdk jointrotationactivestate meta horizon os ui set asw application spacewarp ovr metrics tool unityscene manager colocation discovery コロケーション mx ink passthrough camera api hand tracking microgestures webcamtexturemanager passthroughcamerautils cameraviewermanager hand pose selector recorder
user-img あうぜん 1M
各ページのテキスト
1.

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

2.

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

3.

⽬次 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

4.

4

5.

5

6.

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

7.

【動画】 7

8.

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

9.

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

10.

と、そのまえに 10

11.

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

12.

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

13.

YOLOモード 13

14.

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

15.

Dev Container内でYOLO 15

16.

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

17.

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

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

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

20.

と、そのまえに 20

21.

GitHub Actionsでも Claude Code? 21

22.

22

23.

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

24.

24

25.

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

26.

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

27.

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

28.

途中まではできた… 28

29.

29

30.

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

31.

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

32.

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