Zenn
Open40

memoirの開発ログ

Figma
Golang
React Native
Expo
wheatandcatwheatandcat

開発の動機

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

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

体制

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

やっていること

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

記載している内容の例

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

現状の問題点

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

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

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

wheatandcatwheatandcat

開発の進め方

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

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

ラフ

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

Figmaで仮デザイン

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

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

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

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

デザインガイドライン

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

https://colorsupplyyy.com/app

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

画面一覧

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

メイン画面

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

https://icons8.jp/

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

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

デザインガイドライン

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

Figmaの設定に追加

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

実際にコーディング

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

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

mitsubisimitsubisi

memoirメモ

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

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

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

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

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

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

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

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

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

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

wheatandcatwheatandcat

開発の報告

期間: 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

wheatandcatwheatandcat

開発の報告

期間: 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させるように修正

wheatandcatwheatandcat

次の開発予定

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

アプリ

backend

mitsubisimitsubisi

デザイン修正

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

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

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

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

wheatandcatwheatandcat

開発の報告

期間: 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

  • Jest、Enzymeで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

  • キーボード開いていてもアイコンが選べるように修正
  • ScrollViewにkeyboardShouldPersistTaps="always"を設定すれば背面をタッチしてもキーボードが閉じなくなる

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

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

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

開発の報告

期間: 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週間前〜今日までアイテムを取得
  • インフィニティスクロールでページングを実装

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

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

開発の報告

期間: 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
wheatandcatwheatandcat

開発の報告

期間: 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

wheatandcatwheatandcat

開発の報告

期間: 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

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

開発の報告

期間: 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

wheatandcatwheatandcat

開発の報告

期間: 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

wheatandcatwheatandcat

開発の報告

期間: 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

mitsubisimitsubisi


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

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

wheatandcatwheatandcat

開発の報告

期間: 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を使用
wheatandcatwheatandcat

開発の報告

期間: 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する画面にユーザーのフィルター機能を追加
  • 共有する機能にもユーザーのフィルターを反映する機能を追加
wheatandcatwheatandcat

開発の報告

期間: 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

wheatandcatwheatandcat

開発の報告

期間: 2021年9月26日-10月16日

実装内容

【notification】GitHub Actionsからreview/production環境デプロイできるようにする

PR: https://github.com/wheatandcat/memoir-notification/pull/3

  • Push通知用のCloud Functionsのデプロイを自動化
  • mainブランチにマージされた時にGitHub Actionsからreview環境にデプロイが実行される
  • tagをpushするとGitHub Actionsからproduction環境にデプロイされる

【backend】GitHub Actionsからreview/production環境デプロイできるようにする

PR: https://github.com/wheatandcat/memoir-notification/pull/3

  • Push通知用のCloud Functionsのデプロイを自動化
  • mainブランチにマージされた時にGitHub Actionsからreview環境にデプロイが実行される
  • tagをpushするとGitHub Actionsからproduction環境にデプロイされる
  • 環境毎の設定はGitHubのSecretsに設定して切り替えている

【アプリ】production環境用のアプリを作成する

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

  • 本番アプリのビルド用のコマンドを追加 
    • $ yarn ios:build
$ yarn android:build
  • 本番用の設定を追加
  • expo buildのコマンドにrelease-channelを追加
    • 設定しないとビルド時に配信中のreview環境のビルドが上書きされてしまう
  • 本番用のfirebaseの設定を追加
  • GitHub Actionsでビルドも考えたが、余りメリットが無さそうだったので一旦先送りした
mitsubisimitsubisi

ロゴデザインにまつわるいくつかのこと

かわいく人懐っこいアプリになってきたので、
ロゴとアイコンもその雰囲気に寄せていきます。


こちらが最初に出した案。

丸みのあるフォントを選んだものの、
いまいちオリジナリティに欠けるという話になりました。
そこで、mの字を少しアレンジ。


より丸く、スムーズに。

mの文字をアイコンにするのが良かろう、ということでアプリアイコンも用意。

次はLPに取り掛かります。

mitsubisimitsubisi

LPに関するいくつかのこと

今日はmemoirのLPのラフを作っていきます。
どんなことを考えてデザインと設計をするかの思考メモです。

デザインをする前に

ランディングページを作る前に、いくつか準備しておくべきことがあります。
事前調査として、dribbleで検索してイメージを膨らませることです。
https://dribbble.com/search/landing page

マークアップしてもらうとき、こんな動きにしたいと参考事例があった方が断然わかりやすいので、事例を示すことは本当に大事。

