Open21

memoirの開発ログ

開発の動機

私の家庭では週1回振り返りの時間を設けていて、その時間では互いに今週あったことを会話で共有して議事録に残すことを習慣としています。 このプロジェクトでは、それらをより円滑に進められる仕組みを作りたいと思いアプリ開発を行っています。

振り返りで実際にやっていること

体制

  • 頻度: 週1回(大体、日 or 月曜日に行っている )
  • 参加者: 家族

やっていること

上記の時間帯になると、集まって同じテーブルにつき、お互いの今週の出来事について共有する。
喋った内容は以下のようにGoogle Keepにメモしておきます。

記載している内容の例

その後、家庭内での共有slackがあるので、そこに投稿して共有しています。

現状の問題点

現状の運用では以下の問題点がある

  • 振り返りの時に、今週の出来事を思い出せない
  • 振り返りで話した内容をメモ的に記載しているだけなので情報の抜けが発生する
  • 季節終わりや年終わりなど、まとまった単位での振り返りをしたい時にテキスト情報のみだと情報のピックアップがしづらい(例えば良かった出来事のみピックアップしたいなど)
  • 振り返りを開催する時間帯がブレる

上記の問題点を改善できるアプリ開発をしていく予定

開発の進め方

どんな画面が必要かのアイディアを出す

まず、自分の方で手書きでラフを作成

ラフ

↑のラフからある程度形にするためにFigmaで仮デザインを作成

Figmaで仮デザイン

それと仮のデザインガイドラインを作成して、ここまでをまずデザイナーに共有しました。

仮のデザインガイドライン

正式なデザインに仕上げていく

上記のデザインを元にデザイナーの方で正式なデザインガイドラインを作成

デザインガイドライン

配色の組み合わせは以下のサイトを使用して決めた。

https://colorsupplyyy.com/app

上記のデザインガイドラインを元に正式な画面をデザインを作成して頂いた。

画面一覧

メイン画面は以下の通りになりました。

メイン画面

アイコンについてはデザイナーと相談してIcons8で統一することにしました。 (ライセンス的にはリンクを設置すればOKでした)

https://icons8.jp/

Figmaにテキストとカラーを設定

作業の最適化のため、デザインガイドラインで決めた内容をFigmaに予め登録しておく。

デザインガイドライン

上記を元にデザインガイドラインの内容を全てFigmaのテキストカラーの設定に追加します。

Figmaの設定に追加

Figmaのカラーとテキストは全て上記の設定から指定するようにすることで、デザインがガイドラインから外れたデザインにならないようにしています。

実際にコーディング

上記まで完了したら、いよいよコーディング開始です。

現状は情報はモックで画面のみ作成中です。(ある程度進んだらbackend開発に取り掛かる予定)

memoirメモ

こんにちは、配偶者です。
そもそも「ふりかえり」は、なぜ必要だったのかをメモしておく。

わたしたちは付き合いが浅いまま生活を共にすることになった。
コミュニケーションを手探りしている途中だったので、共有一つするにもおっかなびっくりだった。
相手に嫌われるんじゃないか、非難されるんじゃないか。
でも正直に腹を割って話せる関係でありたかったし、よくないことはよくないと言い合いえるフェアな立場でありたかった。

堅苦しい空気ではなく、お茶やおやつをしながら、
DONEしたタスクを共有し、困ったことがあれば相談できる場を作ろうと思った。
それが週に一度の「ふりかえり」の始まりだった。

共有することは、主に4つに分類される。

  • 今週DONEしたタスク(出来事)
  • 今現在困っていること(問題の提起)
  • 困ったことを解決するためのタスク作成(解決策の模索と実行)
  • 未来の予定の確認(リマインド)

これらを積み重ねて3年経った今、わたしたちの議事録はタイムマシンのような輝きを放っている。
漫然とふりかえってみれば、アルバムのように思い出が蘇る。
タスク名で検索をすれば、いつ何をスタートさせたのかログが追える。
二人の人間の簡易データーベースが出来上がった。

この体験は、生活の中で実にうまく機能した。

先週何やったっけ?と思えば議事録を追えばいいし、忘れていたタスクがあればお互いに補い合った。相手の持っているタスクの総量がわかったので、家事も分担できた。
些細なことから大きなことまで分け合った。
時々感情的になることもあったが、DONEしたタスクという揺るがない事実が理論を補強した。

秘密にしておきたいことは秘密のままでいい。
でも、公開できる情報は多い方が相手への理解に繋がる。
「ふりかえり」とは、過去の確認であり、近い未来の把握だと思う。
何よりも「人間が何を思い何を成したか」の記録だ。

この体験を、memoirでより手軽に、かんたんに再現できればいいなと思って開発を進めている。

開発の報告

期間: 2021年3月2日-3月16日

