みんなの「作ってみた」

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

2018/12/04

KeyG
KeyG
個人開発大好きな大学生。かっこいいプロダクトを作っていたい。 QiitaHub製作者(https://qiitahub.work)

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

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

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

リリースしたサービス

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

a.png

どんなサービスなのか

Screen Shot 2018-12-03 at 21.57.28.png

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

作った理由

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

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

もう一つ、Qiitaのトレンドはタグ表示がないというのが気になっておりました。タイトルを見るだけでは何についての記事かわからない時があります。
そこを改善したいと思ったのでQiitaTimeTravelではこのようにタグが表示されるようにしております。(12/01からタグの取得を実装いたしましたので12/01以降タグが表示されます。)
Screen Shot 2018-12-04 at 13.34.48.png

使用技術

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

architecture.png

こだわった点

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

architecture.png

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

感想

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

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

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

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

最後に

今はまだタイムトラベルできる日数が少ないですがこれから毎日更新されます。
ぜひ度々QiitaTimeTravelを訪れて懐かしさに浸ってみてください!
トレンドもタグ付きで見れるのでトレンドは毎回こちらで見るのも有りだと思います😀

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

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