🗓️

時間割表を作成するサイトを更にアップデート！

2022/12/26に公開

Firebase

前書き

Deizuという「時間割表を作成するサイト」を2年前初めて、このZennで発表しました。
Deizuは僕自身にとってReactを使って初めて作ったアプリで色々と学ぶことが多くあり、今では時間ある時に徹底的にアップデートをしています。
https://deizu.vercel.app/

v3での変更

v3-poster-img
v3ポスターデザイン

StitchesとRadixの導入

Stitches.JsというCSS-in-JSのスタイリングライブラリを使ってみました。
RadixはStitchesとの互換性が非常に高く、Radixのドキュメンテーションでも例としてStitchesがデフォルトで採用されています。簡単にコンテクストメニューやモーダルを作成することができるので凄く使い心地が良かったです。

UI・UX

UIを再び変更しました。極力大幅な変更はしたく無いのですが、いままでは、はっきりとしたデザインシステムがなかったので一貫性のあるUIを作るのも苦労したと思います。
そのため、v3ではDeizuというブランディング自体をあらためて考え直しました。

dark-logo
ロゴ

ランディングページもシンプルだけどインパクトのある物にしたかったです。
landing-page
ランディングページ

今までは配色をカスタマイズする機能もありましたが、時間割表のセルの色と上手くコントラストしないため、通常のライトとダークモードのみに絞りました。また、UIは部分的に面白さかつ機能性に劣らないよう注意して作りました。

ちょっとこだわった部分

ちょっとしたアニメーションも部分的に加えました：

ロゴやランディングページの背景は全てFigmaで作成しました！
Figmaは使い勝手が良く、楽しいので、デザインや背景画像をひたすら作っていました。使っていくうちにもただ見た目を自分の好みの物だけにするのではなくデザインにおける、光の当たり具合や、素材感の重要性を後々知る事ができました。

素材感や光を意識したDeizuの3DのロゴをFigmaで作りました：
Deizuのロゴの3D版
Deizuロゴの3D版

素材感も特にRogie Kingさんが作ったNoise & Textureというプラグインを愛用して使っています！

Firestoreデータの保存方法の変更

DeizuはFirestoreでデータを保存しています。単純にドキュメントの中にコレクションを作れることができることが知らなかった為、今まではユーザーそれぞれのドキュメントに時間割表のデータをオブジェクトとして保存しています。これにおいて、時間割表のタイトルはオブジェクトのキーとして保存されていたため、今までは時間割表のタイトルを変更することができませんでした、、、

v3ではドキュメントの中に時間割表をまとめたコレクションがありそこに時間割表をそれぞれ異なるドキュメントとして保存するようにしました。その為、今までの時間割表をまだアクセスを可能にするために、v2→v3にデータを移行するプログラムをまた別で書きました。cellsの中に何かデータが保存されていないかを確認し、データが見つかるとボタンを押さないと閉じることのできないモーダルを表示させ、そのオンクリックメソッドで現在保存されているドキュメントからコレクションに移すものを作りました。

また、セルは入力されているもののみ保存されているので、map()上書き保存する上ほとんどがundefinedとなり、エレガントでは無い方法なんだろうなと思いながらv2SheetData?.data()?.sheets[sheet].cells !== undefined && ___みたいな感じで書きました。

addDoc(scheduleGridCollection,{
 title:sheet,
 sharing:false,
 cells:v2SheetData?.data()?.sheets[sheet].cells !== undefined && updatedObject,
 time:v2SheetData?.data()?.sheets[sheet].time !== undefined && v2SheetData?.data()?.sheets[sheet].time,
 date: serverTimestamp(),
 bannerImageUrl:v2SheetData?.data()?.[sheet]?.bannerImageUrl === undefined ? '':v2SheetData?.data()?.[sheet].bannerImageUrl,
 backgroundImageUrl:v2SheetData?.data()?.[sheet]?.backgroundImageUrl !== '' || v2SheetData?.data()?.[sheet]?.backgroundImageUrl && v2SheetData?.data()?.[sheet].backgroundImageUrl,
 archived:false
})
updateDoc(userDoc, {
 sheets: deleteField()
})

TypeScriptに変換

TypeScriptをNextと使うのは初めてでした。Deizuではステートマネジメントのライブラリを使用していないため、データは全てPropを通して受け渡されています。TypeScriptのインターフェースを作成することで、受け渡されるデータを一通りまとめてみる機会ができたので自分の中でも前よりかは整理できたがしてスッキリしてます。個人的には、まだTypeScriptは曖昧にしか理解していないという自覚を持っているので、今後はもっと色々なものを作って学んでいきたいと思ってます。（わからなかったり、一部めんどくさい部分のタイプはanyとやっちゃいがちでした）

Deizuで将来やっていきたいこと

今は時間割表作成に重点を置いていますが、将来は予定管理全体に携わるサイトにしていきたいという思いが強いです。特に通常のカレンダーアプリではみないニッチな問題を解決するものにしたいです。他にも時間割表作成以外の機能（内蔵されたtodo-list等）も追加していきたいと思っています。

Deizuはどんどんいいものにしていきたいです💪

最後に、ここまでお読みいただきありがとうございます!
興味があればDeizuに関する新着情報（リリースノート）は全てこちらのノーションのページにまとめています。