Deno で browser-use を自作してみた (勉強用)
AI 経由でブラウザを操作する browser-use を deno で実装してみました。 元は python ですが、コア部分を自分で作れるように書き直しました。 注意: 勉強用の作例であって、本番で使えるものではないです。 以下の記事を読みながら実装しました tl;dr アクセシビリティ要素を列挙 各要素にブラウザ上でオーバーレイで操作用インデックスを書き込みつつ、インデックスに対応する xpath を作っておく claude のスクリーンショットと xpath を渡す claude に対応する xpath の操作方法を教える ツールとして対話的に実行 ステップ Tool Runner Puppeteer BrowesrTool Tool Runner まず、Tools を使って AI と対話する部分を作ります。 import { anthropic } from "@ai-sdk/a
DeepDive Lighthouse
Lighthouse のコードを読んだので、その実装を解説していきます。CLIの使い方から、直接APIを叩く方法、そして個別のAuditの実装を理解する流れを解説します。 これは Lighthouse を理解するための資料で、Lighthouseの使い方ではありません。 とはいえ、内部実装を理解することで Lighthouse についての理解が深まることでしょう。 Chrome Devtools Protocol Puppeteer が Chrome に向けて喋っているもの。Lighthouse も基本的に CDP を直接操作します。 Lighthouseの実装自体も、あんまり Puppeteer に依存せずに直接 CDP を操作する方向性を感じます。 CLI でデータを収集/解析 まず、lighthouse は計測対象である audits が存在します。これらの一覧を見てみましょう。 $
クラウドでPuppeteerをデプロイする方法：ソリューションの比較 - Qiita
Puppeteer は、ウェブページでの人間の操作をシミュレーションできる強力なツールであり、ウェブページのスクリーンショット、PDF生成、自動テスト、稼働監視、ウェブスクレイピング、コンテンツ追跡など、さまざまなユースケースに対応しています。 Puppeteer をクラウドで運用することが適しているシナリオは数多くあります。例えば： CI/CD パイプラインで API を使用して自動テストをトリガーする。 定期的にウェブサイトの可用性を確認するために cron ジョブを使用する。 大規模で分散型のウェブスクレイパーを実行する。 従量課金制でスケーラブルなサーバーレスコンピューティングは、ブラウザの自動化タスクに非常に適しています。しかし、DigitalOcean のようなほとんどのプラットフォームは仮想マシンしか提供しておらず、アイドル時間に料金を支払う必要があり（多額の費用が無駄になり
実践: await using でリソース開放
実践 いつ使うんだこれと思ってたら使う日が来たシリーズ。 今回、Deno で使ったんですが、 Node.js やブラウザでも Polyfill を入れれば動きます。 try finally で puppeteer を終了したい Deno で puppeteer を扱うために、こういうコードを書いてました。 // original import puppeteer from "npm:puppeteer@23.6.1"; import chromeFinder from "npm:chrome-finder@1.0.7"; let browser: puppeteer.Browser | null = null; try { browser = await puppeteer.launch({ headless: false, executablePath: chromeFinder(),
puppeteer をローカルプロキシとしてリクエストを監視＆モックする
パフォーマンスチューニングで、ソースコードに触らず非破壊でネットワークリクエストを書き換えて、LCPがどれだけ改善するかの実験ツールが欲しかったんですが、この目的で良いプロキシツールがないです。 世のローカルプロキシツールは DNS の設定を要求してきます。これは潜在的に意図しない状況を引き起こすので、使いたくありませんでした。 tl;dr puppeteer の page.setRequestInterception(true) でリクエストを覗いて、書き換えた ブラウザからリクエスト内容を奪う方法 テスト用HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script type="module"> const x = await fetch('https://jsonp
Puppeteerでマルチスレッドが落ちる原因 | ノード・ラボ
はじめに さくらVPSにWebスクレイピング用途でPuppeteerアプリケーションを置いて毎日定時実行していましたが、スクレイピングの関数をマルチで実行すると動いていなかったようだったのでマルチスレッドで起動する方法を調べました。 スクレイピングを関数単位でcronで時刻指定起動していたんですが、時刻がバッティングするとほぼ落ちていました。しかもchromeのプロセスが残ってそれ以降の時刻指定のジョブが動かないという。 自動ツールってめちゃくちゃ便利ですけど、動かない時のダメージがでかいんですよね。。 なお、Puppeteerの基本的な使い方はこちらの記事で紹介しています。 https://kennejs.com/entry/2019/01/18/020001 1. サーバの性能を確認する 同じ事象が発生している人はまず、サーバの処理性能を確認して見ましょう。 puppeteerってch
Functions Frameworkを使ってCloud Functionsに入門する - notebook
4月はGCP素振り月間と銘打っていろいろと触り始めたのでまぁそうだよねみたいな話多めですがやったこと残しておきます Cloud Functions + Pub/Sub + GCS Functions Framework Cloud Functionsなどの関数を開発するためのフレームワーク 公式の説明は下記 Functions Framework | Google Cloud Functions に関するドキュメント cloud.google.com Functions Frameworkを用いることでCloud FunctionsやCloud Runなどで使う関数をローカルで開発できる クイックスタートではHTTPリクエストを受け付ける関数の想定のよう とりあえずクイックスタートは数分で行えるのでやっみて「なるほど」って感じ 注: 現在、Function Frameworks は N
FirebaseのCloud Functionでpuppeteerを動かす解説 - Kesinの知見置き場
先日、GAEとCloud Functionsでpuppeteerを動かすコードを紹介しているエントリが公開されました。 cloud.google.com puppeteer、というかChromeを動かすためには実は様々な依存ライブラリをインストールする必要があるのですが、Cloud Functionでは環境そのもののカスタマイズはできなかったので今まではpuppeteerを動かすことはできませんでした。 GAEとCloud Functionでnodejs 8が使えるようになったのと同時に、実行環境のベースのイメージが新しくなった（Ubuntu 18.04とのこと）のでpuppeteerが使えるようになったようです。 ちょっと試してみる分には、先程の記事のソースコードがgithubにアップされているので自分のGCPのプロジェクトにデプロイすることで動くことが確認できると思います。 ただFir
【Firebase Cloud Functions + Puppeteer】Puppeteerのv19が動かない問題の対処法 (備忘録)
【Firebase Cloud Functions + Puppeteer】Puppeteerのv19が動かない問題の対処法 (備忘録) 問題発生OGPのサムネイル生成用に、Puppeteerを使ったCloud Functionsの関数をデプロイしようとした。 開発環境(エミュレーター)では正常に動作するのに、なぜかデプロイするとError: could not handle the requestと表示されて動作しなくなる。ログを確認すると、以下のようなエラーが出ていた。 Error: Could not find Chromium (rev. 1095492). This can occur if either 1. you did not perform an installation before running the script (e.g. `npm install`) or
puppeteer を Azure Web Apps で動かす試み 2022 - ほりひログ
Microsoft Azure Tech Advent Calendar 、9 日目の記事。 以前書いた puppeteer を Docker コンテナーを使わずに Azure Web Apps で動かすネタ、3 年もたてばさすがにうまくいかないらしい。 だいぶ変わってそう (@n0bisuke さんが奮闘中) なので、 2022 年版をまとめるか。。。 https://t.co/jNHd8xP9DT— ほりひろ loves ＜⚡＞ (@hori__hiro) 2022年11月29日 「だったら原因と対策をアドベント カレンダーのネタにでも。」とのんびりまとめてたら、のんびり過ぎて先を越されてしまった。 qiita.com かといって他のネタを思いつかないので、背景的な話、使い方的な話は👆の Qiita のエントリーを見てもらって、こっちはもう少し技術的に突っ込んだ話を。 # 結果、Mi
Cloud Functions for Firebase と Puppeteer でスクレイピング - Qiita
はじめに Cloud Functions for FirebaseとPuppeteerを使ってブラウザ操作を自動化したので、そのときやったことを書いていきます。 なぜCloud Functions for Firebase？ 最初はGCPの純粋なCloud Functionsを使うことを考えていたのですが、Cloud Functions for Firebaseの方が定期実行や開発・デプロイ方法がわかりやすいように感じたのでこちらを採用しました。 定期実行 GCPの場合：Pub/Sub を使用して Cloud ファンクションをトリガーする Cloud Functions for Firebaseの場合：関数のスケジュール設定 GCPで定期実行をさせる場合はこちらの公式サイトのように、関数定義とスケジュールの定義が別々になるようで、わかりにくいと感じました。 対してCloud Functio
Appengine(GAE/node)でSPA対応したクローラーで楽々スクレイピング - Qiita
Motivation GAE/SE環境でクローラを作ろうとすると、静的ページならどの言語でも比較的簡単に作れますが、SPA（JavaScriptで動的に生成するサイト）の場合にはJavaScriptを動かしてコンテンツを生成する必要があるため、クローリングが容易ではないです。 GAE/nodeの新しいランタイムではpuppeteerを利用してHeadless Chromeを動かすことができるようで、SPAのようなサイトに対応したクローラが作れそうなので、ざっくりと動かしてみることにします。 事前準備 ローカル環境に以下のものが必要です gcloudコマンド node（npm） puppeteerのインストール (npm install puppeteer) nodeプロジェクトの初期化を行う nodeプロジェクトを作成するディレクトリに移動し、以下のコマンドを実行します。
Puppeteerでbase64形式の画像をダウンロード保存する - 動かざることバグの如し
環境 Nodejs 10 Puppeteer 2.x やりたいこと Puppeteerでスクレイピングして画像をダウンロードする際、URLの場合はrequestsモジュール等で適当にダウンロードすればよいが、画像がsrc要素にBase64形式で最初から埋め込まれている場合はそのやり方ができない 。それでDLする方法 サンプル 例えば以下のようなサイトがあったとして <div> <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" id="myimg" /> </div> 以下のようにすると保存できる const puppeteer = req
Puppeteer 実践（キャプチャ、画像ダウンロード、CSV出力、PDF出力） | TomoOne BLOG（ともわんブログ）
画像をダウンロード画像のダウンロードができれば、かなり便利ですね。URLからファイル名を取得し、画像ダウンロードを行うというところまでを行ってみます。 Googleのロゴを取得<div id=”lga”> の中の id=”hplogo” これを使います。 // 必要なモジュールをrequire const puppeteer = require('puppeteer'); const fs = require('fs'); // The path module provides utilities for working with file and directory paths. It can be accessed using: const path = require('path'); /** * メインロジック. */ (async () => { // Puppeteerの起動.
Puppeteerでファイルをダウンロードする2022 - 詩と創作・思索のひろば
Puppeteer ってソラで書けますか？ ぼくは書けないので pptr.dev にアクセスしてコピペしてます。 Puppeetteer でファイルをダウンロードする方法はわかりやすい API としては提供されておらず、Stackoverflow を毎回見てる。これも古い方法が出回ったままだったりするので令和4年現在での最新版と思われる方法を書いておく。 例として、https://motemen.github.io/beautiful-graph-maker/ から画像をダウンロードしてみる。これは JavaScript で画像を生成してるのでブラウザのインスタンスが必要なやつだ。 Chrome DevTools Protocol 経由でダウンロードする Chrome DevTools Protocol ってのは Chrome その他のブラウザをプログラムから操作・計測・デバッグ等々するた
スクレーピング用のクローラー作成 - Qiita
概要 機械学習用にコンテンツデータを集めないと行けなくて、毎回クローラー書くの面倒だったので、汎用的なクローラーを開発 構成 仕組み LinkCrawlerで起点のURLからリンクを辿り対象のURL収集しDBに保存、 ContentsCrawlerで収集したURLを取得しコンテンツの取得を行ってDBに保存する AWS アプリケーション ・puppeteer ・node.js DataBase CREATE TABLE `site` ( `id` int(11) unsigned NOT NULL AUTO_INCREMENT, `title` varchar(255) NOT NULL, `url` varchar(300) NOT NULL, `created_at` datetime NOT NULL, `updated_at` datetime NOT NULL, PRIMARY K
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Cloud Functions Puppeteer cannot open browser
Puppeteer not working in the google app engine
Puppeteer’ing in Firebase & Google Cloud Functions
Puppeteer - Page.evaluate using moment