Qiita で いいね したら草生えるページ(β版)を作った話

ユーザー毎のいいねした日時をGithub風カレンダーヒートマップで可視化するページを作りました。

[2019/06/24] リニューアルしました。 [【個人開発】「Qiitaでいいねしたら草生えるページ」をリニューアルして表示時間を数十秒→1秒に改善した - Qiita](https://qiita.com/tag1216/items/fc719fe1d71d0bf1c264)

作ったもの

Qiiner
Qiitaでいいねしたら草生えるページ - Qiiner

データはユーザーの いいねした記事　のページから取得しています。
ただし、いいねした日はこのページからはわからないので、いいねした記事の投稿日から推測します。(詳細は後述)

データ取得には数秒から数分程度かかりQiitaへの負荷も高いので、取得結果は数時間キャッシュして再取得は行わないようにしています。

作った動機

Qiitaいいな〜ランキングでも書きましたが、Qiitaでは記事を書くだけでなく他の人が書いた良い記事にいいねしていく事もとても大切だと思っています。
可視化される事でいいねすることへのモチベーションが上がるのではないかと思い作ってみました。

使っているもの

• Firebase
  • Hosting
    • フロントWebアプリ
  • Functions
    • Qiitaからデータを取得してスクレイピングする処理
  • Firestore
    • Qiitaから取得したデータのキャッシュ
    • 同時実行数制限のためのキュー
• フロント(Firebase Hosting)
  • TypeScript
  • React
  • Material-UI
  • react-calendar-heatmap
• バックエンド(Firebase Functions)
  • TypeScript
  • node-fetch
  • cheerio

Firebaseは色々と制約はあるものの簡単に作れていいですね。

いいねした日の推定方法

• いいねした記事のページはいいねした日時の降順(新しい順)で表示されている
• 記事の投稿日より前にいいねすることはできない

この２つの前提を元に以下のロジックでいいねした日を推定しています。

例えば、いいねした記事の投稿日が以下のようになっていたとします。

• ⑤ 2019/01/17
• ④ 2019/01/11
• ③ 2019/01/10
• ② 2019/01/16
• ① 2019/01/15

いいねした日は以下のように推測していきます。

• 一番古い①は投稿日をいいねした日とします。
• ②の投稿日は①以降なので、②の投稿日をいいねした日とします。
• ③の投稿日は②よりも前なので、②の投稿日をいいねした日とします。
• ④も投稿日が②よりも前なので、②の投稿日をいいねした日とします。
• ⑤の投稿日は②以降なので、⑤の投稿日をいいねした日とします。

No.	投稿日	いいねした日の推測日
⑤	2019/01/17	2019/01/17
④	2019/01/11	2019/01/16
③	2019/01/10	2019/01/16
②	2019/01/16	2019/01/16
①	2019/01/15	2019/01/15

正式版に向けて

今回作ったものはいいねした日は正確ではないのでβ版という扱いにしています。

Qiitaいいな〜分析 で書いたように Qiita API で記事のいいねを取得すれば正確な日時がわかるので、正式版ではこちらから取得する予定です。

参考

参考までに、過去にQiitaに書かれていた類似サービスの紹介です。

• Qiitaで草を生やせるGitHubならぬ「QiitaHub」を作った物語【個人開発】
• Qiitaの投稿アクティビティをGitHubのように表示するヤツ
• Qiita API を使って GitHub 風味のマイページを作ってみる

これらは記事を書くと草が生えるサービスです。