QR Send

スマホとPCのChrome間で、URLやテキストをQRコード1回のペアリングで送り合える自作Chrome拡張。アカウント不要・無料。

使ってみる →

TECH BLOG — SCRAPING & AUTOMATION

ruby + selenium webdriver の tips を中心に、
自動化・スクレイピングの実践知を発信。

現場で踏んだエラーと、その回避パターンを具体的なコードで残しています。

QR Send
MY PROJECT

スマホとPCのChrome間で、URLやテキストをQRコード1回のペアリングで送り合える自作Chrome拡張。アカウント不要・無料。

使ってみる →
個人開発

MV3拡張のデバッグは「DevToolsを開くとservice workerが寝ない」というジレンマから始まる

MV3のservice workerはDevToolsを開いている間は寝ないため、寝てから起きる経路のバグが再現しなくなるというデバッグのジレンマがあります。offscreen documentが見えにくい問題やQR Sendで踏んだ実例も交えて書きました。
Selenium・自動化

Claude Code VSCode拡張に「Focus view」が来た:ツール実行のログをたたんでターン単位の要約だけ見る(Ctrl+Alt+F)

VSCode拡張のClaude CodeにFocus viewが追加されました。ツールコールのログをたたんでターン単位の要約だけを表示するモードで、Ctrl+Alt+Fまたはコマンドパレットから切り替えられます。裏側の仕組みと、正直に断定できない部分も含めて解説します。
Selenium・自動化

Claude CodeのHooksで、毎回手でやっていた確認作業をやめる:フォーマット・危険コマンドのブロック・完了通知の3点セット

Claude CodeのHooksを使うと、保存時の自動フォーマット・危険コマンドの実行前ブロック・長い作業の完了通知を、settings.jsonの設定だけで仕組みにできます。毎回手でやっていた確認作業を1年目エンジニア向けに実例つきで解説します。
Selenium・自動化

落ちたテストのブラウザをそのままAIエージェントに渡す。browser.bind()とplaywright-cli attachを試した

「結局AIは何を見てテストを直したんですか」と聞かれた以前Playwrightのself-healing機能を紹介した記事を書いたところ、読んでくださった方から「AIエージェントに落ちたテストを直させるのはわかったんですが、エージェントって...
個人開発

個人サイトをCloudflare Pagesで運用する:独自ドメイン・デプロイ・無料枠の実際(qrsend.appの実例)

自作のChrome拡張QR Sendの紹介サイトqrsend.appを、Cloudflare Pagesで半年以上運用してみて分かった実際のデプロイフロー・無料枠の使用感・独自ドメイン移行のハマりどころ・Search Console登録までを一次情報でまとめました。
Selenium・自動化

Claude CodeにPlaywrightを「プラグイン」として入れてみた:/plugin install playwright@claude-plugins-officialはSkills/MCPと何が違うのか

Anthropic公式マーケットプレイスに並ぶPlaywrightプラグインを実際に/plugin installで入れて、中身のファイルまで開けてみました。MCP入門・Skills回とあわせて、1年目エンジニアが「結局何を入れればいいのか」で迷わないための3つの入口の整理です。
Selenium・自動化

StorybookのポータブルストーリーがPlaywright Component Testingにそのまま持ち込めるようになった:composeStoriesで「Storybookで書いた話とPlaywrightで書くテストが別物」を終わらせる

Storybookのcompose Storiesでストーリーがそのままplaywright component testingで動くようになった話。jsdomとブラウザ前提のテストの違い、composeStoriesの使い方、ResizeObserver/Canvas/WebGLなどブラウザAPI依存コンポーネントの使い分けまで解説します。
Selenium・自動化

Playwrightで負荷テストはできるのか:ArtilleryのPlaywrightエンジンとk6の住み分け

「E2Eが書けたなら負荷テストもPlaywrightでいけるのでは」。1年目の頃、私も一度そう思いました。実際に試して分かった限界と、書いたE2Eシナリオを流用するArtillery、CIに常設するk6という2つの逃げ道を整理します。
Selenium・自動化

Claude CodeのSkillsでPlaywrightを動かす:Planner/Generator/Healerと「自分の手順を覚えさせる」Skillは何が違うのか

MCPでブラウザをAIに触らせ、/playwright init-agentsでPlanner/Generator/Healerを知り、次にClaude CodeのSkillsに出会うと「結局どれを入れればいいのか」で迷います。MCP=口、Agents=役割分担、Skills=手順を覚えさせる箱、の3層で整理しました。
Selenium・自動化

MCPサーバーは結局何を入れればいいのか:2026年の主要どころ一覧とPlaywright MCPとの位置づけ

Playwright MCPを入れてみて「MCPって便利」とわかった後に必ず来る疑問「他にどんなMCPがあるのか」に、2026年時点の主要サーバーと数字の裏取りをしたうえで答えます。filesystem・GitHub・Postgres・Slack・Notionの現在地と、Playwright MCPがその中でどこに位置するのかを整理しました。