最近のデザインは

  • 商品の写真がイケてる
  • フラットデザインのグラフィック
  • 動画、gifアニメで何かしらの動きがある
    など視覚的な要素で攻める傾向にあるようです。
    確かにちょっと流行は取り入れてみたい。

加えて、app関連は下記のようなレイアウトが多いな〜という印象でした。


かなりシンプルなので、少しでもミスをすると世界観が台無しになってしまう。
トレンドを押さえた上で、memoirのLPについて考えていきます！

memoirの雰囲気を固める

わたしたちはmemoirのことを「毎日見ていても飽きない、人懐っこいapp」として育ててきました。
なので、堅苦しい話はなし。角のない、遊びがあるデザインを取り入れたいと思います。
フラットデザインのイラストにトライしてみましょう！（詳細は次回）
なお、カラー設計は既に完了しているので踏襲します。

一番伝えたいことは何か

ここはキャッチコピーにもつながる大切な部分、コンセプトです。
memoirがユーザーにできること、それは「日常を記録して振り返りを促す」こと。
よりわかりやすい表現はないか？何度も考えて文言を練っていきます。

これを伝えたい！と思ったら、まずポストイットに書き出して壁にペタペタ貼っていきます。
ある程度アイデアが出尽くしたら、今度はポストイットを整理・精査していきます。
その中から推してるmemoirの機能を３つ選びました。

・リマインダー機能
・ユーザー共有
・画像書き出し
（もしかしたら変更するかも！）

できるだけわかりやすい文章で内容を書き添えます。

キャッチコピーを考えてみる

なんでもない日常、蓄積していく時間、そういうものを可視化したくてmemoirを作り始めました。
なのでユーザーには思い出のアルバムを毎日作っていくような体験をしてほしいです。

「毎日を特別なものに」
「記録して見直す」
「あたりまえを、見直そう」
「日々を集めて、ふりかえる」
さらにメインコンセプトを英語にして考えてみる。
Write everything, and review it
が適切か。
これを日本語にすると
「なんでも書いて、見直そう」が近いかな。

まだまだ悩ましいけれど、
「日々を集めて、ふりかえる」一旦これを仮キャッチコピーとします。

内容が固まってきたところでざっくりラフを作ってみる。

あらっ、長すぎず短すぎず、いいんじゃないでしょうか。

次回はイメージを決定づける、メインビジュアルに挑戦していきます。

mitsubisimitsubisi

メインビジュアルを考える

前回はLPのラフを作りました。
今日はメインビジュアルについて考えていきます。

本来であればappのスクリーンショットで攻めるのがLPの定石なのですが、
生まれたばかりのmemoirです、せっかくなので雰囲気を大切にしていきましょう。

あらためて、memoirを考える

第一印象ってとても大事です。
このページに飛んできてくれた人に、どんな印象を抱いてほしいかを考えます。

それから、memoirのデザインを振り返って…。
線が少なくて、シンプル。でも美しいものがいいな…。
欲は尽きません。

フラットでシンプル、柔らかい印象を受けるイラストをいくつか探してみます。

https://drawkit.com/product/startups-tech-illustrations



https://www.humaaans.com/

線を生かすか、フラットに塗りだけで表現するか悩みます。

どんなイラスト素材が必要か考える

イラストを描くのは結構大変です。
やっぱり描き直し！こっちにも必要だった！
なんてことにならないように、どんなイラストが必要なのか考えます。

うんうん悩みながらLPのラフに、段落ごとに必要そうなビジュアル素材を当てはめていきます。

あれっ！？意外と数がないぞ！？

時には紙とえんぴつを

何かのデザインをするとき、わたしは紙と鉛筆をよく使います。
デジタルは一発で正解を出せないとモヤモヤしますが、
アナログはいろんな寄り道をして正解に辿り着く感じがします。
手をたくさん動かすからでしょうか？ふしぎ。


描いてるうちにだんだん思考が整理されていって、

より具体的なイメージにつながります。

こんなことはどうかな？とチャレンジをしてみたり、

新たなチャレンジの可能性を見つけたり、

たくさん描くうちに、しっくりくるイメージが掴めます。


この小さな端っこのらくがきが良さそうです！

インターネットの画像検索で、
・卓上カレンダー
・木製脚立
などの参考画像を用意します。


カレンダー部分と人、道具部分を分けて描きます。

それをAdobe illustratorに持っていきまして


ざっくりトレースしつつ、パーツを作っていきます。

合体させながら調整します。

メインビジュアルのイメージが固まりました！
恐ろしいことにここまでは下書きです。
次回はブラッシュアップとカラー調整をしていきます。

