【夫婦で開発】1年かけて1週間を振り返えるアプリを本気で開発してみた
1年と2ヶ月かけて開発していたアプリがリリースできたので記事にしました。
詳しい開発のログは以下のスクラップにまとめています 👌
リリースしたアプリ
ダウンロードはこちら。
■ iOS
■ Android
LPサイト
アプリを開発したきっかけ
以前から週1で家族の振り返りの時間を設けていて、今週あった出来事を互いに共有して議事録に残すことを習慣にしていました。
ただ、上記の運用をしている間に以下のような問題があることに気づきました。
- 振り返りの際に、今週の出来事を思い出せない
- まとまった期間の振り返りたいときに、テキスト情報のみだとピックアップしづらい
- 良かった出来事のみピックアップしたい
- 振り返りを開催する時間が毎回ズレる
- 日付を忘れてスキップしてしまう
そこで、上記を改善するためアプリを家族で開発しようという話になりました。
どんなアプリ？
memoirは1週間を振り替えるアプリとして主に以下の機能を持っています。
- タスクを登録
- タスクを共有するための招待機能
- 1週間のタスクを振り返る
- タスクを検索する
- 振り返りの時間を通知
| ホーム画面 | タスクを登録 | 招待機能 |
|---|---|---|
 |
 |
 |
| 1週間のタスクを振り返る | タスクを検索する | 振り返りの時間を通知 |
|---|---|---|
 |
 |
 |
