Cloudflareのグローバルネットワーク上でヘッドレスChromeを実行するBrowser Rendering

curl "https://api.cloudflare.com/client/v4/accounts/{account_id}/tokens/verify" \
-H "Authorization: Bearer {api_token}"
{"result":{"id":"{id}","status":"active","not_before":"2025-11-24T00:00:00Z","expires_on":"2025-12-01T23:59:59Z"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}%  

% pnpm create cloudflare@latest browser-rendering-markdown
 
──────────────────────────────────────────────────────────────────────────────────────────────────────────
👋 Welcome to create-cloudflare v2.55.1!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.
 
Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
──────────────────────────────────────────────────────────────────────────────────────────────────────────
 
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./browser-rendering-markdown
│
├ What would you like to start with?
│ category Hello World example
│
├ Which template would you like to use?
│ type Worker only
│
├ Which language do you want to use?
│ lang TypeScript
│
├ Copying template files
│ files copied to project directory
│
├ Updating name in `package.json`
│ updated `package.json`
│
├ Installing dependencies
│ installed via `pnpm install`
│
╰ Application created 
 
╭ Configuring your application for Cloudflare via `wrangler setup` Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers
│ installed via `pnpm install wrangler --save-dev`
│
├ Retrieving current workerd compatibility date
│ compatibility date 2025-11-21
│
├ Generating types for your application
│ generated to `./worker-configuration.d.ts` via `pnpm run cf-typegen`
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo
│ initialized git
│
├ Committing new files
│ git commit
│
╰ Application configured 
 
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy`
│
╰ Done 
 
────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!
 
💻 Continue Developing
Change directories: cd browser-rendering-markdown
Deploy: pnpm run deploy
 
📖 Explore Documentation
https://developers.cloudflare.com/workers
 
🐛 Report an Issue
https://github.com/cloudflare/workers-sdk/issues/new/choose
 
💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────

dev % cd browser-rendering-markdown 
browser-rendering-markdown % code .

CLOUDFLARE_API_TOKEN=
CLOUDFLARE_ACCOUNT_ID=

pnpm add cloudflare

import Cloudflare from 'cloudflare';
 
export default {
  async fetch(request, env, _ctx): Promise<Response> {
    const url = new URL(request.url);
    const targetUrl = url.searchParams.get('url');
 
    if (!targetUrl) {
      return new Response('URL parameter is required', { status: 400 });
    }
 
    const client = new Cloudflare({
      apiToken: env.CLOUDFLARE_API_TOKEN,
    });
    const markdown = await client.browserRendering.markdown.create({
      account_id: env.CLOUDFLARE_ACCOUNT_ID,
      url: targetUrl,
    });
    return new Response(markdown, {
      status: 200,
      headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
    });
  },
} satisfies ExportedHandler<Env>;

👀
 
# GASを使うと社内だけで使えるWebサイトが簡単に作れるの知ってました？
 
2025/11/03に公開
 
147
 
102
 
[![](https://storage.googleapis.com/zenn-user-upload/topics/f13e758fdb.png)TypeScript](https://zenn.dev/sui_water/articles/502a6ef30b79e1/topics/typescript)[![](https://storage.googleapis.com/zenn-user-upload/topics/d82fbd6fb0.png)GAS](https://zenn.dev/sui_water/articles/502a6ef30b79e1/topics/gas)[![](https://storage.googleapis.com/zenn-user-upload/topics/3b81cfab49.png)Google Apps Script](https://zenn.dev/sui_water/articles/502a6ef30b79e1/topics/googleappscript)[![](https://zenn.dev/images/topic.png)clasp](https://zenn.dev/sui_water/articles/502a6ef30b79e1/topics/clasp)[![](https://static.zenn.studio/images/drawing/tech-icon.svg)tech](https://zenn.dev/sui_water/articles/502a6ef30b79e1/tech-or-idea)
 
## [](#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB) はじめに
 
2025年11月現在、Geminiを使用してGoogle Slidesを作成する「まじん式」プロンプトが話題です。  
<https://note.com/majin%5F108/n/n11fc2f2190e9>  
こちらの記事で初めて知りましたが、どうやらGoogle Apps Script(GAS)を使うと、社内限定で使えるWebアプリケーションを簡単に構築できるそうです。  
GAS自体は使ったことはありますが、Webアプリケーションを作ったことはありませんでした。  
本記事では、**実践的なサンプルプロジェクトとして**GoogleDriveにあるファイルを検索するアプリケーション(Drive検索ビューア)を構築していきます。  
開発にはclaspとTypeScriptを使用します。claspはCommand Line Apps Script Projectsの略称で、Apps Script プロジェクトをローカルで開発することができるOSSです。  
<https://github.com/google/clasp>  
また、従来のGASエディタではなく、使い慣れたVS Codeで開発を進めていきます。  
GASエディタでは困難だったClaude CodeなどのAIエージェントを組み合わせることで、モダンな開発環境でGAS製のWebアプリケーションを作成していきましょう。

ぱっと思いついた範囲ですが、このような日々の業務に密着した課題を解決するアプリケーションを、自らの手で作り出すことが可能です。  
この記事が、皆さんの「あったらいいな」を実現するための一歩を踏み出すきっかけとなれば幸いです。  
以上になります✌️
 
## [](#%E5%8F%82%E8%80%83%E3%83%AA%E3%83%B3%E3%82%AF) 参考リンク
 
<https://github.com/google/clasp>  
<https://developers.google.com/apps-script/guides/clasp>  
<https://developers.google.com/identity/protocols/oauth2/scopes>
 
147
 
102
 
[![スイ](https://storage.googleapis.com/zenn-user-upload/avatar/c80d51cd90.jpeg)](https://zenn.dev/sui_water/articles/502a6ef30b79e1/sui%5Fwater)
 
[スイ](https://zenn.dev/sui_water/articles/502a6ef30b79e1/sui%5Fwater)
 
ソフトウェアエンジニアです。
 
### Discussion
 
![](https://static.zenn.studio/images/drawing/discussion.png)
 
[![スイ](https://storage.googleapis.com/zenn-user-upload/avatar/c80d51cd90.jpeg)](https://zenn.dev/sui_water/articles/502a6ef30b79e1/sui%5Fwater)
 
[スイ](https://zenn.dev/sui_water/articles/502a6ef30b79e1/sui%5Fwater)
 
ソフトウェアエンジニアです。
 
目次
 
1. [はじめに](#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)  
   2. [この記事の対象読者](#%E3%81%93%E3%81%AE%E8%A8%98%E4%BA%8B%E3%81%AE%E5%AF%BE%E8%B1%A1%E8%AA%AD%E8%80%85)
3. [構築するアプリの概要](#%E6%A7%8B%E7%AF%89%E3%81%99%E3%82%8B%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81)
4. [なぜclaspを使うのか](#%E3%81%AA%E3%81%9Cclasp%E3%82%92%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%8B)
5. [開発環境のセットアップ](#%E9%96%8B%E7%99%BA%E7%92%B0%E5%A2%83%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97)  
※中略

 import Cloudflare from 'cloudflare';
 
 export default {
   async fetch(request, env, _ctx): Promise<Response> {
     const url = new URL(request.url);
     const targetUrl = url.searchParams.get('url');
 
     if (!targetUrl) {
       return new Response('URL parameter is required', { status: 400 });
     }
 
     const client = new Cloudflare({
       apiToken: env.CLOUDFLARE_API_TOKEN,
     });
     const markdown = await client.browserRendering.markdown.create({
       account_id: env.CLOUDFLARE_ACCOUNT_ID,
       url: targetUrl,
+      addScriptTag: [
+        {
+          content: `document.querySelectorAll('aside, header, footer').forEach(el => el.remove());`,
+        },
+      ],
     });
     return new Response(markdown, {
       status: 200,
       headers: { 'Content-Type': 'text/markdown; charset=utf-8' },
     });
   },
 } satisfies ExportedHandler<Env>;

 const markdown = await client.browserRendering.markdown.create({
   account_id: env.CLOUDFLARE_ACCOUNT_ID,
   url: targetUrl,
+  rejectResourceTypes: ['stylesheet', 'image', 'media', 'font'],
+  rejectRequestPattern: ['/^.*\\.(css|png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/'],
   addScriptTag: [
     {
       content: `document.querySelectorAll('aside, header, footer').forEach(el => el.remove());`,
     },
   ],
 });

50時間 - 10時間（無料枠） = 40時間
40時間 × $0.09 = $3.60