Qiita のこの記事に触発されて Google カレンダーのトレースを試みた。
- ソーシャルログイン（Google, Facebook, Github, テスト用アカウント）
- カレンダー
- スケジュールの登録、更新、削除
- wikipedia 今日は何の日
- nuxt.js
- typescript(移行中のため部分的に js)
- firebase (firestore, auth, functions)
- jest(複雑な処理部分のみテストを作成)
- firebase の課金がこわいので、読み書き回数をカウントして上限を超えた場合は firestore の rule ではじくようにしている。
- functions の定期実行で毎日読み書きカウントはリセットされる。
- Vuetify の Calendar コンポーネントを使えばほぼ Google カレンダーなものが作れるが、学習目的のため自力で作成を試みた。
スケジュール部分で苦労した（月をまたぐなど、ある一定の期間をもつスケジュールをどうやってユーザーが今表示している月内の週にマッピングするか） 現状は以下のかたち（ユーザーの入力をカレンダーにマップするために、月、週で分割していく）
- ユーザーの入力したスケジュールを月ごとに分割。firestore に保存
- firestore からスケジュール（カレンダーが表示している年のスケジュール）を取得し現在表示している月だけにフィルター
- フィルターしたスケジュールを週ごとに分割。何曜〜何曜のような形で各週ごとに分割。
- そのオブジェクトをもとにスケジュールを描画
このやり方がいいのかどうか自信ない。。 ちゃんと読み込めてないのでおそらくだけど、Vuetify のカレンダーではカレンダーの日単位でその日のスケジュールを確認しているようだった。このやり方とは全然違っていると思う。