実装内容

backendの作成

memoir-backendのリポジトリを作成してbackendを実装

使用技術

usersとitemsのGraphQLの実装

以下のGraphQLを作成

  • Query
    • user ユーザーを取得する
    • item アイテムを取得する
    • itemsByDate アイテムを日付で取得する
  • Mutation
    • createUser ユーザーを作成する
    • createItem アイテムを作成する

graphql-code-generatorとapolloを実装

PR: graphql-code-generator + apolloを実装

itemsの作成/保存までAPIを接続

PR: itemsの作成/保存までAPIを接続

https://www.youtube.com/watch?v=YgAp5-5I0kU

開発の報告

期間: 2021年3月17日-3月28日

実装内容

アイテムのCRUDを実装

PR:

https://www.youtube.com/watch?v=LkJSy_YUZf4

Androidでの動作チェック & 不具合修正

PR: Androidでの動作チェック & 不具合修正

以下、修正内容

■モーダルサイズが小さい
AndroidとiOSだとディスプレイから%の指定が異なるので修正
画像1

■アイテム詳細の外側をタッチしても削除が起動する(不具合修正)

画像2

■ フォントの変更が効いていない
AndroidでstyleのfontWeightでboldを指定すると、フォントが適用されてなかったので修正

画像3

■ アイコンの選択の背景が丸になっていない
AndroidだとbackgroundColorとborderRadiusを別のstyleに分けると反映されないみたいなので、同じstyleで宣言するように修正

画像4

■ 日付変更の初期位置のスクロールがスムーズに動いていない
初期表示に日付選択位置をスクロールさせていたが、Androidでスムーズに動作していなかったので、
配列の開始位置を今日にしてloopさせるように修正

次の開発予定

今回の開発でアイテムCRUD部分とログイン前の動作が行えるようになり、データの登録は行える状態になったので、一旦実際にアプリをテスト運用をしていこうと思います。
なので、テスト運用中は機能開発では無く、以下の運用に必要な機能や、自動化、テストコードなど中心に対応していく予定です。

アプリ

backend

デザイン修正

実働するモックアップがさわれたので、実際に使ってみた。
入力画面を改善するために、以下のデザイン修正を行った。
修正したもの

大きな変更はカテゴリの再編成と、
今まで意味を持っていなかった見出しの色に役割を持たせたこと。

  • 赤: 生活 : 生活全般、飲食、健康
  • 青: 趣味・娯楽:  趣味関連、外出、鑑賞
  • 黄色: 仕事: お金、買った、特別なこと

アイコンの色も上記のカラーに合わせて統一感を出した。

開発の報告

期間: 2021年3月29日-4月10日

この期間では機能の開発は行わず、以下の対応を行った。

  • テストコード作成やデプロイの自動化などのシステム土台の強化
  • 実際にテスト稼働してみてのフィードバックを対応

実装内容

moqを使用してGo言語のテストコードを作成

PR: https://github.com/wheatandcat/memoir-backend/pull/14

  • moqを使用したテストコードを追加
  • go-mockと比較して簡易にmockが行えてテスコードが書きやすかった

GitHub ActionsでGAEにデプロイできるようにする

PR: https://github.com/wheatandcat/memoir-backend/pull/16

Jestでテストコード実装

PR: https://github.com/wheatandcat/memoir/pull/43

  • JestEnzymeでUIのユニットテストを実装

GitHub Actionsでexpo publishを実装

PR: https://github.com/wheatandcat/memoir/pull/35

  • expo-github-actionを使用して実装
  • mainブランチがpushされる毎にexpoアプリがデプロイされるように実装

アイコンの画像を最新のデザインに変更

PR: https://github.com/wheatandcat/memoir/pull/44

  • アイコンの画像を最新のデザインに変更

以下はアプリを実際に使用して挙がったフィードバックからの対応

ホーム画面でスワイプすると前後の日付に移動

PR: https://github.com/wheatandcat/memoir/pull/36

https://youtu.be/9_ze_TZWGH4
  • 前後の日付移動がスワイプでき出来るように修正
  • スワイプにはreact-native-swipe-gesturesを使用して実装

キーボード開いている状態でアイコンにタッチできるように修正

PR: https://github.com/wheatandcat/memoir/pull/37

https://www.youtube.com/watch?v=t47csH12NjQ
  • キーボード開いていてもアイコンが選べるように修正
  • ScrollViewkeyboardShouldPersistTaps="always"を設定すれば背面をタッチしてもキーボードが閉じなくなる

ホーム画面のスワイプとカルーセルの動作をチューニング

PR: https://github.com/wheatandcat/memoir/pull/39

  • Andoridだとスワイプの移動や日付選択のカルーセルの反応が遅いというフィードバックを受けたので対応
  • 修正的には以下を対応