mitsubisimitsubisi

続・メインビジュアルを考える

あれからこねくりまわして、ここまでやってきました。
自画自賛ですが、なかなかかわいいのではないでしょうか！


しかしいざFigmaにはめこんでみると…。


あれ〜！？パッとしない！！
ちょっと埋もれてしまいました。

観察してわかった改善点は…
・肌の色と背景が近すぎる
・カレンダーの台紙と黄色の明度が近すぎる
・金属部分にメリハリがないのでなんだかわからない
・影の色が浮いちゃう

改善しました



先ほど挙げた問題点を全部見直してみました。

＃思い切ってキャッチコピーも変える
メインビジュアルができて、伝えたいことが明確になりました。
どんどんアイデアが湧いてきます。

もっとmemoirの目的をはっきりと、直感的に伝えましょう。



バッチリです！

イラストのイメージ、レギュレーションが定まったので、
あとはこの作業を繰り返して他の部分のイラストも作っていきます。

wheatandcatwheatandcat

開発の報告

期間: 2021年10月17日-11月6日

実装内容

【backend】moqの作成をgo generateに変更する

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

  • moq の書き方go generateから生成する用に修正
  • コマンド系をMakefileにまとめた

【backend】air導入

PR①: https://github.com/wheatandcat/memoir-backend/pull/78
PR②: https://github.com/wheatandcat/memoir-backend/pull/79

  • ローカル起動にdev_appserver.pyが非推奨になったのでairを導入
  • ローカル開発時はgodotenvから環境変数を設定するように修正
  • ローカル環境の判定はenvenbを使用して実装

【backend】ローカル開発用にスタックトレースを出力する

PR①: https://github.com/wheatandcat/memoir-backend/pull/80
PR②: https://github.com/wheatandcat/memoir-backend/pull/81

■ stack trace:
github.com/wheatandcat/memoir-backend/repository.(*ItemRepository).GetItemUserMultipleInPeriod
	/Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/repository/item.go:171
github.com/wheatandcat/memoir-backend/graph.(*Graph).GetItemsInPeriod
	/Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/item.go:142
github.com/wheatandcat/memoir-backend/graph.(*queryResolver).ItemsInPeriod
	/Users/iinoyouhei/go/src/github.com/wheatandcat/memoir-backend/graph/schema.resolvers.go:263

octocov導入

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

  • octocovを導入
  • PRにテストカバレッジを表示

scenarigo導入

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

アプリをアイコン& タイトルロゴの修正

PR1: https://github.com/wheatandcat/memoir/pull/128
PR2: https://github.com/wheatandcat/memoir/pull/133

  • アプリアイコン、通知アイコンを設定
  • タイトルログの新デザインに置き換え

Expo SDK 43にアップデート

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

iOSで共有画像を作成時に真っ白な画像になってしまう不具合を修正

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

wheatandcatwheatandcat

開発の報告

期間: 2021年11月7日-12月2日

実装内容

LPサイトの作成

GitHub: https://github.com/wheatandcat/memoir-lp

memoirのスライドを作成

GitHub: https://github.com/wheatandcat/memoir-slide-01

wheatandcatwheatandcat

開発の報告

期間: 2021年12月3日-1月5日

実装内容

開発ドキュメントを作成

リポジトリ: https://github.com/wheatandcat/memoir-handbook/pulls?q=is%3Apr+is%3Aclosed

wheatandcatwheatandcat

開発の報告

期間: 2022年1月6日-1月24日

実装内容

go 1.16にアップデート

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

  • GAE/Goが1.16までサポートしたのでアップデート

golangci-lintを追加

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

  • golangci-lintを導入
  • gosec等でエラーになっている箇所を修正
  • GitHub ActionsでPRをチェックするように修正

達成したタスクを検索する機能のGraphQLを追加

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

Expo SDK 44にバージョンアップ

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

wheatandcatwheatandcat

開発の報告

期間: 2021年1月24日-2月11日

実装内容

達成したタスクを検索する機能のドキュメント追加

PR: https://github.com/wheatandcat/memoir-handbook/issues/18

達成したタスクを検索する機能

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

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

  • 達成したタスクを検索する機能のアプリ実装

Handbookに編集履歴画面を作成

PR: https://github.com/wheatandcat/memoir-handbook/issues/17

Handbookに開発手順のガイド & ポリシー画面を追加

PR: https://github.com/wheatandcat/memoir-handbook/pull/28

お問い合わせの送信内容をスプレットシートに保存

PR: https://github.com/wheatandcat/memoir-lp/pull/2