各画面はFigmaでデザインを作成して機能の仕様を確定させてから開発を進めていました。
開発のテーマ
今までの個人開発の反省
私は以前、個人開発でアプリを開発してリリースした経験があります。（その時に作成した記事が以下です。）
1年程度は運用していたのですが、以下の理由からモチベーションが低下してしまいました。
- 自身がアプリを使用していない
- エンジニア1人で開発しているので、アプリのデザインが整わない
- 身近なところからフィードバックを貰えないので、機能改善が進まない
今回の開発は上記の反省をいかし、モチベーションの低下が発生しづらいのプロジェクト構成にしてみました。
今回のアプリ開発で気にかけたこと
今回の開発ではモチベーション低下が発生しづらいのプロジェクト構成として以下を採用しました。
- 常に自分が使用するアプリ
- チームで開発
- 身近なところからフィードバックを得られる構成
開発体制
メンバー
- 名前: wheatandcat
- 担当: 開発
- 名前: mitsubisi
- 担当: デザイン
開発フロー
以下の開発フローで開発を進めました。
- ①. 設計 & 機能実装
- ②. Expoでデモアプリ配布して、実際に使用
- ③. 週1回の振り返りをアプリで行なう
- ④. 改善内容 & バグ報告をSlackに通知
- ⑤. issue作成
- ⑥. Zennのスクラップに開発のログを記載
- ⑦. ①に戻る
以前に社内イベントで発表した際にスライド作成したので開発フローの詳細は、以下を参照。
GitHub
memoirの開発で使用しているコードは、すべてOSSとしてGitHubで公開しています。
その他のリンク
GitHub以外の開発資料のリンクは以下を参照してください。
技術スタック
Figma
デザインツールは、Figmaを使用しました。
今回のアプリではデザインのブレが発生しにくいように、最初にデザインガイドラインを作成して進めました。
デザインガイドラインに沿ってFigmaのStyle定義に追加することで、配色やテキストサイズのブレを最小限に抑えられました。
icons8
今回はアイコンのデザインを統一したかったのでicons8のアイコンを使用しました。
ライセンスは、クレジット表記をすれば無料で利用で可能なので個人開発でも活用しやすいです。
React Native（Expo）
ExpoはReact Nativeの開発する際に必要な便利機能を集めたプラットフォームです。
ガチガチなネイティブ実装が必要ないアプリでは、Expoを使用して開発することで工数が大幅に削減できるのできます。
クロスプラットフォーム開発としてFlutterと比較されますが、今回は自身の興味が言語の学習よりもプロダクトの品質の高さを優先したかったので、使い慣れているReact Nativeを採用しました。
Firebase
Firebaseの以下の機能を採用しました。
| 内容 | 使用内容 |
|---|---|
| Firebase Authentication | アプリの認証に使用 iOSではSign In with Appleを使用 AndroidではGoogleログインを使用 |
| Cloud Firestore | データの保存に使用 |
| Cloud Storage for Firebase | ユーザーのプロフィール画像のアップロード先に使用 |
Go
バックエンドの実装はGoを採用しました。
こちらもExpoを採用した理由と同様で、自身が使い慣れている言語なので採用しました。
GraphQL
アプリのAPIは、すべてGraphQLで実装しています。
バックエンドはgqlgenで、フロントエンドはApollo Clientを使用しています。
フロントエンド側のコードはGraphQL Code GeneratorからGraphQLにアクセスするCustom Hooksを自動生成できる構成にしています。
GCP
GCPの以下の機能を採用しました。
| 内容 | 使用内容 |
|---|---|
| GAE | バックエンドのデプロイ先に使用 |
| Cloud Functions | Push通知系のAPIの実装、ツール周り細かい対応で使用 |
| Cloud Tasks | Push通知のAPI実行時に使用 |
ただ、GAEはGoのバージョンアップのサポートが遅いのでCloud Runへの移行を検討中です。
Next.js
Next.jsを使用してLPサイトを作成しました。
こちらもExpoを採用した理由と同様で、自身が使い慣れていたので採用しました。
もう少し開発期間が後ろ倒しになっていたらRemixにしていたかも。
Tailwind CSS
LPサイトのCSSにはTailwind CSSを使用しました。
良い感じにレスポンシブ周りのStyleを設定できるので採用しました。
docsify
docsifyは、ビルド無し使用できる静的ドキュメントジェネレーターです。
Github Pagesにも、そのままデプロイ可能なので簡単に運用できます。
memoirでは、開発ドキュメントをGitHubで管理しており、以下の作業手順に乗っ取り、新規機能の開発を行なっています。
Qase
シナリオテストはQaseを使用して管理しています。
実施したシナリオテストを、こんな感じでレポート出力してくれます。
その他
すべてを記載すると長すぎるので、他に使用している技術スタックは以下にまとめました。
| 名前 | 内容 | ブログ |
|---|---|---|
| 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年以上運用できているので、私生活において、この開発は成功だったと実感しています。
今回の開発で学んだこと
- 個人開発の対敵であるモチベーション低下と向き合えた
- チームで開発することでフィードバックのループをリリースまで回し続けることができる
- デザインの大事さを再認識できた
フィードバック・問い合わせ
アプリのフィードバック・問い合わせ・バグ報告は以下から可能なので、よろしくお願いします🙇。（アプリからも報告できます）
今後
Android周りのパフォ−マンス周りの調整や、EAS Buildの導入、バックエンド/フロントエンドの継続的なパフォーマンス計測など、まだまだやりたい内容はあるので、今後も開発していこうと思います。
Discussion
１年２ヶ月もの開発期間を経てのリリース、おめでとうございます！
技術構成や開発の進め方についてとても参考になりました。早速アプリをインストールさせて頂き、クオリティの高さにとても感銘を受けております。
些細な点ですが一点だけ気になった点として、アカウント設定のページからアカウント削除の導線が見当たらなかったのですが（既に存在していたら申し訳ございません）、Appleのガイドラインによるとアカウントの削除機能を搭載していなければならないようなので、リジェクト対象とならないためにも機能追加のご対応を頂けると一層良さそうに見受けました。
今後とも応援しております🙏
コメントありがとうございます 👍
ひゃー 😱、こちら対応しようと思いissueだけ作成して、すっかり忘れてリリースしてしまいました 💦
次のリリース時にアカウント削除機能を追加しようと思います。報告ありがとうございました 🙇