本文へ移動
cccskills
無料GitHub で公開

js-page-fetch

JavaScript の描画が要るページの取り方を決める。WebFetch や ctx_fetch_and_index が空のシェルや 内容の無い骨組みだけを返したとき、またはサイトが headless の user agent を 403 で弾いたときに使う。

iimuz/dotfilesスター 3(GitHub 3 + cccskills 0)
連携ツールPlaywright

実行スコア 未検証

インストール方法を見る

含まれるファイル(1)

  • SKILL.md2.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

JS 描画ページの取得

素の HTTP fetch で内容が取れないページは playwright-cli で取得する。 コマンドの使い方は同梱スキル playwright-cli にある。ここには、そのスキルが答えない この環境固有の判断だけを書く。

いつ使うか

  • WebFetch や ctx_fetch_and_index が空のシェルや骨組みだけを返した。
  • 目的の内容がアコーディオンやタブの内側にあり、初期 DOM に存在しない。
  • サイトが headless の user agent を 403 で弾いた。

同梱スキルは browser automation とテスト作成を前提に書かれているため、この用途では 起動しない。上記に当てはまるときは「情報が公開されていない」と結論づける前に試す。

この環境での決めごと

ブラウザ

macOS では --browser chrome --headed を使う。--headed を付けないと UA に HeadlessChrome が残り、 headless を弾くサイトで 403 になる。

Linux には Chrome がなく、ディスプレイもないため --headed は使えない。 --browser を指定せず chromium をヘッドレスで使うが、headless を弾くサイトは 同じ理由で 403 になりうる。回避策は未検証。そのようなサイトに当たったら --config でのカスタム UA 上書きなど別の手段を調査する。

プロファイル

--persistent、--profile、attach --cdp=chrome は使わない。既定の一時プロファイル だけを使い、ユーザーの Chrome プロファイルには触れない。ログインが必要なページは このスキルの対象外とする。

取り出し方

DOM を掻き集める前に requests と response-body でページが叩いている JSON エンドポイントを探す。表形式のデータは、レンダリング結果より元の JSON のほうが 速く確実に取れる。

出力が大きいときは設定ファイルで outputMode を file にしてファイルに落とす。

locale で表示が変わる SPA は browser.contextOptions.locale を指定する。 accept-language ヘッダだけでは切り替わらないことがある。

本文抽出ツールは記事本文だけを残すため、料金表のような UI コンポーネントを落とす。ページ全体の構造や レイアウトが要るときは本文抽出を使わず、snapshot でページ構造を、requests でエンドポイントを取る。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

コメント

ログインなしで書き込めます。使ってみた感想、質問、動かなかった環境などを気軽にどうぞ。

まだコメントはありません。最初のコメントを書いてみませんか。

送信するとすぐに公開されます。メールアドレスや電話番号などの個人情報は書かないでください。URL は 2 つまでです。

0 / 1000 文字

このフォームは reCAPTCHA で保護されており、Google のプライバシーポリシーと利用規約が適用されます。

同じリポジトリのスキル

context-mode

無料概要あり

シェルコマンドの実行、ファイル読み込み、URL の取得、検索、データの解析や変換を行うときに、 経路を通常のツールと context-mode の ctx_ ツールのどちらにするか判断するために使う。 context-mode が接続されている場合に適用する。ctx stats や ctx doctor といった "ctx" コマンドにも使う。

iimuz/dotfiles32026年10月27日 更新

diagram

無料概要あり

描く内容に合った図の種類を選んで図を書く。Mermaid の図、AWS の構成図、 マインドマップ (markmap。Mermaid ではない) を書く、直す、読み直すときに使う。

iimuz/dotfiles32026年10月27日 更新

doc-conventions

無料概要あり

文書を書く、置き場所を決める、配置をレビューするときに使う。Markdown の書式、 ADR の作法、文書の層ごとの役割と正本の原則を扱う。

iimuz/dotfiles32026年10月27日 更新

gh-ops

無料概要あり

GitHub の Issue の作成、Issue へのコメント、draft PR の作成、PR へのレビューコメントの追加に使う。

iimuz/dotfiles32026年10月27日 更新

gh-pr-resolve

無料概要あり

PR のレビューコメントを解決する、または対応するときに使う。

iimuz/dotfiles32026年10月27日 更新

git-commit

無料概要あり

コミットを頼まれたとき、plan のタスクを 1 つ終えたとき、まとまったコードの変更を 1 つ終えたときに、 次の作業に移る前に使う。

iimuz/dotfiles32026年10月27日 更新

iimuz のスキルをすべて見る

このスキルの問題を報告する