wheatandcatwheatandcat

開発の報告

期間: 2022年1月25日-3月8日

実装内容

APIにバリデーションを追加

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

エラーにextensionsを設定する

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

【アプリ】GraphQLのextensionsでエラーハンドリングを追加

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

  • GraphQLは全てhttp statusが200で返ってきてしまい違いもメッセージのみなのでハンドリングし辛い
  • なので、extensionsにエラーコードを追加してアプリ側のハンドリングできるように修正

LPのレイアウト修正

PR: https://github.com/wheatandcat/memoir-lp/pull/6

LPに利用規約とプライバシー・ポリシー画面を追加

PR: https://github.com/wheatandcat/memoir-lp/pull/8

  • LPに利用規約とプライバシー・ポリシー画面を追加

アプリに利用規約とプライバシー・ポリシー画面を追加

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

  • 利用規約とプライパシー・ポリシーの画面を追加
wheatandcatwheatandcat

開発の報告

期間: 2022年3月9日-4月4日

実装内容

Androidの本番アプリでログインできない & 問い合わせ画面を作成

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

altテキスト

以下の不具合を解消 & 機能追加

  • Androidの本番アプリでログインできない
  • ログイン→ログアウト→ログインに失敗する
  • 問い合わせ画面を追加
    • 本番アプリでユーザーIDを確認できる手段として問い合わせ画面を実装

Androidの本番アプリでカメラが使用できない & AndoridでPush通知を受け取れない

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

Androidのフィードバック返信のstyleを修正

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

altテキスト

  • Androidのみ問い合わせ画面のstyleが崩れていたので修正

Androidの招待入力の表示を修正

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

altテキスト

本番の共有機能の挙動を修正する

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

altテキスト

  • Androidのダークモードで共有画像の背景が黒色になっていたので修正

Firebaseの設定のデプロイをGitHub Actionsで行なう

PR: https://github.com/wheatandcat/memoir-tools/pull/12

  • 本番環境でFirebaseの設定反映漏れが合ったのでGitHub Actionsでデプロイを自動化
  • デプロイにはfirebase-action を使用
wheatandcatwheatandcat

開発の報告

期間: 2022年4月5日-5月3日

実装内容

Storeのスクリーンショット作成

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




ライセンス情報の表示を追加

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

  • 使用しているパッケージからライセンスを表示するように修正

本番アプリを検証する

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

TextInputでAutoFocusを設定しているのにキーボードが表示されていない

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

AuthのUserが重複して作成されてしまうので、Transactionを追加

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

ログイン時に表示名の設定が存在しない場合にデフォルトで設定

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

  • 招待を実行時に表示名が存在しないとレイアウトがおかしくなる不具合の修正
  • アカウント作成時にFirebaseのAuthに使用したメールアドレスの名前を自動で設定するように修正

その他の細かいバグを修正

■ PR

wheatandcatwheatandcat

開発の報告

期間: 2022年5月4日-5月15日

実装内容

アプリのリリース

https://zenn.dev/wheatandcat/articles/20220503-memoir

  • アプリのリリースに合わせて記事を投稿
  • 2022年5月4日にリリース

トップ画面の文言を修正

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

  • フィードバックから対応
  • トップ画面のtypoを修正

iPhoneSE2で共有ボタンが見切れる

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

  • フィードバックから対応
  • iPhonSE2とiPhone8で共有ボタンのレイアウトが崩れているので修正

AndroidのPixel5aで閉じるボタンが見切れる

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

  • Pixel5aで閉じるボタンが見切れていたので修正
  • ディスプレイのパンチホールの対応

アカウントを完全に削除する機能を実装

PR①: https://github.com/wheatandcat/memoir-backend/pull/113
PR②: https://github.com/wheatandcat/memoir/pull/208

YouTubeのvideoIDが不正ですhttps://www.youtube.com/shorts/Sh8kOMr3JPY

  • アカウント削除機能を実装
  • 以下を削除
    • Firestoreのデータ
    • Firebase Authの情報
    • プロフィール画像

今週のmemoirを確認するでページング後にユーザー選択をすると、日付がおかしくなる

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

  • フィードバックから対応
  • 今週のmemoirを確認するでページング後にユーザー選択をすると、日付がおかしくなる不具合の修正

当日以外の日のタスクに存在しない場合の文言を修正

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

  • 当日以外の日のタスクに存在しない場合はこの日ののタスクは、まだありません
wheatandcatwheatandcat

開発の報告

期間: 2022年5月16日-6月7日

実装内容

Expo SDK 45に更新 + EAS + Hermes

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

