Slide 1
Slide 1 text
振り返りアプリを作ってみた話
- タスクを記録して可視化する。行動ログのメモアプリ -
Slide 2
Slide 2 text
自己紹介
📝 飯野陽平（wheatandcat）
🏢 フリーランスエンジニア（シェアフル株式会社CTO）
💻 Blog: https://www.wheatandcat.me/
📚 Booth: https://wheatandcat.booth.pm/
🛠 今までに作ったもの
memoir
ペペロミア
Atomic Design Check List
Slide 3
Slide 3 text
memoirって、どんなアプリ？
タスクを記録して可視化する、
行動ログのメモアプリです。
Slide 4
Slide 4 text
どんな体制で開発している？
wheatandcat
開発
mitsubisi
デザイン
Slide 5
Slide 5 text
どんな感じで開発を始めたか？
Slide 6
Slide 6 text
元々、以下のような事を行っていた
①.毎週日曜日の午後に振り返り
参加者: 家族
お互いの１週間の出来事を共有
Slide 7
Slide 7 text
元々、以下のような事を行っていた
①.毎週日曜日の午後に振り返り
参加者: 家族
お互いの１週間の出来事を共有
②.議事録を家族共有のslackで共有
Slide 8
Slide 8 text
元々の運用の振り返りの問題点
振り返りの時に、今週の出来事を思い出せない
まとまった単位での振り返りをしたい時にテキスト情報のみだとピックアップしづらい
良かった出来事のみピックアップしたい
振り返りを開催する時間帯がズレる
Slide 9
Slide 9 text
元々の運用の振り返りの問題点
振り返りの時に、今週の出来事を思い出せない
まとまった単位での振り返りをしたい時にテキスト情報のみだとピックアップしづらい
良かった出来事のみピックアップしたい
振り返りを開催する時間帯がズレる
上記の問題を解決するためにアプリを開発！
Slide 10
Slide 10 text
どんな感じで開発を始めたか ①
担当: wheatandcat
①.ラフで画面構成を作成
Slide 11
Slide 11 text
どんな感じで開発を始めたか ①
担当: wheatandcat
①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
Slide 12
Slide 12 text
どんな感じで開発を始めたか ①
担当: wheatandcat
①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
③.仮のデザインガイドラインを作成
Slide 13
Slide 13 text
どんな感じで開発を始めたか ①
担当: wheatandcat
①.ラフで画面構成を作成 ②.Figmaで仮デザイン作成
③.仮のデザインガイドラインを作成
ここまで出来たらデザイナーに渡す
Slide 14
Slide 14 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成
Slide 15
Slide 15 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 16
Slide 16 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 17
Slide 17 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 18
Slide 18 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 19
Slide 19 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 20
Slide 20 text
どんな感じで開発を始めたか ②
担当: mitsubisi
④.正式にデザインガイドラインを作成 ⑤.StyleをFigmaに登録
Slide 21
Slide 21 text
どんな感じで開発を始めたか ③
担当: mitsubisi
⑥.ガイドラインに沿って正式なデザインを作成
Slide 22
Slide 22 text
どんな感じで開発を始めたか ④
担当: wheatandcat & mitsubisi
⑥.画面遷移をPrototypeに落とし込む
Prototype Demo .
Slide 23
Slide 23 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
Zenn: memoirの開発ログ .
Slide 24
Slide 24 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
Zenn: memoirの開発ログ .
Slide 25
Slide 25 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
Zenn: memoirの開発ログ .
Slide 26
Slide 26 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
③. 週1回の振り返りを行う
Zenn: memoirの開発ログ .
Slide 27
Slide 27 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
③. 週1回の振り返りを行う
④. 改善内容 & バグ報告をslackに通知
Zenn: memoirの開発ログ .
Slide 28
Slide 28 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
③. 週1回の振り返りを行う
④. 改善内容 & バグ報告をslackに通知
⑤. issue作成
Zenn: memoirの開発ログ .
Slide 29
Slide 29 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
③. 週1回の振り返りを行う
④. 改善内容 & バグ報告をslackに通知
⑤. issue作成
⑥. Zennのスクラップに実装報告を記載
Zenn: memoirの開発ログ .
Slide 30
Slide 30 text
ここまで完成したら実装開始 & 改善のループを開始
担当: wheatandcat & mitsubisi
以下をループでする形式で実装していく
①. 設計 & 機能実装
②. Expoでデモアプリ配布して、実際に使用
③. 週1回の振り返りを行う
④. 改善内容 & バグ報告をslackに通知
⑤. issue作成
⑥. Zennのスクラップに実装報告を記載
⑦. ①に戻る
Zenn: memoirの開発ログ .
Slide 31
Slide 31 text
どこまで出来ているの？
実機でデモ
LPサイトは、こちら .
Slide 32
Slide 32 text
コードは全て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
Slide 33
Slide 33 text
アプリのストア公開は来年の2月くらいの予定です
Slide 34
Slide 34 text
ご清聴ありがとうございました