【非公開×公開】新感覚の勉強記録アプリ「Study Vault」を作ってみた 144時間


<div style="margin: 0; padding: 0; line-height: 0;">
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/30238eee-1f87-5b3c-b796-a7fcaad7e70b.png" alt="画像1">
    <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/6bb57fc3-1241-6bec-8e8d-3cd0a1329365.png" alt="画像2">
  
  
  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/baf345ac-34ec-1de8-ba7f-9523b649b55c.png" alt="画像2">
</div>















# はじめに
## アプリの概要
本アプリは、ユーザーの勉強時間を管理・記録する非公開×公開を組み合わせた勉強アプリです。**毎日ランダムな時間（12:00〜21:00）に勉強時間が公開される**までは他のユーザーの勉強時間が分からない仕組みとなっています。ここから、「他の人はどのくらい勉強しているんだろう...」という不安感を利用して「勉強しよう」という気持ちを引き立てるアプリになっています。

## 目的
このアプリを開発しようと思ったきっかけは、大学受験時に使用していた勉強記録アプリの経験からです。以前のアプリでは勉強時間をリアルタイムで共有できましたが、他のユーザーがあまり勉強していないと「自分も勉強しなくて良いかもしれない」と安心してしまうことがありました。この課題を解決するために、プログラミングを学んだ今、自分自身の手で新しい勉強記録アプリを作りたいと考え、開発を始めました。

## Study Vaultの由来
このアプリのコンセプトは、勉強記録を特定の時間まで非公開にする点にあります。  
**Vault**は日本語で「金庫」という意味があり、**勉強記録にロックがかかっている「非公開である」**
という特徴を表現しています。また、金庫は大切なものを蓄える場所です。このアプリも、勉強記録を大切に蓄えていくという点で**Study Vault**という名前にしました。
# 課題
- 他のユーザーの勉強時間が公開されることで、ユーザーのモチベーションに悪影響を与える可能性がある  
- 競争心を煽るような勉強記録アプリを実現したい  

## 解決策

### 勉強時間の非公開化
写真共有アプリ「BeReal」のように、毎日ランダムな時間に写真を投稿する機能から着想を得て、特定の時間まで勉強時間を非公開にするアイデアを採用しました。これにより、他のユーザーの勉強状況が分からず、自分自身の勉強意欲を維持することが期待できます。また、特定の時間までに多く勉強し、他のユーザーを驚かせるなど、勉強を継続する動機付けにも繋がります。

### 競争心を刺激する機能

月間・週間ランキング機能を実装し、ゲーム感覚で勉強に取り組めるよう工夫しました。ランキングは全ユーザーの中での順位を表示するため、世界中のユーザーと競い合うことができ、より高いモチベーションを維持することが可能です。

# アプリの主な機能

- **勉強時間の記録**: ストップウォッチ機能または手動入力で教材ごとに勉強時間を記録  
- **勉強時間の非公開管理**: 勉強時間は設定された時間まで非公開  
- **教材の登録**: 使用する教材を登録・管理  
- **目標設定**: 目標とする勉強時間を設定  
- **フォロー機能**: 他のユーザーをフォローして進捗を確認  
- **ランキング機能**: 月間・週間の勉強時間ランキングを表示  
# 技術スタック
## アーキテクチャー図

![アーキテクチャー図](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/576aba47-e643-40ab-7106-5a94e83f3ba0.png)


## 技術選定

## フロントエンド

- **Flutter**: クロスプラットフォーム開発を効率化するために選定。iOSとAndroidの両方に対応可能。

## バックエンド

- **Firebase Authentication**: ユーザーのログイン認証を管理  
- **Firebase Firestore**: データベースとして使用  
- **Firebase FireStorage**: ファイルストレージを担当  
- **Firebase Functions**: ランキング集計 & 毎日の公開時間を設定 & 公開時間になったら通知を担当 
- **Python**: Funtionsのバックエンドの処理を記述
## 選定理由

### Flutter

- **開発効率の向上**: iOSとAndroidのネイティブ言語を個別に開発する時間を節約できるため  
- **一貫性のあるUI**: クロスプラットフォームで統一感のあるユーザーインターフェースを提供可能  

### Firebase

- **統合管理**: 認証、データベース、ストレージ、サーバーレス機能を一つのプラットフォームで管理でき、予算管理が容易  
- **APIキー管理の簡素化**: Firebaseに全てを集約することで、APIキーの管理が容易になる  
- **NoSQLの学習**: リレーショナルデータベースしか経験してこなかったので、NoSQLを学んでみたいと思ったから
- **無料枠**: firebaseの利用しているサービスには無料枠があり小規模の時にランニングコストがかからない

# データベース設計

![スクリーンショット 2024-11-24 19.54.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/b0acb807-f7ea-048a-840e-51861cd6cc9e.png)

![スクリーンショット 2024-11-24 19.55.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/31d656be-0238-befa-f8e2-35695b3ac1c1.png)

# 初期のデザイン案
###### ※画面の遷移を表す矢印が消えてしまっています
![スクリーンショット 2024-11-24 17.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/237fa103-74c6-afb7-8b55-649054352c0d.png)

![スクリーンショット 2024-11-24 20.12.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/d3f2c0fd-3fd0-3572-5b25-4a05489caa17.png)

# アプリ画面一覧
![スクリーンショット 2024-11-24 18.52.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/3cb8b99d-74fa-6b9b-667d-538d784f285f.png)

![スクリーンショット 2024-11-24 18.52.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/d0db4b13-378e-e2f9-da9e-5454209ee0c8.png)



# 一番苦労した点
### データベースの読み取り回数、書き込み回数の増加
Firestoreはクエリの処理時間ではなく、読み取り回数や書き込み回数によって費用が計算されます。初期段階では、アプリの実装によって非常に多くの読み取り回数が発生してしまい、課題となりました。


## 解決策
- **非公開時間中の勉強記録をすぐにデータベースに送信しない**  
非公開時間中であれば、他のユーザーが自分の今日の勉強時間を参照することはありません。この特性を利用し、非公開時間中はクライアント側の軽量なデータベースに勉強記録を一時保存するようにしました。これにより、自分の今日の勉強時間を参照することは可能なまま、データベースへの読み取り回数や書き込み回数を大幅に削減しました。

- **キャッシュの利用**  
一度取得したデータについてはクライアント側でキャッシュを作成するようにしました。例えば、ユーザーアイコンのような頻繁に更新されないデータについては、キャッシュを利用することでデータベースへのアクセスを減らしました。

- **データベース設計の工夫**  
勉強時間が記録された際にデータベースの「その日の勉強時間」だけを更新し、週ごとの勉強時間の更新は毎日0時にCloud Functionsを利用してスケジューリング処理を行う設計に変更しました。また、「その日の勉強時間」を保存するドキュメントは、その日に勉強したユーザーのみに作成する仕組みを採用し、無駄な書き込みを削減しました。この工夫により、週ごとの勉強時間の更新処理は、その日に勉強したユーザーにのみ行われるようにしました。

![Firestore設計](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3788663/7fddfae7-0bf5-42e8-2110-ba1dbe0245c9.png)

# まとめ
本アプリは、勉強時間の非公開化と競争心を刺激するランキング機能を組み合わせることで、ユーザーの勉強意欲を高めることを目指しています。FlutterとFirebaseを活用することで、効率的かつ効果的な開発を実現し、ユーザーにとって使いやすい勉強管理ツールを提供します。今後の開発を通じて、さらに多くの機能を追加し、ユーザーのニーズに応えていく予定です。