$30 off During Our Annual Pro Sale. View Details »

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

Yohei Iino
November 28, 2021
380

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

Yohei Iino

November 28, 2021
Tweet

Transcript

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

  2. 自己紹介 📝 飯野陽平(wheatandcat) 🏢 フリーランスエンジニア(シェアフル株式会社CTO) 💻 Blog: https://www.wheatandcat.me/ 📚 Booth:

    https://wheatandcat.booth.pm/ 🛠 今までに作ったもの memoir ペペロミア Atomic Design Check List
  3. memoirって、どんなアプリ? タスクを記録して可視化する、 行動ログのメモアプリです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    & 機能実装 ②. Expoでデモアプリ配布して、実際に使用 ③. 週1回の振り返りを行う ④. 改善内容 & バグ報告をslackに通知 ⑤. issue作成 ⑥. Zennのスクラップに実装報告を記載 ⑦. ①に戻る Zenn: memoirの開発ログ .
  31. どこまで出来ているの? 実機でデモ LPサイトは、こちら .

  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
  33. アプリのストア公開は来年の2月くらいの予定です

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