過去のトレンドを時を越えて遡れるQiitaTimeTravelを作った話���【個人開発】

過去のトレンドを時を越えて遡れるQiitaTimeTravelを作った話���【個人開発】:

こんにちは。以前にQiitaHubを作成したKosuke(@YoshimuraKosuke)です。

突然ですがみなさんQiitaのトレンドに自分が載った日に戻ってみたくなる時ありませんか。

そう思った時のために今回このアプリを作りました。

過去のQiitaのトレンドを遡って閲覧することができるQiitaTimeTravelをリリースしました��

よかったら使ってみてください！��

��https://t.co/x9RV0P6sm4#Qiita #個人開発 pic.twitter.com/ldfUakvNm9

— Kosuke Yoshimura (@YoshimuraKosuke) 2018年12月4日

リリースしたサービス

QiitaTimeTravel-過去のQiitaのトレンドを遡って閲覧できるサービスです。

どんなサービスなのか

カレンダーで任意の日付をクリックするとその日のトレンドを見ることができます。

作った理由

以前QiitaHubというサービスの記事を書いた時にQiitaのトレンドに3日ぐらい載りました。

トレンドに載ったら嬉しくて写真とかとってtwitterに投稿するんですよね。

twitter見ててもトレンドに載った写真がたまに流れてきますし、自分もそうでした。ただトレンドは毎日更新されるので自分のトレンドに載った証拠は写真しか残りません。それはちょっと悲しいです。

もう一つ、Qiitaのトレンドはタグ表示がないというのが気になっておりました。タイトルを見るだけでは何についての記事かわからない時があります。

そこを改善したいと思ったのでQiitaTimeTravelではこのようにタグが表示されるようにしております。(12/01からタグの取得を実装いたしましたので12/01以降タグが表示されます。)

使用技術

• react.js
• Next.js
• now
• firebase
• Node.js
• 
  http://cron-job.org
• Heroku

QiitaのRSSからトレンドを取得し、QiitaのAPIを叩いてタグを取得した後firebaseにデータを保存するAPIをExpress.jsで作成。それをcron-job.orgに登録して毎朝7:00にAPIが叩かれるようにする。フロントエンド側はNext.jsでつくってnowでデプロイ。

こだわった点

プレイスホルダーローディング

ローディング画面を実装する時、くるくる回る普通のローディングでもよかったのですがプレイスホルダーローディングの方が次どんな要素が表示されるか想像できて快適な気がしたのでこちらを採用しました。

FacebookやPinterestもプレイスホルダーローディングが使用されております。

感想

開発期間は２週間ぐらいでした。

デザインはあえてシンプルにしました。最初はQiitaHubと同じように緑のグラデーションを前面に出そうと思ったのですがあえて白背景にすることでカレンダーが強調されるようにしました。

タグがみれるQiitaのトレンド、かつカレンダーで遡れるというサービスは未だないものだったのでモチベーションが続くことができました。

途中で開発に詰まったことは何度かありましたがそういう時は散歩をするか図を書くことにしたらのり切ることができました！　散歩と図を書くことはおすすめです！

最後に

今はまだタイムトラベルできる日数が少ないですがこれから毎日更新されます。

ぜひ度々QiitaTimeTravelを訪れて懐かしさに浸ってみてください！

トレンドもタグ付きで見れるのでトレンドは毎回こちらで見るのも有りだと思います��

QiitaTimeTravel: https://qiita-time-travel.work

P.S. 感想はこちらのコメント欄かtwitterでお待ちしております��