Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
34
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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



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

作ったもの

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は色々と制約はあるものの簡単に作れていいですね。

いいねした日の推定方法

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

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

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

  • ⑤ 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に書かれていた類似サービスの紹介です。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
34
Help us understand the problem. What are the problem?