Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Yohei Iino
November 28, 2021
690

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

Yohei Iino

November 28, 2021
Tweet

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide