🎂

【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた

2022/05/04に公開3

1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。

詳しい開発のログは以下のスクラップにまとめています 👌
https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435

リリースしたアプリ

ダウンロードはこちら。

■ iOS
https://apps.apple.com/jp/app/memoir/id1613532672

■ Android

https://play.google.com/store/apps/details?id=com.wheatandcat.memoir

LPサイト

https://memoir-app.dev

アプリを開発したきっかけ

以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。

ただ、上記の運用をしている間に以下のような問題があることに気づきました。

  • 振り返りの際に、今週の出来事を思い出せない
  • まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい
  • 良かった出来事のみピックアップしたい
  • 振り返りを開催する時間が毎回ズレる
  • 日付を忘れてスキップしてしまう

そこで、上記を改善するためアプリを家族で開発しようという話になりました。

どんなアプリ?

memoirは1週間を振り替えるアプリとして主に以下の機能を持っています。

  • タスクを登録
  • タスクを共有するための招待機能
  • 1週間のタスクを振り返る
  • タスクを検索する
  • 振り返りの時間を通知
ホーム画面 タスクを登録 招待機能
1週間のタスクを振り返る タスクを検索する 振り返りの時間を通知

各画面はFigmaでデザインを作成して機能の仕様を確定させてから開発を進めていました。

開発のテーマ

今までの個人開発の反省

私は以前、個人開発でアプリを開発してリリースした経験があります。(その時に作成した記事が以下です。)

https://qiita.com/wheatandcat/items/3324dfd141729e46009f

1年程度は運用していたのですが、以下の理由からモチベーションが低下してしまいました。

  • 自身がアプリを使用していない
  • エンジニア1人で開発しているので、アプリのデザインが整わない
  • 身近なところからフィードバックを貰えないので、機能改善が進まない

今回の開発は上記の反省をいかし、モチベーションの低下が発生しづらいのプロジェクト構成にしてみました。

今回のアプリ開発で気にかけたこと

今回の開発ではモチベーション低下が発生しづらいのプロジェクト構成として以下を採用しました。

  • 常に自分が使用するアプリ
  • チームで開発
  • 身近なところからフィードバックを得られる構成

開発体制

メンバー

開発フロー

以下の開発フローで開発を進めました。

  • ①. 設計 & 機能実装
  • ②. Expoでデモアプリ配布して、実際に使用
  • ③. 週1回の振り返りをアプリで行なう
  • ④. 改善内容 & バグ報告をSlackに通知
  • ⑤. issue作成
  • ⑥. Zennのスクラップに開発のログを記載
  • ⑦. ①に戻る

以前に社内イベントで発表した際にスライド作成したので開発フローの詳細は、以下を参照。

https://speakerdeck.com/wheatandcat/zhen-rifan-riapuriwozuo-tutemitahua

GitHub

memoirの開発で使用しているコードは、すべてOSSとしてGitHubで公開しています

リポジトリ内容 URL
アプリ https://github.com/wheatandcat/memoir
バックエンド https://github.com/wheatandcat/memoir-backend
LPサイト https://github.com/wheatandcat/memoir-lp
開発ドキュメント https://github.com/wheatandcat/memoir-handbook
Push通知 https://github.com/wheatandcat/memoir-notification
ツール系 https://github.com/wheatandcat/memoir-tools

その他のリンク

GitHub以外の開発資料のリンクは以下を参照してください。

内容 URL
Apple Store https://apps.apple.com/jp/app/memoir/id1613532672
Google Play https://play.google.com/store/apps/details?id=com.wheatandcat.memoir
LPサイト https://www.memoir-app.dev/
Figma https://www.figma.com/file/cLruhS5vc5IQsvqoXYSyP8/memoir
開発ドキュメント https://wheatandcat.github.io/memoir-handbook/#/
ブログ https://www.wheatandcat.me/
開発ログ https://zenn.dev/wheatandcat/scraps/78d2c5aa4c9435

技術スタック

Figma

https://www.figma.com/

デザインツールは、Figmaを使用しました。
今回のアプリではデザインのブレが発生しにくいように、最初にデザインガイドラインを作成して進めました。

デザインガイドラインに沿ってFigmaのStyle定義に追加することで、配色やテキストサイズのブレを最小限に抑えられました。

icons8

https://icons8.jp/

今回はアイコンのデザインを統一したかったのでicons8のアイコンを使用しました。
ライセンスは、クレジット表記をすれば無料で利用で可能なので個人開発でも活用しやすいです。

React Native(Expo)

https://expo.dev/

ExpoはReact Nativeの開発する際に必要な便利機能を集めたプラットフォームです。
ガチガチなネイティブ実装が必要ないアプリでは、Expoを使用して開発することで工数が大幅に削減できるのできます。

クロスプラットフォーム開発としてFlutterと比較されますが、今回は自身の興味が言語の学習よりもプロダクトの品質の高さを優先したかったので、使い慣れているReact Nativeを採用しました。

Firebase

https://firebase.google.com/?hl=ja&gclsrc=ds&gclsrc=ds

Firebaseの以下の機能を採用しました。

内容 使用内容
Firebase Authentication アプリの認証に使用
iOSではSign In with Appleを使用
AndroidではGoogleログインを使用
Cloud Firestore データの保存に使用
Cloud Storage for Firebase ユーザーのプロフィール画像のアップロード先に使用

Go

https://go.dev/

バックエンドの実装はGoを採用しました。
こちらもExpoを採用した理由と同様で、自身が使い慣れている言語なので採用しました。

GraphQL

https://graphql.org/

アプリのAPIは、すべてGraphQLで実装しています。
バックエンドはgqlgenで、フロントエンドはApollo Clientを使用しています。
フロントエンド側のコードはGraphQL Code GeneratorからGraphQLにアクセスするCustom Hooksを自動生成できる構成にしています。

GCP

https://cloud.google.com/

GCPの以下の機能を採用しました。

内容 使用内容
GAE バックエンドのデプロイ先に使用
Cloud Functions Push通知系のAPIの実装、ツール周り細かい対応で使用
Cloud Tasks Push通知のAPI実行時に使用

ただ、GAEはGoのバージョンアップのサポートが遅いのでCloud Runへの移行を検討中です。

Next.js

https://nextjs.org/

Next.jsを使用してLPサイトを作成しました。
こちらもExpoを採用した理由と同様で、自身が使い慣れていたので採用しました。

もう少し開発期間が後ろ倒しになっていたらRemixにしていたかも。

Tailwind CSS

https://tailwindcss.com/

LPサイトのCSSにはTailwind CSSを使用しました。
良い感じにレスポンシブ周りのStyleを設定できるので採用しました。

docsify

https://docsify.js.org/#/

docsifyは、ビルド無し使用できる静的ドキュメントジェネレーターです。
Github Pagesにも、そのままデプロイ可能なので簡単に運用できます。
memoirでは、開発ドキュメントをGitHubで管理しており、以下の作業手順に乗っ取り、新規機能の開発を行なっています。

https://wheatandcat.github.io/memoir-handbook/#/guide/02-work-procedure?new

Qase

https://qase.io/

シナリオテストはQaseを使用して管理しています。
実施したシナリオテストを、こんな感じでレポート出力してくれます。

https://app.qase.io/public/report/d404d341c374fbf65bc0a748b04d9e48a8103ac5

その他

すべてを記載すると長すぎるので、他に使用している技術スタックは以下にまとめました。

名前 内容 ブログ
Sentry エラーの監視ツール コチラ
React Navigation React Nativeのルーティングのライブラリ コチラ
Recoil Reactのステート管理ライブラリ コチラ
Storybook コンポーネントの管理ライブラリ
Loki React NativeでVisual Regression Testingを
実施するためのライブラリ
コチラ
react-native-view-shot React Nativeのコンポーネントのスクリーンショットを
生成するライブラリ
コチラ
hygen 対話式コードジェネレータ
Scenarigo APIのE2Eテストツール コチラ
moq Goのinterfaceをモックするライブラリ コチラ
octocov PRにGoのテストカバレッジレポートを
出力してくれるツール
GitHub Actions GitHubが提供しているCIサービス コチラ

私生活の変化

アプリをテスト稼働させて1年間立ちタスクをアプリに登録するのを習慣化できました
いろいろなTODOアプリを試しても続かなかった自分にとって、Doneしたタスクだけを登録するアプリというコンセプトが合っていたのでかなと思います。

また、週1で家族の振り返りの時間も途切れること無く1年以上運用できているので、私生活において、この開発は成功だったと実感しています。

今回の開発で学んだこと

  • 個人開発の対敵であるモチベーション低下と向き合えた
  • チームで開発することでフィードバックのループをリリースまで回し続けることができる
  • デザインの大事さを再認識できた

フィードバック・問い合わせ

アプリのフィードバック・問い合わせ・バグ報告は以下から可能なので、よろしくお願いします🙇。(アプリからも報告できます)

https://www.memoir-app.dev/

今後

Android周りのパフォ−マンス周りの調整や、EAS Buildの導入、バックエンド/フロントエンドの継続的なパフォーマンス計測など、まだまだやりたい内容はあるので、今後も開発していこうと思います。

Discussion

poteboypoteboy

1年2ヶ月もの開発期間を経てのリリース、おめでとうございます!
技術構成や開発の進め方についてとても参考になりました。早速アプリをインストールさせて頂き、クオリティの高さにとても感銘を受けております。

些細な点ですが一点だけ気になった点として、アカウント設定のページからアカウント削除の導線が見当たらなかったのですが(既に存在していたら申し訳ございません)、Appleのガイドラインによるとアカウントの削除機能を搭載していなければならないようなので、リジェクト対象とならないためにも機能追加のご対応を頂けると一層良さそうに見受けました。

今後とも応援しております🙏

wheatandcatwheatandcat

コメントありがとうございます 👍

些細な点ですが一点だけ気になった点として、アカウント設定のページからアカウント削除の導線が見当たらなかったのですが(既に存在していたら申し訳ございません)、Appleのガイドラインによるとアカウントの削除機能を搭載していなければならないようなので、リジェクト対象とならないためにも機能追加のご対応を頂けると一層良さそうに見受けました。

ひゃー 😱、こちら対応しようと思いissueだけ作成して、すっかり忘れてリリースしてしまいました 💦
次のリリース時にアカウント削除機能を追加しようと思います。報告ありがとうございました 🙇

JboyHashimotoJboyHashimoto

招待機能がどのようなロジックになっているのか教えて欲しいです!
データベースだけで実現できますか?