技術ブログまとめサイトに wada-blog が上位独占してしまったので Deno Fresh で直した話
https://gyazo.com/1b3938e047b001201b82225c62681338
大稻埕/迪化街
はじめに
私が所属するモニクルでは、開発チームの各メンバーが書いた技術ブログをまとめたサイトがあります。 まとめサイトを作るに至った経緯や、作成の流れについては同僚の/wadata/nkzn.iconnkznさんが書いたこちらの記事が参考になります。 さて、私はScrapboxのまさにこのプロジェクトに記事を書いているのですが、オーナー（つまり自分自身）のアカウントでログインしていると、一般的に他のブログページにある、いわゆる「閲覧モード」が存在せず、記事の閲覧と編集を常に行うことができます。それがScrapboxのいいところの一つではあるのですが、カジュアルに記事を修正して行った時に起きてしまった悲劇と、それをDeno Freshで解決してみた話を紹介します。
wada-blog が上位を独占？！
ある日、ふと技術ブログまとめサイトをみたところ、自分が過去に書いた記事がすべて新着記事として上位に上がってきてしまう事態が起きていました。
https://scrapbox.io/files/63006d222e4a5c001fdbff59.png
なぜこんなことになってしまったのかと考えてみたのですが、一つ心当たりがありました。それは「過去に書いた記事を一気に編集してしまった」ことでした。ちょうどこの時Scrapboxでカスタムのスタイルを当てて見た目を変更していたため、古い記事のタグの配置を変えたりしてレイアウトを整えていました。それが仇となり、過去記事が上位を独占してしまいメンバーに申し訳ない気持ちになりました。そこで、まずは根本的な原因を調査することにしてみました。
Scrapbox の RSSフィード は RSS 2.0 ベース
技術ブログまとめサイトでは、各個人のブログページのフィードを登録して新着記事を取り込むようになっています。RSS 1.0/2.0, ATOMの仕様が存在しますが、どの仕様に準拠したRSSでもパース可能なrss-parserを使ってJS Objectに変換した上で記事の発行日時にソートしています。また、ScrapboxのRSSはRSS 2.0を使っているようです（wada-blogのRSS）。RSS 2.0 の仕様を読んでみると、各記事を表現するitem要素の中にある日時はpubDate(発行日時）しかありません（ちなみに、ATOMの仕様には作成日時と更新日時という項目があります）。また、Scrapboxの記事を更新した場合はpubDateが更新されるということも判明しました。これを根拠にしてデータを定期的に都度作成している技術ブログまとめサイトでは、Scrapboxで編集した記事の発行日時が更新されて新着記事に上がってしまうということがわかりました。 pubDate だけを上書きしたRSSフィードが欲しい
ここで、まずはこの問題を解決する方法を考えてみました。ScrapboxのRSS自体は、自分ですぐに触れるものではないのでどうしようもありません。また、技術ブログまとめサイトのロジックを変えることも検討しましたが、まとめサイト側で作成日時がわかるデータを保持していないため、すぐにはできそうになく諦めました。そこで、ScrapboxのRSSのうち、pubDateだけ作成日時に差し替えたRSSサーバを別途立ち上げることを検討しました。Scrapboxには、RSSとは別にAPIも存在していてページの一覧をGETで取得することができます（wada-blogのAPI）。このAPIレスポンスには各記事の情報の中に作成日時が含まれるため、発行日時だけ差し替えたRSSアプリを構築することができそうです。 Deno の Fresh を使って爆速でRSSフィードを実装する
そこで、今回はDeno用のWebフレームワークであるFreshを使ってRSSフィードを実装してみることにしました。Freshは2022/07/28 に1.0がリリースされたばかりの新しいフレームワークで非常に軽量です。クライアントに送信するJSはデフォルトで0KBで、リクエストに応じて edge サーバでレンダリングをして返すのが特徴です。まだ安定版がリリースされたばかりのため、プロダクションで使われているケースはあまり多く知りませんが、フレームワークの特徴からしても静的なLPや動きの小さなWebページには適していて、実際にDeno公式ブログでは使われているようです。今回作成するアプリは1ページのみで xml を返すだけなので、フレームワークとしてはなるべく小さくて開発体験が高速なツールがいいなと思っていました。その点でFreshはWebpack等のプレビルドを行う必要がないためアドバンテージがありました。また、ファイルベースルーティングを使用している点も気に入りました。私は普段Next.jsベースのアプリケーションを開発しているため、同じシステムを採用しているのは馴染みやすいです。もちろん、ただ単純にDenoやDeno Deployを使ってみたかったという理由もかなり大きいです。 そして、最終的に完成したのはこちらです。
ソースコードはこちらにアップしています。
作り始めてから数時間で無事に最低限の実装が出来上がりました。本当にpubDateを差し替えただけのミニマムな実装です。デプロイ先にはDeno Deployを利用しています。プッシュした後にビルドステップを踏まずにデプロイが終わるのは凄くいい体験ですね。 RSSを切り替えてまとめサイトを再度確認してみると、wada-blogが元々あった場所に収まってくれていました。これで一安心。
https://scrapbox.io/files/63006d610d5da0001d9611f6.png
まとめ
今回は、意外なところからRSSフィードを作ることになった経緯とその結果を中心にまとめてみました。次回は、Freshを使う上で調べたことについてまとめていきたいと思います。それでは！
https://i.gyazo.com/51454271bc5520c96d424a29a19498c4.png https://twitter.com/share?url=https%3A%2F%2Fscrapbox.io%2Fwada-blog%2F%25E6%258A%2580%25E8%25A1%2593%25E3%2583%2596%25E3%2583%25AD%25E3%2582%25B0%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%25E3%2582%25B5%25E3%2582%25A4%25E3%2583%2588%25E3%2581%25AB_wada-blog_%25E3%2581%258C%25E4%25B8%258A%25E4%25BD%258D%25E7%258B%25AC%25E5%258D%25A0%25E3%2581%2597%25E3%2581%25A6%25E3%2581%2597%25E3%2581%25BE%25E3%2581%25A3%25E3%2581%259F%25E3%2581%25AE%25E3%2581%25A7_Deno_Fresh_%25E3%2581%25A7%25E7%259B%25B4%25E3%2581%2597%25E3%2581%259F%25E8%25A9%25B1&text=%E6%8A%80%E8%A1%93%E3%83%96%E3%83%AD%E3%82%B0%E3%81%BE%E3%81%A8%E3%82%81%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AB+wada-blog+%E3%81%8C%E4%B8%8A%E4%BD%8D%E7%8B%AC%E5%8D%A0%E3%81%97%E3%81%A6%E3%81%97%E3%81%BE%E3%81%A3%E3%81%9F%E3%81%AE%E3%81%A7+Deno+Fresh+%E3%81%A7%E7%9B%B4%E3%81%97%E3%81%9F%E8%A9%B1
宣伝
株式会社モニクルでは、はたらく世代・子育て世代が抱えるお金や資産運用に関する不安や悩みを解決するお手伝いをさせていただき、現在から老後に至るまでの資金計画や最適なポートフォリオの提案を行っております。