ポートフォリオとしてNotionに埋め込むために作成したもの。

1. ポートフォリオ
「こつこつ」の説明資料
Fusic採用担当者様へ 森優斗

2. 概要
送らせていただいたソースコードのアプリ
『こつこつ』
については個人開発ではなく、
ITスクールRareTECHのハッカソンでの作品です。
４人チームで２ヶ月で開発し、私は主に
デザイン、UI設計、フロント
を担当しました。
それ以外の部分でも技術的にキャッチアップできた部分が
沢山あるので、全体の説明資料を送らせていただきます

3. 開発方法
・使用技術とツール
・git運用について
・情報共有方法

4. 使用技術については、デファクトスタンダードであり、他メンバーが必要な技術を身につけるために
django、Dockerを選択しました。ス
マホで手軽に利用してもらいたいため、
TailwindCSSを利用して簡単にレスポンシブデザインを作成できるようにしました。後のスマホ
アプリ化や、後のFusic様へのエントリーを考えると
Reactで開発したかったのですが、期間と人数とメンバーの技術力を鑑みて使用
せず、バニラのJavaScriptで開発しました。

5. リモートリポジトリ
ローカルリポジトリ
Git運用
GitHub Flow
に準じて開発しました
develop
develop feature
feature
pull
push
merge
main
merge
常に最新の状態
デプロイ時に使用
branch

6. GitHubの実例
粒度の細かいタスクは
Issuesで管理をしました。

7. GitHubの実例
プルリクにはテンプレート文をいれました。

8. 情報共有
主にNotion,Ovice,Mattermost
を活用しました
共有ページを作成
週１回のミーティング、
不定期の共同作業に活用
各種連絡に活用
ZONEによって各自の進捗の把
握と繋がり

9. Notionの実例
チームの共有ページを作成しました

10. Notionの実例
基本的な進捗管理はノーションにて行っていましたが、途中から issueメインにシフトしました

11. Notionの実例
粒度の大きいタスクはノーションのガントチャートで管理しました

12. 開発したアプリ
『こつこつ』について

13. 継続補助アプリ
’’こつこつ’’
『塵も積もれば山となる』
『亀型人間が最後は勝つ』
分かってはいる、、、
けど、こつこつ継続して努力することは難しい
「そんな人の助けになりたい」
というコンセプトで作成しました

14. 要件定義（誰の？）
if 'file' in request.files:
# データの取り出し
file = request.files['file']
# # ファイル名がなかった時の処理
# if file.filename == '':
# flash('ファイルがありません ')
Miroを使ってチームで要件定義を行いました。

15. 要件定義（どんな問題を？）
自分が当初考えていたアプリとは良い意味で変わってきて楽しかったです。

16. 要件定義（どう解決する？）
最終的には自分だけでは絶対に出てこなかったアイデアも加えられ、このような形になりました。

17. 要件定義
誰の
こつこつ努力して、現状を変えたい人の
どんな問題を
日によってモチベがバラついてしまう。
積み重ねが目に見えなくて気持ちがのらない。
努力を継続できずに現状を変えられないという問題を
どう解決するアプリ
積み重ねた『数』を実感できる。
自分の努力を『見える化』する。
モチベーションを上げて継続を支援する。その結果『現状
を変えたい』という思いを解決する。

18. MVP機能
MVP機能
サインアップ機能
ログインログアウト機能
記録機能
見える化機能
↓
追加したい機能
実績解除機能（バッジ）
カテゴリー機能
名言機能
さらにMattermost連携機能
当初の予定よりも機能を増やすことができました

19. フロントエンドについて
Figmaを使ってデザインしました。
レスポンシブに対応しています。
普段使ってて使いやすいと思った、英語のアプ
リ「みかん」や家計簿アプリのUIを真似しまし
た。
配色については手軽さを演出するために彩度
の浅い色を選択しました。
グラフについてはChart.jsで作成しました。

20. デザイン（スマホサイズ）

21. デザイン（スマホサイズ）

22. デザイン（デスクトップサイズ）

23. 画面遷移図

24. バックエンドについて ・テーブル設計
・ディレクトリ構成

25. ER図
データベース設計です。 MVPが赤色で1~5番の順に優先順位
を設定しています
今回のアプリでは積み上げの記録ができることが主な機能に
なっているのでそのテーブルを中心に、
それぞれのテーブルがなるべく依存しないように設計していて、
将来的に機能の追加がしやすいように設計しています。
ユーザーとカテゴリー機能に関しては論理削除が可能で、デー
タの物理削除を避けています。
緑色のテーブルが記録を分別できるカテゴリー機能に関係する
ところで、中間テーブルを用意し、将来的に複数のカテゴリーに
紐付けることができるように設計しています。
紫色のテーブルは実績機能に関係するとこで、こちらも中間
テーブルを用意しているが、同じ実績を何度も獲得しないように
複合主キーとして user_idとbadge_idを設定しています。

26. ディレクトリ構成

27. インフラについて ・現状の構成図

28. インフラ構成図
・ECS on Fargateを使用するため、
NginxとDjangoのコンテナイメージ
をECRにプッシュし、ECSのタスクを
定義しています。
・ECSのサービスから、2つのプライ
ベートサブネットにおいてそれぞれ
最低1つのタスクを実行していま
す。
・Mattermostへは取得したアプリ
のサブドメインを使用し、
mattermost.kotukoutu-rare.com
でアクセスできるようにしました。

29. 説明資料としては以上です
https://github.com/Raretech-Hackathon-TeamC/KotukotuProject