開発の報告

期間: 2021年4月11日-4月25日

実装内容

Expo sdk 41にバージョンアップ

PR: https://github.com/wheatandcat/memoir/pull/51/files

  • Expo SDK 41がリリースされたのでバージョンアップ
  • 大きな影響は無かったので、expo upgrade コマンド実行のみで完了

期間を指定してタスクを取得するGraphQLを実装

PR:

https://www.youtube.com/watch?v=n1To8yM_Py4

memoirするの画面を実装

PR: https://github.com/wheatandcat/memoir/pull/49

https://www.youtube.com/watch?v=-xpC1Yhi0uE
  • memoirするの画面を実装
  • 1週間前〜今日までアイテムを取得
  • インフィニティスクロールでページングを実装

タスクが無い時の表示を追加

  • タスクが無い時の表示を追加
  • アイコンはランダムで表示

開発の報告

期間: 2021年4月26日-5月9日

実装内容

Firebaseログインを実装

PR: https://github.com/wheatandcat/memoir/pull/57

ログイン後のアカウント作成API + Firebase Auth実装

PR: https://github.com/wheatandcat/memoir-backend/pull/23

  • 認証ユーザーを作成する: createAuthUser を作成
  • Firebase AuthenticationのMiddlewareを実装
  • 以下のエラーハンドリングを実装
    • 認証済みの状態で、認証前の認証方法をした場合は エラー
    • 存在しないトークンで認証した場合はエラー

  • 正しいトークンの場合は以下のようにデータ取得が可能

memoirするを最新のデザインに更新する

PR: https://github.com/wheatandcat/memoir/pull/59

  • memoirするの画面を新デザインで更新

hygenでコンポーネント作成をテンプレート化

PR: https://github.com/wheatandcat/memoir/pull/61

  • hygen をコンポーネント作成をテンプレート化
  • 以下のコマンドを実装
## 新規画面作成
$ yarn hygen page new

## コンポーネント作成
$ yarn hygen component new

## テストコード追加
$ yarn hygen test new

開発の報告

期間: 2021年5月10日-5月25日

実装内容

【backend】user.nameを更新/取得するGraphQLを作成

PR: https://github.com/wheatandcat/memoir-backend/pull/25

  • updateUser: ユーザー情報を更新するGraphQLを実装

表示名の表示/変更を実装

PR: https://github.com/wheatandcat/memoir/pull/66

  • マイページに表示名が表示
  • プロフィール編集から表示名を変更できる

【backend】user.imageの更新/取得追加

PR: https://github.com/wheatandcat/memoir-backend/pull/27

  • プロフィール画像の保存でusers.imageを追加

プロフィール画像アップロード機能実装

PR: https://github.com/wheatandcat/memoir/pull/68

https://youtu.be/KMbRKjV8oRM

開発の報告

期間: 2021年5月26日-6月15日

実装内容

招待コードの更新/取得のAPIを実装

PR: https://github.com/wheatandcat/memoir-backend/pull/30

  • 以下のQueryを追加
    • invite : 招待コードを取得する
    • inviteByCode : 招待コードからユーザーを取得する
  • 以下のMutationを追加
    • createInvite : 招待コード作成する
    • updateInvite : 招待コード更新する

招待コードの表示/更新のUIを実装

PR: https://github.com/wheatandcat/memoir/pull/74

  • 招待コードの表示 作成 / 更新を実装
  • 招待コードの入力UI実装

共有の申請をリクエスト/取得のAPIを実装

PR: https://github.com/wheatandcat/memoir-backend/pull/34

  • 以下のQueryを追加
    • relationshipRequests: 招待の申請リクエストを取得する
  • 以下のMutationを追加
    • newRelationshipRequest: 招待をリクエストする

招待リクエストの送信 / 通知 / 一覧表示のUIを実装

PR: https://github.com/wheatandcat/memoir/pull/78

  • 招待を送信 → 受信 → 一覧表示実装

共有の承認/拒否 + 共有メンバーの表示/解除のAPIを実装

PR: https://github.com/wheatandcat/memoir-backend/pull/40

  • 以下のQueryを追加
    • relationships : 共有ユーザーを取得する
  • 以下のMutationを追加
    • acceptRelationshipRequest : 招待リクエストを承諾する
    • ngRelationshipRequest : 招待リクエストを拒否する
    • deleteRelationship : 共有メンバーを解除する

共有の承認/拒否 + 共有メンバーの表示/解除のUIを実装

PR: https://github.com/wheatandcat/memoir/pull/80

https://www.youtube.com/watch?v=8yC4hSGDGt8
  • 共有の承認/拒否 + 共有メンバーの表示/解除を実装

開発の報告

期間: 2021年6月16日-7月3日

実装内容

memoirするにユーザー情報の表示を追加

