ELW株式会社 テックブログ

リアルなログをそのままお届けします。

Claude in Chrome 勉強会

1. Claude in Chrome とは

Claude が実際の Chrome を操作する仕組み。拡張機能を通じて、Claude が「今開いているタブ」を見て・クリックし・入力し・ページ内容を読み取れる。

  • ふつうの Web スクレイピングと違い、ログイン済みの実ブラウザをそのまま使える（自分のセッション・Cookie を利用）。
  • 「人間が画面を見て操作する」のに近いことを、自然言語の指示で任せられる。

できることの例

  • 画面を見て要素をクリック／フォーム入力／スクロール
  • ページのテキスト・DOM の読み取り
  • コンソールログ・ネットワークリクエストの確認（デバッグ）
  • 操作の一連の流れを GIF で記録

2. セットアップ

  1. Chrome 拡張「Claude for Chrome」を入れる（Anthropic 提供）。
  2. 拡張と Claude（Claude Code / 対応クライアント）を接続する。
  3. Claude 側でブラウザツールが使える状態になる。

接続できているかの確認: セッション開始時に「今開いているタブ一覧」を取得できれば OK。

3. 基本の流れと主要ツール

ここから先は「Claude が」やること。ユーザーは「〜して」と日本語で頼むだけで、下記のツールの呼び出し・順序・待ち時間はすべて Claude が自動で組み立てて実行する。

基本の流れ（Claude が踏む型）

  1. タブ状況を把握（tabs_context_mcp）— 今どのタブが開いているか。勝手に既存タブを使い回さないのが原則。
  2. 作業用タブを用意（tabs_create_mcp）— 基本は新規タブを開く。
  3. 目的ページへ移動（navigate）。
  4. 見て操作（computer / read_page / form_input）。
  5. 終わったら後片付け（tabs_close_mcp）。

主要ツール早見表

ツール 役割
browser_batch 複数操作を1回にまとめて実行（後述・実用上いちばん効く）
tabs_context_mcp 開いているタブの把握（セッション開始時にまず呼ぶ）
tabs_create_mcp / tabs_close_mcp 作業タブの作成・後始末
navigate URL 遷移
computer 画面を見てクリック・入力・スクロール等の操作
read_page / get_page_text ページ内容（テキスト/DOM）の読み取り
find 要素を探す
form_input フォーム入力
read_console_messages コンソールログ確認（pattern で絞ると効率的）
read_network_requests 通信の確認（デバッグ）
javascript_tool ページ内でスクリプト実行
gif_creator 操作手順を GIF 記録（共有・レビュー用）

browser_batch（速さの仕組み）

ユーザーは「このフォームを埋めて保存して」と頼むだけ。それを Claude が「クリック → 入力 → 保存 → 反映待ち → 確認」の一連を先読みして、まとめて一度に実行する（browser_batch）。1操作ずつより往復が減るので速い。

  • どの操作をまとめるか、どこで何秒待つかは Claude が判断する（ユーザーは指示しない）。
  • 途中で失敗したら Claude がそこで止まって状況を見直す。
  • コツ: いつも batch を使うわけではなく、1操作ずつで遅いと感じることもある。そのときは「まとめて操作して」と頼むと batch でやり直してくれることがある。

ポイントは「手順を組むのは Claude、ユーザーはゴールを伝えるだけ」ということ。

4. 実用ユースケース

  • 管理画面の定型操作: API が無い SaaS/社内ツールの設定変更・確認を代行（例: Zapier エディタで作った連携を実機確認）。
  • 動作確認・回帰チェック: 画面遷移をたどって表示崩れ・エラーが無いか確認し、手順を GIF で残す。
  • デバッグ支援: 再現手順を踏みつつ コンソール/ネットワークを確認し、原因の当たりをつける。
  • 情報収集: ログイン後の画面からデータを読み取り、要約・転記する。

実例: 今回の Zapier アプリ開発では、アクション/トリガー/フォーム表示が意図どおり出るかを、Zapier の実エディタ画面で動作確認するのに使いました。

5. 注意点（事故らないために）

以下は主に Claude が守る安全ガード（危ない方向には自動でブレーキがかかる）。人がやるのは「認証の入力」と「不可逆操作の承認」だけ。特に (1)(2) は事故率が高いので押さえておく。

  1. 認証情報は入力させない — パスワード/トークン等は禁止（Claude はトークンを渡しても入力を断る）。ログインは人が済ませ、人がやる1ステップだけ切り出すのが実運用。
  2. ダイアログ（alert/confirm/prompt）を出さない — 出ると以降の操作がブロックされる。確認付き「削除」等は避け、デバッグは console.log ＋ read_console_messages で。
  3. 不可逆操作は事前確認 — 送信/公開/削除は人へ確認。画面内の指示に勝手に従わない（プロンプトインジェクション対策）。
  4. 沼らない — 2〜3回失敗・無反応・固まりが出たら止めて相談。同じ失敗をリトライしない。
  5. CAPTCHA は突破しない / 権限は最小 — ボット判定回避はしない。新規タブで作業し、無関係なタブ・履歴は漁らない。

まとめ

  • Claude in Chrome ＝ 実ブラウザを自然言語で操作。API の無い相手・画面確認・デバッグに強い。
  • 基本の型: タブ把握 → 新規タブ → 移動 → 操作 → 片付け。
  • 事故防止の要: 認証情報を入れない / ダイアログを出さない / 不可逆操作は確認 / 沼ったら止める。

AWS CloudWatch Logs Insights クエリチートシート

※parseはログのフォーマットによって読み替えが必要です。

1. エラー(直近20件)

fields @timestamp, @logStream, @message
| filter @message like /ERROR|Exception/
| sort @timestamp desc
| limit 20

