Transcript
00:00:00今回はLightPandaを紹介します。これはAIエージェント用にゼロからZigで書かれたヘッドレスブラウザで、WebKitやChromiumを使用しません。そのため、ヘッドレスChromeに比べて最大9倍高速で、メモリ使用量も16分の1に抑えられています。
00:00:12Chrome DevToolsプロトコルを公開しているため、PuppeteerやPlaywrightと一緒に使えますが、ピクセル描画は行わず、Service Worker、IndexedDB、CORSといった一般的なWeb APIもサポートしていません。
00:00:22では、なぜOpenClawやCellsエージェントブラウザで使われているのでしょうか？チャンネル登録をして、一緒にその理由を探りましょう。
00:00:30LightPandaは2024年頃、Pierre氏、Francis氏、Kate氏によってリリースされました。Claude Codeが登場するずっと前、ChatGPTの人気が出始めた頃のことです。
00:00:41最初はWebスクレイピングや自動化ツールとして始まりましたが、その後AIエージェントが爆発的に普及したため、AIエージェントに注力し、資金調達にも成功しました。
00:00:51しかし、これは単なるAIブームに乗じたリブランドだったのでしょうか、それとも実際にエージェントにとって有用なのでしょうか？
00:00:56今回は、独自のWebFetchツールを備えたエージェントをClaude SDKで構築し、ブラウザエンジンとしてChromeとLightPandaの両方を使用して、性能差やその理由を比較検証します。
00:01:09LightPandaはMCPサーバーや独自のクラウドサービスも提供していますが、今回は可能な限りローカル環境で検証を行います。
00:01:16まずはLightPandaの基本的な使い方を確認してから、WebFetchツールの作成に進みます。
00:01:22手元にあるこちらのスクリプトは、Wikipediaから複数のリンクを取得するものです。
00:01:27仕組みとしては、まずLightPandaサーバーを作成し、Puppeteerを使ってそのサーバーに接続します。
00:01:32処理時間を計測するコードを組み込んでおり、Wikipediaのページにアクセスして、「参考文献」セクション内のすべてのリンクを抽出して表示します。
00:01:40どのような画面かイメージするために、Webブラウザのページのここにある「参考文献」セクションを見てみます。
00:01:44ご覧の通り、最初の参考文献リンクは「Device Atlas」で、下の表示と一致しています。
00:01:50LightPandaはすべてのリンクを344ミリ秒で発見しました。
00:01:53同じことをChromeで試すと、392ミリ秒かかります。
00:01:58これだけでは大きな差はありませんが、スクレイピングするページ数が多くなると劇的に状況が変わります。
00:02:04こちらは先ほどと似たスクリプトですが、一つ大きな違いがあります。
00:02:07Wikipediaの1ページではなく、100ページからリンクを取得するようにしました。
00:02:11定義を確認すると、HTTPS、JavaScript、Mongo、Pythonなど、Webブラウザからフェッチするページがずらりと並んでいるのがわかります。
00:02:19これをLightPandaで試すと、全体で18秒で完了しました。
00:02:23同じことをChromeで行うと、約30秒かかります。
00:02:26実行の状況によっては、60秒かかることもありました。
00:02:29では、エージェントを介して実行した場合、パフォーマンスにどのような違いが出るか見てみましょう。
00:02:32Claude SDKを使用した非常に基本的なエージェントを用意しました。ここに、このプロンプトを実行するWebFetchツールがあります。
00:02:39JavaScriptにおけるArrayのMap、Filter、Reduceの違いを要約し、MDNの特定のリンクにアクセスして情報を取得します。
00:02:48下部にはエージェントのループ処理があり、ここではツールが一つだけなので、その特定のツールが使われているかを確認するif文があります。
00:02:54もしツールが増えれば、状況は変わるでしょう。
00:02:56こちらが、ツール呼び出しが行われるたびに実行されるWebFetch関数です。
00:03:00その下にはメトリクスがあり、ブラウザのメモリ使用量を計算する関数があります。
00:03:04このプロジェクトでは、Chrome DevToolsプロトコルを使用してLightPandaとChromeの両方を利用します。
00:03:09ポートを指定してサーバーを起動し、Puppeteerがそのポートに接続してからエージェントを実行します。
00:03:14「LightPanda serve」でサーバーを起動してからエージェントを実行します。MDNから3つのURLを取得し、Claudeに情報を渡します。
00:03:22そして、Map、Filter、Reduceの違いについての回答と、メトリクスが返ってきました。
00:03:29次にChromeで試してみます。LightPandaは完全なブラウザではなく、Chromeのようなレベルのキャッシュ機能を持たないため、フェアにするためにChromeのデフォルトキャッシュも無効にしておきます。
00:03:38これなら公平に比較できます。
00:03:40同じ処理をChromeで実行します。これも同様にMDNからURLを取得し、Claudeから回答を得ます。
00:03:46しかし、ここからが劇的に異なります。
00:03:48結果を並べて比較してみましょう。左がLightPanda、右がChromeです。どちらも3回のフェッチを行っています。
00:03:54しかし、LightPandaのフェッチ時間はChromeより遥かに速く、2倍近い差があります。
00:03:59トータルの処理時間は同じですが、
00:04:01こちらをご覧ください。LightPandaのブラウザメモリはわずか66メガバイトですが、Chromeは829メガバイトです。
00:04:0710倍以上の開きがあります。エージェントのメモリ消費量もLightPandaの方が若干小さいですが、ブラウザエンジンを変えたことによる影響はそこまで大きくはありません。
00:04:17正直なところ、ヘッドレスブラウジングにChromeを二度と使うべきではありません。
00:04:20なぜなら、LightPandaはChromeより最大21倍も軽量で、高速かつ省メモリだからです。
00:04:28ただし、LightPandaの代わりにChromeを使いたくなるシナリオが一つだけあります。
00:04:33先ほどのJavaScriptの質問を、「東京のAirbnbの物件を5つ取得して」というプロンプトに変更してChromeで実行すると、期待通りの結果が得られます。
00:04:42しかし、LightPandaで同じことを試すと、Airbnbのリストが取得できていないことがわかります。
00:04:47これはAirbnbがシングルページアプリケーション（SPA）だからです。LightPandaもJavaScriptを実行するためのV8エンジンを搭載していますが、
00:04:54それは言語レベルの実行機能に限定されています。
00:04:57つまり、async/await、クロージャ、Promiseといった機能です。
00:05:00しかし、Airbnbのような複雑なSPAになると、LightPandaではレンダリングが難しく、必要な情報をすべて取得するのには苦労します。
00:05:07SPAを正しくレンダリングできないという点を除けば、将来的には改善されるかもしれませんが、
00:05:13LightPandaは、Web検索やWeb取得を行うカスタムエージェントに追加するツールとして非常に優れています。
00:05:20エージェントによるWebブラウジングといえば、もしClaude Codeに、普段ログインして使っているChromeセッションを安全に操作させたいなら、
00:05:27こちらの「Chrome MCPサーバーを使ったリモートデバッグ」についての動画をチェックしてみてください。