EAS Submitを実装

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

expo-app-loadingからexpo-splash-screenに移行

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

Firebase SDK v9にバージョンアップ

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

AndroidのGoogleアカウントのログインでループする

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

  • ログイン後から画面が切り替わるまでにアプリが操作可能なので途中で操作すると、うまくログインできなくなるので、ログイン操作後にログイン中の表示を追加

フィードバック送信後に送信成功の表示を追加 #220

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

  • フィードバック送信後の表示を追加
wheatandcatwheatandcat

開発の報告

期間: 2022年6月8日-7月4日

実装内容

Cloud Runへ移行

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

gcr-cleanerを導入

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

  • gcr-cleanerを導入
  • Clou Runの前リリース分のイメージを自動で削除するように修正

デバッグツール delveを試す

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

zap導入 & 構造化したログを出力できるようにする

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

wheatandcatwheatandcat

開発の報告

期間: 2022年7月5日-8月7日

実装内容

gqlgen + opentelemetry-go + Cloud Traceでパフォーマンス測定

PR1: https://github.com/wheatandcat/memoir-backend/pull/127
PR2: https://github.com/wheatandcat/memoir-backend/pull/128

Cloud Profilerを試してみる

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

memoir v1.4.0のリリース

  • リリース日: 2022年7月18日(月)

アプリのパフォーマンス測定を追加

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

  • React Profiler APIを使用してレンダリングの更新を取得して測定
  • 想定よりも遅い場合は、警告を表示するように修正

日付のスクロールが削除される不具合の修正

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

日付のスワイプの挙動とアイテムをタッチ時のスクロールの挙動の修正

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

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

Expo SDK 46にバージョンアップ

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

  • Expo SDK 46にバージョンアップ
  • React 18でFCから、childrenが削除されたので、コード側に追加
  • その他、typeを修正

memoir v1.5.0のリリース

  • リリース日: 2022年8月07日(日)
wheatandcatwheatandcat

開発の報告

期間: 2022年8月8日-9月21日

実装内容

継続的にテストの情報を記録する

PR1: https://github.com/wheatandcat/memoir/pull/239
PR2: https://github.com/wheatandcat/memoir/pull/241

テストコードの追加

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

  • 継続的にカバレッジを計測できるようにしたので、テストコードを追加

typed-document-nodeへの移行

PR: typed-document-nodeへの移行

  • mswでのインテグレーションテストの事前準備でtyped-documentを導入

mswを導入してGraphQLをモックしたテストコードを書く

PR1: https://github.com/wheatandcat/memoir/pull/249
PR2:https://github.com/wheatandcat/memoir/pull/251

PR毎にCloud Runの環境を作れるようにする

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

backendも継続的にテストのカバレッジを記録するように修正

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

zapのINFOログがstderrになっているので修正

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

ローカルPush通知が重複する不具合を解消

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

  • ローカルPush通知が重複する不具合を解消
    • ホーム画面を開いた際に重複をチェック
    • 設定時に重複しないように修正

日付を編集できるようにする

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

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

  • アイテムの日付を編集を出来るように修正

memoir v1.6.0のリリース

リリース日: 2022年9月21日(水)

wheatandcatwheatandcat

開発の報告

期間: 2022年9月22日-1月23日

間で別のアプリ開発を行っていたので、久しぶりの更新

実装内容

Goテストを並列実行

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

静的解析でCustomErrorでラップされていないで return を修正する

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

Go 1.19にバージョンアップ

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

  • Go 1.19にバージョンアップ

goimportsにlocalのオプションを設定

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

FirestoreのCountを使用してtotalCountを返す

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

  • FirestoreにCountが実装されたので対応
  • totalCountを返すように修正

バッチ書き込みをしている箇所のe2eのテストケースを追加

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

  • バッチ書き込み→トランザクション更新に移行するので、その対処箇所のテストケースを追加
  • 以下のe2eのテストケースを追加
    • 招待から共有メンバーの認証まで
    • アカウント削除

Firestore.BulkWriterからRunTransactionに移行

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

Expo SDK 47にアップデート

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

今日に移動ボタンを追加

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

  • 今日 に移動するボタンを追加

アイテムを登録してからダイアログが閉じるまでに、登録ボタンを押すと二重にアイテムが登録されてしまう

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

  • バグ報告から対応
  • アイテムの追加の終了のタイミングに合わせて、「入力」ボタンをすると重複して登録されてしまう不具合が合ったので修正

LPサイトにko-fiボタンを追加

PR: https://github.com/wheatandcat/memoir-lp/pull/21