振り返りアプリを作ってみた話

開発ログ
- https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435

Transcript

1. 振り返りアプリを作ってみた話
   - タスクを記録して可視化する。行動ログのメモアプリ -
   

   View Slide

2. 自己紹介
   📝 飯野陽平（wheatandcat）
   🏢 フリーランスエンジニア（シェアフル株式会社CTO）
   💻 Blog: https://www.wheatandcat.me/
   📚 Booth: https://wheatandcat.booth.pm/
   🛠 今までに作ったもの
   memoir
   ペペロミア
   Atomic Design Check List
   

   View Slide

3. memoirって、どんなアプリ？
   タスクを記録して可視化する、
   行動ログのメモアプリです。
   

   View Slide

4. どんな体制で開発している？
   wheatandcat
   開発
   mitsubisi
   デザイン
   

   View Slide

5. どんな感じで開発を始めたか？
   

   View Slide

6. 元々、以下のような事を行っていた
   ①.毎週日曜日の午後に振り返り
   参加者: 家族
   お互いの１週間の出来事を共有
   

   View Slide

7. 元々、以下のような事を行っていた
   ①.毎週日曜日の午後に振り返り
   参加者: 家族
   お互いの１週間の出来事を共有
   ②.議事録を家族共有のslackで共有
   

   View Slide

8. 元々の運用の振り返りの問題点
   振り返りの時に、今週の出来事を思い出せない
   まとまった単位での振り返りをしたい時にテキスト情報のみだとピックアップしづらい
   良かった出来事のみピックアップしたい
   振り返りを開催する時間帯がズレる
   

   View Slide

9. 元々の運用の振り返りの問題点
   振り返りの時に、今週の出来事を思い出せない
   まとまった単位での振り返りをしたい時にテキスト情報のみだとピックアップしづらい
   良かった出来事のみピックアップしたい
   振り返りを開催する時間帯がズレる
   上記の問題を解決するためにアプリを開発！
   

   View Slide

10. どんな感じで開発を始めたか ①
    担当: wheatandcat
    ①.ラフで画面構成を作成
    

    View Slide

11. どんな感じで開発を始めたか ①
    担当: wheatandcat
    ①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
    

    View Slide

12. どんな感じで開発を始めたか ①
    担当: wheatandcat
    ①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
    ③.仮のデザインガイドラインを作成
    

    View Slide

13. どんな感じで開発を始めたか ①
    担当: wheatandcat
    ①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
    ③.仮のデザインガイドラインを作成
    ここまで出来たらデザイナーに渡す
    

    View Slide

14. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成
    

    View Slide

15. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

16. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

17. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

18. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

19. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

20. どんな感じで開発を始めたか ②
    担当: mitsubisi
    ④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
    

    View Slide

21. どんな感じで開発を始めたか ③
    担当: mitsubisi
    ⑥.ガイドラインに沿って正式なデザインを作成
    

    View Slide

22. どんな感じで開発を始めたか ④
    担当: wheatandcat & mitsubisi
    ⑥.画面遷移をPrototypeに落とし込む
    Prototype Demo .
    

    View Slide

23. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    Zenn: memoirの開発ログ .
    

    View Slide

24. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    Zenn: memoirの開発ログ .
    

    View Slide

25. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    Zenn: memoirの開発ログ .
    

    View Slide

26. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    ③. 週1回の振り返りを行う
    Zenn: memoirの開発ログ .
    

    View Slide

27. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    ③. 週1回の振り返りを行う
    ④. 改善内容 & バグ報告をslackに通知
    Zenn: memoirの開発ログ .
    

    View Slide

28. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    ③. 週1回の振り返りを行う
    ④. 改善内容 & バグ報告をslackに通知
    ⑤. issue作成
    Zenn: memoirの開発ログ .
    

    View Slide

29. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    ③. 週1回の振り返りを行う
    ④. 改善内容 & バグ報告をslackに通知
    ⑤. issue作成
    ⑥. Zennのスクラップに実装報告を記載
    Zenn: memoirの開発ログ .
    

    View Slide

30. ここまで完成したら実装開始 & 改善のループを開始
    担当: wheatandcat & mitsubisi
    以下をループでする形式で実装していく
    ①. 設計 & 機能実装
    ②. Expoでデモアプリ配布して、実際に使用
    ③. 週1回の振り返りを行う
    ④. 改善内容 & バグ報告をslackに通知
    ⑤. issue作成
    ⑥. Zennのスクラップに実装報告を記載
    ⑦. ①に戻る
    Zenn: memoirの開発ログ .
    

    View Slide

31. どこまで出来ているの？
    実機でデモ
    LPサイトは、こちら .
    

    View Slide

32. コードは全てGitHubで公開しています
    memoir
    https://github.com/wheatandcat/memoir
    memoir-backend
    https://github.com/wheatandcat/memoir-backend
    memoir-notification
    https://github.com/wheatandcat/memoir-notification
    memoir-tools
    https://github.com/wheatandcat/memoir-tools
    memoir-lp
    https://github.com/wheatandcat/memoir-lp
    

    View Slide

33. アプリのストア公開は来年の2月くらいの予定です
    

    View Slide

34. ご清聴ありがとうございました
    

    View Slide