[個人開発] 続編-YouTubeで集中した時間を振り返るWebアプリ
🌱 はじめに
こちらのアプリの姉妹アプリのお話になります。
今回も個人開発で アナリティクスWeb アプリを開発しました。
その内容についてご紹介します。
実際の私のアナリティクスの内容になります
下記リンクから アナリティクスの内容を確認できます。
🌱 サービス説明
1. 全期間
シンプルに何のデータがわかるように直観的なアイコンや色,テキストを選定しました。
「データ更新日」も記載しいつ更新された情報なのか を明示するようにしました。
2. 過去 7 日間
過去 7 日間の「集中日数」「7 日平均」「最高記録」の概要の表示
ページネーション機能で「←前週 」, 「次週→ 」
さらに過去の週次のデータを確認できます。
3. 過去 30 日間
過去 30 日間の「集中日数」「30 日平均」「最高記録」の概要の表示
ページネーション機能で「←前月 」, 「次月→ 」
さらに過去の月次のデータを確認できます。
🌱 コンセプト
1. 運用コスト
YouTube が収益化もまだなので、サーバー代を抑えるためにGitHub Pageを活用しました。
レポジトリがpublicである条件があります。
また、GitHub Pageは静的ページ(HTML,CSS,JS)しか利用出来ません。
そのため、Next.JSのStatic Site Generation (SSG)を活用してこの条件をクリアしました。
Static Site Generation (SSG)とは、ビルド(npm run build)時に HTML と CSS を生成する機能
計測アプリとアナリティクスアプリで共通の DB を持つ必要があります。
以前までは、ローカルでSQLiteでデータを管理しておりました。
今回Supabaseを活用しました。
無料枠だと、データベース容量：500 MBらしいです。
今回のアプリは 1 年分で数千〜1 万ユーザー規模を記録できる見込みであり、無料枠で運用可能と判断した。
2. 運用の手間
アナリティクスアプリにデータを追加して、毎日ビルドする必要があります。
そこでGitHub Actionを活用しました。
GitHub Actionの大まかな流れ
- 日本時間の毎朝 4 時に
GitHub Actionが起動する -
GitHub ActionがSupabaseに昨日のデータだけを取得する - 用意したスクリプトを通じて昨日のデータを専用の JSON 形式に変更する
-
JSONファイルをmainブランチに自動 push する - 自動 push 後、SSG で静的ページを作成
- 静的ページを
GitHub Pageにデプロイする
3. シンプルな設計
GitHub Pageは静的ページ(HTML,CSS,JS)なので、ログイン/ログアウト機能を実装できません。
しかし、他の視聴者の情報を簡単に閲覧できてしまうのはサービスとして不完全である。
そこで、YouTube 側で発行しているチャンネルIDを活用しました。
チャンネル ID はユニークな情報であり、私が管理する必要がないのもいいですね！
また、チャンネル ID は私と本人しか調べることができないので、認証情報として適していると判断した。
チャンネル ID はユニークであり、運営側で管理する必要がない点も利点である。
※チャンネル ID は、チャンネルのマイページから調べる事ができます。
※登録者がいるチャンネルなら、YouTube 上で検索してマイページを見つけることができる
チャンネル ID を用いることで、他人に閲覧されず自分だけが自分のデータを参照できる。
Discussion