PR: https://github.com/wheatandcat/memoir/pull/81

altテキスト

  • memoirするの画面にユーザー情報(アイコンと表示名)を追加

共有申請前の確認、共有メンバーになりましたの画面を作成

PR: https://github.com/wheatandcat/memoir/pull/83

  • 共有申請前の確認の表示を追加
  • 共有メンバーになりましたの表示を追加

【backend】: Push通知のトークン保存を実装

PR: https://github.com/wheatandcat/memoir-backend/pull/51

以下のGraphQL

  • Mutation
    • createPushToken: Push通知のトークンを作成する

【アプリ】: Push通知のトークン保存を実装

PR: https://github.com/wheatandcat/memoir/pull/85

Push通知を実装

PR:

https://youtu.be/rsA9j7B6Ibo

開発の報告

期間: 2021年7月4日-7月17日

実装内容

振り返り日時の設定の機能を追加

PR: https://github.com/wheatandcat/memoir/pull/89

Expo SDK 42アップデート

PR: https://github.com/wheatandcat/memoir/pull/93

Deep Linkで画面遷移できるように修正

PR: https://github.com/wheatandcat/memoir/issues/90

https://www.youtube.com/watch?v=w3hBu3tvpt8

使われていないexportを検知

PR: https://github.com/wheatandcat/memoir/pull/96

開発の報告

期間: 2021年7月18日-8月1日

実装内容

Top画面の実装

PR: https://github.com/wheatandcat/memoir/pull/97

  • ログイン前の画面を実装
  • 以下の3パターンの遷移を実装
    • ログインせずにユーザー作成
    • ログインしてユーザー作成
    • ログインのみ

【backend】ExistAuthUserを追加

PR: https://github.com/wheatandcat/memoir-backend/pull/59

  • QueryにExistAuthUser(認証済みのユーザーが存在する判定)を実装
  • Top画面から認証済みユーザー作成時に、既にユーザーデータが存在する場合はユーザー作成をしない動作の実装に使用

【backend】CreateAuthUserにIsNewUserフラグを追加

PR: https://github.com/wheatandcat/memoir-backend/pull/60

  • Top画面でSMSログインから、そのままアプリ開始を実装するためにAPIを改修
  • MutationのCreateAuthUser(認証済みユーザー作成)のvariablesにIsNewUserを追加
  • IsNewUser = trueの場合は、authUserの作成と共に通常のユーザーデータも作成する

チュートリアル画面の実装

PR: https://github.com/wheatandcat/memoir/pull/98

https://www.youtube.com/watch?v=1l4rfO0Tch8


ささやかなデザインの修正。

「memoirする」出力結果画面で、ユーザーごとの表示/非表示ができると
とても便利だと思ったので作りました。

開発の報告

期間: 2021年8月2日-8月19日

実装内容

memoirを共有する機能を実装

PR: https://github.com/wheatandcat/memoir/pull/102

https://www.youtube.com/watch?v=fBaAUVQElFo

Visual Regression Testingを実装

PR: https://github.com/wheatandcat/memoir/pull/104

  • Storybookを元にVisual Regression Testingを実装
  • Visual Regression TestingはLokiを使用
  • 比較はreg-suitを使用

開発の報告

期間: 2021年8月20日-9月7日

実装内容

ログインしていない時の挙動を修正 & バグ修正

PR: https://github.com/wheatandcat/memoir/pull/112

  • ログインしていない時でもmemoirするの画面を開けるように修正

  • ログインしていない時もプロフィール編集出来るように修正

メンテナンス機能を実装

PR: https://github.com/wheatandcat/memoir/pull/113

https://www.youtube.com/watch?v=qQgC1DvEE48
  • メンテナンス機能を実装
  • Firestoreの設定でメンテナンスをON/OFFできる
  • Firebase Remote Config も検討したが、現状Expoでは使用できなかったのでFirestoreを使用

強制アップデート機能を実装

PR: https://github.com/wheatandcat/memoir/pull/114

  • 強制アップデート機能を実装
  • 指定バージョン以下のアプリを使用している場合にストアに誘導する

memoirするの画面にフィルター機能を追加

PR: https://github.com/wheatandcat/memoir/pull/116

  • memoirする画面にユーザーのフィルター機能を追加
  • 共有する機能にもユーザーのフィルターを反映する機能を追加

開発の報告

期間: 2021年9月8日-9月25日

実装内容

【アプリ】Sentry導入

PR: https://github.com/wheatandcat/memoir/pull/119

【backend】Sentry導入

PR1: https://github.com/wheatandcat/memoir-backend/pull/69
PR2: https://github.com/wheatandcat/memoir-backend/pull/71

React Navigation v6にバージョンアップ

PR: https://github.com/wheatandcat/memoir/pull/120

ログインするとコメントできます