Googleスプレッドシートのデータを読み取っていい感じにきれいな年表にしてくれるという、超地味な年表作成サービス「THE TIMELINE（ザ・タイムライン）」を運営して早3年くらいになるのですが、このたび初めての大幅リニューアルを実施しました。

ありがたいことに界隈では（どこ？）おそらく最も使われるサービスになっており、気づけば毎日年表が作られるようになってきました。

まだ年表というものを作ったことないという人も多いかと思いますが、実はすごく楽しいのでだまされたと思ってぜひ遊んでみてもらえたらうれしいです。

そもそもどんなサービスだったかというと

Googleスプレッドシートのデータを読み取って、自動でいい感じの年表を表示してくれるサービスです。

たとえばこんな感じのスプレッドシートが、

こんな感じの年表になります。

ポイントとしては、

という感じで、大事なところはほとんど全部スプレッドシートにお任せしているので安心です。

リニューアルでよくなったところ

今回はシステムのリプレイスがメインなので機能追加とかはそんなにないのですが、多少よくなったところもあります。

🚧 シートの読み込みエラーがだいぶ減りました

エラー制御を改善したのとシート連携の手順も簡略化できたので、かなりエラーが減らせたんじゃないかと思います。

旧バージョンでうまく表示されなかったという方も、ぜひ再度お試しいただければ幸いです。

🚀 表示速度が早くなりました

Static Generationですからね。わーい。

📱 スマホでもグループ見出しが見えるようになりました

旧バージョンではグループの見出しが独立して幅を取っていたため、スマホだと見づらくなっておりました。新バージョンではこれが改善され、スマホでも多少見やすくなったかと思います。

しかしやっぱり年表は大きい画面の方が見やすいし楽しいのでPC推奨です。

🗞 グループごとに折りたたみできるようになりました

地味な改善なのですが、グループ見出しをクリックするとグループ単位で折りたたみできるようになりました。 グループが多いときとかに便利かもしれません。

旧バージョンからの移行ガイド

旧バージョンをお使いいただいていた方への移行ガイドです。 といっても基本的には特に気にせずそのまま使用いただけるのですが、過去年表を今後も更新したい場合のみご注意ください。

🛠 旧バージョンで作成した年表の更新について

旧バージョンで作成した年表は移行後も問題なく表示されます。 ただスプレッドシートの読み取りURLが変更になった関係で、今後シートを更新しても旧バージョンの年表には反映されなくなります。

旧バージョンで作成した年表を今後も更新したい場合、お手数ですが新バージョンの年表作成画面から再度シートのURLをインポートしてください。

システム的な話

今回のリニューアルでは、愛用していたRiot.jsを離れてNext.jsを採用しました。 v4へのアップデートはついていけなかったよ。。ごめんよRiot。。。

というわけで新しいシステム構成はこんな感じです。

年表表示に必要なデータは全部スプレッドシートに保存されてるので、年表表示画面を本体と独立したNext.jsアプリとして作っているのがこだわりポイントです。 年表表示画面は極力依存を減らし、本体で使ったMaterialUIやfirebaseも使わない構成にしました。 シンプルに仕上がって大変満足です。

ちなみに、こんな感じ↑でみんなのシステム構成を1ページずつまとめた『個人Webサービスシステム構成事典 』が今度の技術書典9で無料頒布されます。（THE TIMELINEの構成図も掲載させてもらってます！） なかなか見れない情報がいっぱいあって楽しいと思うので、興味のある方はぜひ読んでみてください。

まとめ

という感じで、ひとまず無事にリニューアルできたっぽいのでよかったです。 まだNext.js理解しきれてなくてあやしいところもあると思うので、不審な挙動など見かけたらぜひご連絡ください。

それではよい年表ライフを！