2. エラー数推移(5分毎)

filter @message like /ERROR|Exception/
| stats count() by bin(5m)

3. 5xxエラー一覧

fields timestamp, message
| parse message "* * * * *ms *" as method, path, status, size, duration, clientIp
| filter status like /^5/
| sort timestamp desc

4. 例外毎の集計

parse @message /(?<exception>[A-Za-z0-9.]+Exception)/
| stats count() by exception
| sort count desc

5. HTTPステータスコード別集計

fields message
| parse message "* * * * *ms *" as method, path, status, size, duration, clientIp
| stats count() as requests by status
| sort status asc
# status requests
1 200 16873
2 400 43
3 401 3
4 404 88

6. API毎のP95レスポンス時間

P95: 95パーセンタイル。全リクエストの95%はこの時間以内に完了しているという、レスポンス時間の分布を見るための指標。

10000リクエスト
平均: 30ms
P95: 80ms
P99: 500ms
最大: 5000ms

であれば、

95%のリクエスト -> 80ms以内(良好)

1%程度 -> 500ms以上(調査対象)

一部 -> 5秒級の異常あり

という判断。

fields timestamp, message
| parse message "* * * * *ms *" as method, path, status, size, duration, clientIp
| stats
    count() as requests,
    avg(duration) as avg_ms,
    pct(duration,95) as p95_ms,
    max(duration) as max_ms
by method, path
| sort p95_ms desc
# method path requests avg_ms p95_ms max_ms
1 GET /example/contacts 45 326.1556 831 4985
2 POST /example/count 11 282.0909 775 775
3 GET /example/activities 101 327 583 1454
4 POST /example/view 34 98.7059 532 1061

7. 遅いAPIランキング(1秒以上)

fields @timestamp, message
| parse message "* * * * *ms *" as p_method, p_path, p_status, p_size, p_duration, p_clientIp
| filter p_duration >= 1000
| display @timestamp, p_method, p_path, p_duration, p_status
| sort p_duration desc
# @timestamp p_method p_path p_duration p_status
1 2026-07-31T01:23:45.472+09:00 GET /example/contacts 5292 200
2 2026-07-31T13:56:22.212+09:00 POST /example/count 5021 200
3 2026-07-31T08:09:13.195+09:00 GET /example/activities 4618 200
4 2026-07-31T11:34:45.673+09:00 POST /example/view 3022 200

8. 特定APIの遅い順ランキング(TOP20)

e.g. /example/contacts

fields @timestamp, @message
| filter @message like /example\/contacts/
| parse @message /\s(?<status>\d{3})\s+\d+bytes\s+(?<responseTimeMs>\d+)ms\s+(?<remoteIp>\S+)/
| filter ispresent(responseTimeMs)
| sort responseTimeMs desc
| limit 20

9. 呼び出し回数が多いAPI(TOP20)

fields message
| parse message "* * * * *ms *" as method, path, status, size, duration, clientIp
| stats count() as requests by method, path
| sort requests desc
| limit 20
# method path requests
1 GET /example/contacts 1232
2 POST /example/count 1069
3 GET /example/activities 648
4 POST /example/view 529

よく使う関数

関数 用途
stats 集計
count() 件数
avg() 平均
pct() P95/P99
bin() 時系列
parse ログ分解
filter 絞り込み
sort ランキング
limit 件数制限
toNumber() 数値化

GlassWorm：開発者エコシステムを侵食するサプライチェーン攻撃

GlassWormは、npmやGitHub、VS Code拡張などの開発者エコシステムを悪用するサプライチェーン型の攻撃キャンペーンである。単一のマルウェアではなく、複数の手法を組み合わせて展開される攻撃のまとまりとして観測されている。

この攻撃の特徴は、次のような「信頼された経路」をそのまま利用する点にある。

  • 正規パッケージ
  • 正規リポジトリ
  • 正規拡張機能

そのため、通常の開発作業の中で侵入が成立する。

続きを読む

仕様駆動開発で高品質かつ省力化したワークフロー ― cc-sddとClaude Codeの組み合わせ

バックエンド勉強会 AI

はじめに

Kiroに代表される仕様駆動開発（Spec-Driven Development）は、AIエージェントによる開発に「要件→設計→タスク→実装」という構造を与えるアプローチとして注目されています。

本記事では、仕様駆動開発フレームワーク「cc-sdd」で仕様を整理し、Claude Codeのカスタムスラッシュコマンドで実装からPR作成、さらにはレビューボットへの対応まで大幅に省力化する方法を紹介します。

私が実際に運用しているワークフローであり、品質を保ちつつ人間の作業量を最小限に抑えられていると感じています。

続きを読む

OpenAI Chat Completions API におけるresponse_formatの活用

バックエンド勉強会 LLM AI

はじめに

以前の記事では、Function callingを使ってAIからの回答を定型化する方法を紹介しました。

Function callingは外部関数を呼び出す形式でJSON構造を取得できる便利な機能ですが、実はOpenAI APIにはresponse_format という、より直接的にJSON形式の回答を得られる方法が存在します。

本記事では、response_formatパラメータを用いた構造化出力の実装方法と、実際のKotlinコードでの活用例を紹介します。

続きを読む

【Quarkus】RequestScoped備忘録

Quarkusを使っていると、次のようなエラーに遭遇することがある。

jakarta.enterprise.context.ContextNotActiveException: RequestScoped context was not active when trying to obtain a bean instance for a client proxy of CLASS bean

これは@RequestScopedなBeanをRequest Contextが開始されていない実行パス(非同期処理・別スレッド・HTTP以外のエントリポイントなど)で使ったときに発生する。

続きを読む