<p data-line="0" class="code-line">n番煎じではありますが、Firefoxでも使われているヒューリスティックな本文抽出ライブラリ <a href="https://github.com/mozilla/readability" target="_blank" rel="nofollow noopener noreferrer">mozilla/readability</a> をCloudflare Workers向けに再実装してみました。</p>
<p data-line="2" class="code-line">実装の目的として、LLMへの入力として利用したり、個人で作っているHackerNewsリーダーに乗せたりしようとしています（これが現状はHTMLまるごとをLLMに与えているため非常にお金がかかっています）。そのため、最終的にMarkdown形式で本文を出力します。</p>
<h2 id="demo-%26-%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA" data-line="4" class="code-line">
<a class="header-anchor-link" href="#demo-%26-%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA" aria-hidden="true"></a> Demo &amp; リポジトリ</h2>
<p data-line="6" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/03c9b1564797-20250414.png" loading="lazy" class="md-img"></p>
<ul data-line="8" class="code-line">
<li data-line="8" class="code-line">
<strong>デモサイト &amp; API</strong>: <a href="https://readability.akira108.workers.dev" target="_blank" rel="nofollow noopener noreferrer">https://readability.akira108.workers.dev</a>
</li>
<li data-line="9" class="code-line">
<strong>デモ用リポジトリ</strong>: <a href="https://github.com/akira108/html-rewriter-readability-demo" target="_blank" rel="nofollow noopener noreferrer">html-rewriter-readability-demo</a>
</li>
<li data-line="10" class="code-line">
<strong>ライブラリ本体リポジトリ</strong>: <a href="https://github.com/akira108/html-rewriter-readability" target="_blank" rel="nofollow noopener noreferrer">html-rewriter-readability</a>
</li>
</ul>
<h2 id="%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E7%B4%A0%E6%99%B4%E3%82%89%E3%81%97%E3%81%84%E5%85%88%E9%81%94%E3%81%9F%E3%81%A1" data-line="12" class="code-line">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83%E3%81%AB%E3%81%95%E3%81%9B%E3%81%A6%E3%81%84%E3%81%9F%E3%81%A0%E3%81%84%E3%81%9F%E7%B4%A0%E6%99%B4%E3%82%89%E3%81%97%E3%81%84%E5%85%88%E9%81%94%E3%81%9F%E3%81%A1" aria-hidden="true"></a> 参考にさせていただいた素晴らしい先達たち</h2>
<p data-line="13" class="code-line">もう下記をありがたく使わせていただくので十分すぎるのですが、勉強目的で…</p>
<ul data-line="15" class="code-line">
<li data-line="15" class="code-line"><a href="https://zenn.dev/mizchi/articles/rewrite-readability-for-ai" target="_blank">mizchiさんによる再実装記事</a></li>
<li data-line="16" class="code-line"><a href="https://mackee.hatenablog.com/entry/2025/04/13/174614" target="_blank" rel="nofollow noopener noreferrer">mackeeさんの記事</a></li>
<li data-line="17" class="code-line"><a href="https://blog.chairoi.me/entry/cloudflare-workers-go-readability-wasm" target="_blank" rel="nofollow noopener noreferrer">Cloudflare Workers + WASMでの実装 by chairoiさん</a></li>
</ul>
<h2 id="%E5%AE%9F%E8%A3%85%E3%81%AE%E7%89%B9%E5%BE%B4" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%AE%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 実装の特徴</h2>
<p data-line="21" class="code-line">Cloudflare Workersで動かすので、Workersの標準機能である <a href="https://developers.cloudflare.com/workers/runtime-apis/html-rewriter/" target="_blank" rel="nofollow noopener noreferrer">HTMLRewriter</a> のみを使用しています。依存ライブラリが他に存在しないのが特徴です（ただ、HTMLRewriterの使い方として合っているのかはあやしい）。</p>
<h2 id="%E4%BD%9C%E3%82%8A%E6%96%B9" data-line="23" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%82%8A%E6%96%B9" aria-hidden="true"></a> 作り方</h2>
<p data-line="25" class="code-line">最近の流行りにのって、Geminiの新しいモデル（<code>gemini-2.5-pro-preview-03-25</code>）を使って実装しました。大まかな流れは以下のような感じです。</p>
<ol data-line="27" class="code-line">
<li data-line="27" class="code-line">Geminiに<a href="https://github.com/mozilla/readability" target="_blank" rel="nofollow noopener noreferrer">mozilla/readability</a>のオリジナルコードとHTMLRewriterのドキュメントを与える（コードの抽出には<a href="https://repomix.com" target="_blank" rel="nofollow noopener noreferrer">repomix</a>を使用）。</li>
<li data-line="28" class="code-line">疑似コードをまず提示してもらう。</li>
<li data-line="29" class="code-line">提示されたコードのおおまかなフェーズごとに順番に詳細なコードを出すように指示し、エラーが起きたらそのエラーをGeminiにフィードバックして解決。</li>
<li data-line="30" class="code-line">なかなかすんなり動かず、ログをどこに仕込むとよさそうか、とか、そのログを丸ごと渡して原因考えてもらったりとかまで、完全に甘えており、そのうち頭が空っぽになりそうです。</li>
<li data-line="31" class="code-line">ファイルを分割せよと言わない限りどんどん長くなって行くので、リファクタリングして、などとは伝えています。ファイルの分け方など、気になるところもありますが、最終的にほぼGeminiの出力そのままです。こういう小気味のいいツールは、コードにこだわりすぎずポンポン公開して行った方がいいなと自戒を込めてグッと直したい手を止めたりしています。（こだわり続けた結果途中で飽きて公開しないものが大量にあります）</li>
</ol>
<p data-line="33" class="code-line">ただし現状ではテストが十分に行えておらず、動作確認は最低限となっています。Cloudflare WorkersのRuntime APIに依存したライブラリのテスト方法がよくわかっておりません。<a href="https://developers.cloudflare.com/workers/testing/vitest-integration/" target="_blank" rel="nofollow noopener noreferrer">@cloudflare/vitest-pool-workers</a> あたりでいけるのかな？と思っています。</p>
<h2 id="%E3%83%87%E3%83%A2%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" data-line="35" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%A2%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> デモサイトの実装について</h2>
<p data-line="37" class="code-line">デモサイトの実装もほぼGeminiに任せましたが、こちらが望むコードの書き方については、<a href="https://hono.dev/" target="_blank" rel="nofollow noopener noreferrer">Hono</a>や<a href="https://zod.dev/" target="_blank" rel="nofollow noopener noreferrer">zod</a>のドキュメントから該当箇所を示して指定しました。</p>
<h2 id="gemini-vs-claude" data-line="39" class="code-line">
<a class="header-anchor-link" href="#gemini-vs-claude" aria-hidden="true"></a> Gemini vs Claude</h2>
<p data-line="41" class="code-line">Gemini 2.5 Proは非常に賢く、Claude 3.5/3.7よりも好印象です。ClaudeはClineやWindsurfでよく使っていましたが、変更をお願いしていない箇所まで積極的に書き換えてくることが多々あり、「そこまではいいよ…」とつい指摘してしまうことがあります。その点、Geminiのほうが望んだ範囲内でコードを生成してくれるように感じています。</p>
<hr data-line="43" class="code-line">
<p data-line="45" class="code-line">お読みいただきありがとうございました（この記事は人間の手で書かれたのちChatGPT 4.5が推敲しています）。</p>


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

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

Discussion