Zenn
🦊

Cloudflare Wokerで動くreadability.jsを実装する

に公開
TypeScript
Cloudflare Workers
Hono
LLM
tech

n番煎じではありますが、Firefoxでも使われているヒューリスティックな本文抽出ライブラリ mozilla/readability をCloudflare Workers向けに再実装してみました。

実装の目的として、LLMへの入力として利用したり、個人で作っているHackerNewsリーダーに乗せたりしようとしています（これが現状はHTMLまるごとをLLMに与えているため非常にお金がかかっています）。そのため、最終的にMarkdown形式で本文を出力します。

Demo & リポジトリ

参考にさせていただいた素晴らしい先達たち

もう下記をありがたく使わせていただくので十分すぎるのですが、勉強目的で…

実装の特徴

Cloudflare Workersで動かすので、Workersの標準機能である HTMLRewriter のみを使用しています。依存ライブラリが他に存在しないのが特徴です（ただ、HTMLRewriterの使い方として合っているのかはあやしい）。

作り方

最近の流行りにのって、Geminiの新しいモデル（gemini-2.5-pro-preview-03-25）を使って実装しました。大まかな流れは以下のような感じです。

  1. Geminiにmozilla/readabilityのオリジナルコードとHTMLRewriterのドキュメントを与える（コードの抽出にはrepomixを使用）。
  2. 疑似コードをまず提示してもらう。
  3. 提示されたコードのおおまかなフェーズごとに順番に詳細なコードを出すように指示し、エラーが起きたらそのエラーをGeminiにフィードバックして解決。
  4. なかなかすんなり動かず、ログをどこに仕込むとよさそうか、とか、そのログを丸ごと渡して原因考えてもらったりとかまで、完全に甘えており、そのうち頭が空っぽになりそうです。
  5. ファイルを分割せよと言わない限りどんどん長くなって行くので、リファクタリングして、などとは伝えています。ファイルの分け方など、気になるところもありますが、最終的にほぼGeminiの出力そのままです。こういう小気味のいいツールは、コードにこだわりすぎずポンポン公開して行った方がいいなと自戒を込めてグッと直したい手を止めたりしています。（こだわり続けた結果途中で飽きて公開しないものが大量にあります）

ただし現状ではテストが十分に行えておらず、動作確認は最低限となっています。Cloudflare WorkersのRuntime APIに依存したライブラリのテスト方法がよくわかっておりません。@cloudflare/vitest-pool-workers あたりでいけるのかな？と思っています。

デモサイトの実装について

デモサイトの実装もほぼGeminiに任せましたが、こちらが望むコードの書き方については、Honoやzodのドキュメントから該当箇所を示して指定しました。

Gemini vs Claude

Gemini 2.5 Proは非常に賢く、Claude 3.5/3.7よりも好印象です。ClaudeはClineやWindsurfでよく使っていましたが、変更をお願いしていない箇所まで積極的に書き換えてくることが多々あり、「そこまではいいよ…」とつい指摘してしまうことがあります。その点、Geminiのほうが望んだ範囲内でコードを生成してくれるように感じています。

お読みいただきありがとうございました（この記事は人間の手で書かれたのちChatGPT 4.5が推敲しています）。

Discussion