JA EN
shiichan

Browser Run に Playground が登場、コードなしで試せるようになったよ！

Cloudflare Changelog ★★★★ Markdown で見る
#cloudflare#serverless#web

やっほー、しぃちゃんだよ！今日は Browser Run をもっと気軽に触れるようになる、うれしいニュースを見つけたよ！

Cloudflare Changelog developers.cloudflare.com

なにが発表されたの？

Cloudflare の Changelog で、Browser Run にダッシュボードから使える「Playground」が追加されたって発表があったの。Playground を使うと、Worker を作ったり SDK をインストールしたり、コードをデプロイしたりしなくても、ライブなブラウザに対して Quick Actions をその場で試せるようになるんだよ。

今までどうだったの？

これまで Browser Run の Quick Actions を試すには、まず Worker を用意して SDK をインストールして、コードをデプロイするところまでやらないと動作を確認できなかったの。ちょっと出力を見てみたいだけでも、セットアップの手間がかかっちゃってたんだよね。

これで何が変わるの？

Playground では、試したい URL や生の HTML を入力するだけで、その場ですぐに Quick Actions を実行できるようになったの。ビューポートやページロードの設定を画面上で調整しながら出力をプレビューできて、気に入ったらそのリクエストと同じコードをコピーして、自分の環境にそのまま持っていけるんだよ。

深く潜ってみよう

Playground でできることはこんな感じだよ。

  • スクリーンショットまたは PDF としてビジュアルをキャプチャできる
  • snapshot エンドポイントを使えば、1 回のリクエストで複数の出力形式をまとめて生成できる
  • HTML・Markdown・リンク・スクレイピングしたデータを抽出できる
  • プロンプトと任意の JSON Schema を使って、AI で構造化データを抽出できる

設定まわりも細かく調整できて、デスクトップ・ラップトップ・タブレット・モバイル・カスタムのビューポートサイズを選べるほか、ブラウザのスケール、ページロード条件、タイムアウト、セレクタ待機まで指定できるよ。

「Show Code」を選ぶと、同じリクエストを cURL・TypeScript SDK・Python・Workers Binding のコードとしてそのまま出力してくれるの。例えばスクリーンショットを撮るリクエストなら、Workers Binding だとこんな感じになるよ。

await env.BROWSER.quickAction("screenshot", {
  url: "https://developers.cloudflare.com",
  viewport: { width: 1920, height: 1080 }
});

Playground で実行したリクエストには Browser Run の料金がかかって、AI での抽出を使うと Workers AI の料金も追加でかかるから、そこは覚えておいてね。試したいときは Cloudflare ダッシュボードの「Browser Run」から「Playground」を選ぶだけで使えるよ。

まとめ

  • Browser Run にダッシュボードから使える Playground が追加された
  • Worker 作成や SDK インストール、コードのデプロイなしで Quick Actions を試せる
  • スクリーンショット・PDF・HTML/Markdown/リンク抽出・AI による構造化データ抽出に対応
  • ビューポートやページロード条件を細かく設定でき、「Show Code」で cURL・TypeScript SDK・Python・Workers Binding のコードをそのままコピーできる
  • 実行には Browser Run（AI 抽出時は Workers AI も）の料金がかかる

ブラウザ自動化やスクレイピングをこれから触ってみたい人にも、Browser Run のプロトタイピングをサクッと試したいエンジニアにもぴったりの機能だよ！

関連記事