<p>便利なので使ってみてくださいー！</p>
<h1 id="%F0%9F%A4%96-%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">
<a class="header-anchor-link" href="#%F0%9F%A4%96-%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" aria-hidden="true"></a> 🤖 作ったもの</h1>
<p><a href="https://news.ycombinator.com/" target="_blank" rel="nofollow noopener noreferrer">Hacker News</a> のトップ記事の日本語要約を定期投稿する Bluesky のボットを作りました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4744c7c2995d9" src="https://embed.zenn.studio/card#zenn-embedded__4744c7c2995d9" data-content="https%3A%2F%2Fbsky.app%2Fprofile%2Fhacker-news-jp.bsky.social" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://bsky.app/profile/hacker-news-jp.bsky.social" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://bsky.app/profile/hacker-news-jp.bsky.social</a></p>
<p>以下画像のように、Hacker News の記事のタイトルとリンクを投稿。そして、そのスレッドに記事内容の日本語要約も投稿してくれます。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--L5h3b5q8--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/c763b55a01e57bfdefb4e422.png%3Fsha%3D8dd84ff4fd8847191e2e035a3d96fa1a3547252a" alt loading="lazy" class="md-img"></p>
<p>コードはすべてこちらで公開しています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__b5c99b3925f25" src="https://embed.zenn.studio/card#zenn-embedded__b5c99b3925f25" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp</a></p>
<h1 id="%F0%9F%92%98-%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3">
<a class="header-anchor-link" href="#%F0%9F%92%98-%E3%83%A2%E3%83%81%E3%83%99%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3" aria-hidden="true"></a> 💘 モチベーション</h1>
<p>Geek な人々が使っている Hacker News から海外の最新情報を得たい!でも英語が絶望的に苦手 &amp; Hacker News のデザインが質素すぎて購読するのがしんどい。という理由から、怠惰に情報を得られる手段として作りました。</p>
<p>今のところストレスなく情報を得られているので、作ってよかったなと思っています。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>Hacker News に興味を持った理由は、Hacker News からいつも最新の技術記事を紹介してくれる同僚の存在が大きいです。その方の投稿は、LAPRAS Tech News Talk で見られるのでぜひこちらも..!</p>
<ul>
<li>📺<a href="https://www.youtube.com/playlist?list=PLKbaztxP2P4jpdF0P5YbJNJwFabB-pksK" target="_blank" rel="nofollow noopener noreferrer">Lapras Tech News Talk</a>
</li>
</ul>
</div></aside>
<h1 id="%F0%9F%9B%A0%EF%B8%8F-%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88">
<a class="header-anchor-link" href="#%F0%9F%9B%A0%EF%B8%8F-%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> 🛠️ 技術的なポイント</h1>
<p>簡単に構成と、詰まったところを紹介します。</p>
<h2 id="%E6%A7%8B%E6%88%90%E5%9B%B3">
<a class="header-anchor-link" href="#%E6%A7%8B%E6%88%90%E5%9B%B3" aria-hidden="true"></a> 構成図</h2>
<p>構成は以前記事にした<a href="https://zenn.dev/ryo_kawamata/articles/ad4b88908f610b" target="_blank">GitHub Trending Bot</a>とほぼ同じです。</p>
<p>Firebase Cloud Functions の定期実行をトリガーに、<a href="https://github.com/HackerNews/API" target="_blank" rel="nofollow noopener noreferrer">Hacker NewsのAPI</a> から記事を取得、LangChain で日本語要約を作成し、Bluesky の API を使って投稿しています。重複投稿を防ぐために、投稿履歴は Firestore に保存しています。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--9u6fthGW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/7cb363c8bfdd07778b7896ad.png%3Fsha%3D26e12edeae41e457bf08dc56d2d895bf58b31041" alt loading="lazy" class="md-img"></p>
<h2 id="langchain%E3%81%A7%E3%81%AE%E8%A6%81%E7%B4%84">
<a class="header-anchor-link" href="#langchain%E3%81%A7%E3%81%AE%E8%A6%81%E7%B4%84" aria-hidden="true"></a> LangChainでの要約</h2>
<p>OpenAI の GPT-3.5 を LangChain の<a href="https://js.langchain.com/docs/modules/chains/other_chains/summarization" target="_blank" rel="nofollow noopener noreferrer">summarization</a>経由で使い記事の要約文を生成しています。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7293e5003d812" src="https://embed.zenn.studio/card#zenn-embedded__7293e5003d812" data-content="https%3A%2F%2Fjs.langchain.com%2Fdocs%2Fmodules%2Fchains%2Fother_chains%2Fsummarization" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://js.langchain.com/docs/modules/chains/other_chains/summarization" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://js.langchain.com/docs/modules/chains/other_chains/summarization</a></p>
<p><a href="https://js.langchain.com/docs/modules/indexes/document_loaders/examples/web_loaders/web_puppeteer" target="_blank" rel="nofollow noopener noreferrer">PuppeteerWebBaseLoader</a>を使って、記事の内容から Document を作成、それを summarization に渡すけです。LangChain すごい。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__99b93abdc64e6" src="https://embed.zenn.studio/github#zenn-embedded__99b93abdc64e6" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp%2Fblob%2Fmain%2Ffunctions%2Fsrc%2Fclients%2FopenAIClient.ts%23L16-L72" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L16-L72" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L16-L72</a></p>
<p>Web ページのテキストを取得する PuppeteerWebBaseLoader の使い方で 2 つ詰まりどころがありました。</p>
<p>1 つ目は取得テキストの指定です。<br>
当初、PuppeteerWebBaseLoader に何も option を与えず使っていたのですが、そうすると、うまく要約できないことが頻発しました。</p>
<p>PuppeteerWebBaseLoader のデフォルトでは、ページ情報の取得に<code>document.body.innerHTML</code>を使われるため、要約に関係ないページの HTML タグ含めすべてを要約対象に入っていたことが原因でした。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__4d0ca94c4c068" src="https://embed.zenn.studio/github#zenn-embedded__4d0ca94c4c068" data-content="https%3A%2F%2Fgithub.com%2Fhwchase17%2Flangchainjs%2Fblob%2F8ddf206998f323ae2785371a6d0fdfabdf5a7ba2%2Flangchain%2Fsrc%2Fdocument_loaders%2Fweb%2Fpuppeteer.ts%23L61-L63" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/hwchase17/langchainjs/blob/8ddf206998f323ae2785371a6d0fdfabdf5a7ba2/langchain/src/document_loaders/web/puppeteer.ts#L61-L63" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/hwchase17/langchainjs/blob/8ddf206998f323ae2785371a6d0fdfabdf5a7ba2/langchain/src/document_loaders/web/puppeteer.ts#L61-L63</a></p>
<p>これではトークンも無駄に消費してしまいお財布に痛いので、<code>document.body.innerText</code>を使うように evaluate オプションを指定しました。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__a12066eb2b3ea" src="https://embed.zenn.studio/github#zenn-embedded__a12066eb2b3ea" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp%2Fblob%2Fmain%2Ffunctions%2Fsrc%2Fclients%2FopenAIClient.ts%23L46-L67" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L46-L67" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L46-L67</a></p>
<p>2 つ目は<code>LoadAndSplit</code>メソッドの利用です。<br>
PuppeteerWebBaseLoader のドキュメントには、<code>Load</code>の方で記載されているので間違えた人がいるかもしれません（私😇）。しかし<code>loadAndSplit</code>でドキュメントを分割しなければ、Summarization Chain を利用する旨味がありません。</p>
<p>Summarization Chain は、分割された document を再起的に要約する Chain です。とくにページの文章量が多い場合は、ドキュメントを分割しないと、モデルの最大トークン数を超過してしまい実行時エラーが発生します。トークン制限がきついモデルを使う場合は、必ず<code>LoadAndSplit</code>を使いましょう。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__68934f097fed2" src="https://embed.zenn.studio/github#zenn-embedded__68934f097fed2" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp%2Fblob%2Fmain%2Ffunctions%2Fsrc%2Fclients%2FopenAIClient.ts%23L70" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L70" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/clients/openAIClient.ts#L70</a></p>
<h2 id="%E8%A8%98%E4%BA%8B%E8%A6%81%E7%B4%84%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E6%8A%95%E7%A8%BF">
<a class="header-anchor-link" href="#%E8%A8%98%E4%BA%8B%E8%A6%81%E7%B4%84%E3%81%AE%E3%82%B9%E3%83%AC%E3%83%83%E3%83%89%E6%8A%95%E7%A8%BF" aria-hidden="true"></a> 記事要約のスレッド投稿</h2>
<p>LangChain で作成した要約文は、Bluesky の API を使って記事のスレッドに投稿しています。<br>
実装コードはこちらです。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__729485764f90a" src="https://embed.zenn.studio/github#zenn-embedded__729485764f90a" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp%2Fblob%2Fmain%2Ffunctions%2Fsrc%2Fservices%2FbskyService.ts%23L173-L192" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/services/bskyService.ts#L173-L192" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/services/bskyService.ts#L173-L192</a></p>
<p>Bluesky の投稿文字数の条件は 300 文字なので、要約文が 300 文字を超える場合は、要約文を分割して投稿しています。自然に読めるよう<code>。</code>や<code>、</code>の句点を起点に要約文を分割しています。</p>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--gHiE3JJ9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/072e168e847c0eee0a8e9993.png%3Fsha%3D60d6fd6b9b48d9224622805ab8e3442656e8d0af" alt loading="lazy" class="md-img"></p>
<p><span class="embed-block zenn-embedded zenn-embedded-github"><iframe id="zenn-embedded__904f7114916ce" src="https://embed.zenn.studio/github#zenn-embedded__904f7114916ce" data-content="https%3A%2F%2Fgithub.com%2Fkawamataryo%2Fbsky-hacker-news-jp%2Fblob%2Fmain%2Ffunctions%2Fsrc%2Fservices%2FbskyService.ts%23L133-L171" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/services/bskyService.ts#L133-L171" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/kawamataryo/bsky-hacker-news-jp/blob/main/functions/src/services/bskyService.ts#L133-L171</a></p>
<p>分割のコードはほぼすべて ChatGPT に書いてもらいました。最高便利。</p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<p>Twitter の API 制限等々の影響か、最近 Bluesky が盛り上がってきて楽しいです。Hacker News Bot も便利なのでぜひ使ってみてくださいー！</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__165c9fe90e358" src="https://embed.zenn.studio/card#zenn-embedded__165c9fe90e358" data-content="https%3A%2F%2Fbsky.app%2Fprofile%2Fhacker-news-jp.bsky.social" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://bsky.app/profile/hacker-news-jp.bsky.social" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://bsky.app/profile/hacker-news-jp.bsky.social</a></p>
<p>自分のアカウントはこちら。ボットやツールなど色々作ってます。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e0cfeecdb8867" src="https://embed.zenn.studio/card#zenn-embedded__e0cfeecdb8867" data-content="https%3A%2F%2Fbsky.app%2Fprofile%2Fkawamataryo.bsky.social" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://bsky.app/profile/kawamataryo.bsky.social" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://bsky.app/profile/kawamataryo.bsky.social</a></p>


LangChain を使って Hacker News の日本語要約 Bluesky ボットを作ってみた

Discussion