yuki-hinata / hinata-blogs Goto Github PK

TypeScript 99.17% JavaScript 0.83%

hinata-blogs's Introduction

今後の追加機能について

ログイン、ログアウト機能実装→すぐにできそう。
現在はタブが２つしかないが、ライブの感想とかを投稿できる「ライブの感想タイムライン」の追加
一番やりたいのは、スクレイピング。推しメンのブログのみを見れたり、推しメンの出演する番組をカレンダー形式で見れる機能。

コード的な観点

推しメン診断の部分が４つあり冗長なので、そこの改善。
デザインがdasai。

ユーザーの行動	結果	必須（ ✅ ）or ストレッチ（ 🌕 🌗 🌑 ）
ユーザーは新規でアプリを起動すると	新規登録画面が開く	✅
	ログインと新規登録が選べる	🌗
新規登録画面でメールアドレス、パスワード、ニックネーム、アイコンを入力し、Submit する	診断画面に行く	✅
診断画面では、複数個の質問に対してはい/いいえで回答する	回答が成功する	✅
	回答内容によって次の質問が変わることがある	✅
	質問は全画面に出てきて、はい/いいえを選ぶとアニメーションで左右に飛ぶイメージ	🌕 ※詰まり過ぎたらスキップ
診断が終わると、	推しメン決まりました画面に遷移する	✅
推しメンは	実験用に 10 人弱のメンバー + 秋元康から決定される	✅
推しメン決まりました画面で、「チャットへ行く」といったボタンを押すと	チャット画面に遷移する	✅
推しメン決まりました画面で、「診断やり直す」といったボタンを押すと	診断画面が再度開く	✅
チャット画面に遷移すると	過去のチャットのやり取りは見えない	✅
チャット画面に遷移すると	同じ推しメンの人とのみやり取りができる（それ以外の人はいない）	✅
テキストの送信が	できる	✅
画像の送信が	できる	✅
送信した自分のチャットのアイコンをクリックすると	過去に送信したチャットの合計数が見れる	✅
自分以外の同部屋のユーザーがチャットを送信すると	自分の端末にプッシュ通知が届く	✅
画面内のどこかからメニューに移動でき、	ニックネームとアイコンを変更できる	✅
ライブ日記投稿画面へ遷移するナビゲーションをクリックすると	投稿画面に遷移できる	🌕
	ライブ日記が投稿成功する	🌕
ライブ日記一覧画面へ遷移すると	自分を含む全ユーザーのライブ日記を新しい順に見ることができる(タイムライン)	🌕
	ライブ日記に推しメンのタグ付ができたり、フリーワード検索機能が使える	🌗
レベルが上がる	ライブ日記の投稿回数に応じてレベルが上がる	🌑
	友人の招待が成功した回数に応じてレベルが上がる	🌑
	チャットの送信数に応じてレベルが上がる	🌑
推しメンを複数人登録する	成功する	🌑

プルリクエスト提出時のルール

feat: A new feature
fix: A bug fix
docs: Documentation only changes
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
refactor: A code change that neither fixes a bug nor adds a feature
perf: A code change that improves performance
test: Adding missing or correcting existing tests
chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

hinata-blogs's People

Contributors

Watchers

hinata-blogs's Issues

新規登録画面の作成

https://www.fluidui.com/　
これをあくまで参考に「新規登録画面」を作成する。

チャット画面「同じ推しメン判断方法」

#30 の完成へやるべきこと。

YourRecommendのuserIdsを取ってきて、そのidをsetMessage内のuserにセットする。感じ

所属部屋一覧表示画面の実装

チャット画面から戻る際に、行くのがこの画面。自分の所属しているチャット部屋が一覧で表示され、その名前の部屋をクリックすると再度チャットの画面に行ける。
部屋に戻った後と前で表示されるチャットの内容が変化してはいけない。
レイアウト的には左に推しメンの画像（丸）。その右に「小坂菜緒のチャットルーム」みたいな感じで表示したい。

ログアウト処理時の不具合

onSnapshotの購読を解除していないことによって、生じるエラーがある。
ログアウトを行って、新規登録するとチャット確認画面が映る

現在いるroomIdを取得する

推しメンが二人いる以上現在どの部屋にいるのかについて判断する方法がほしい

eslintの追加

見やすいコードを書くために、セットアップが必要。

推しメン診断画面作成

主な機能

はい/いいえの２択で選択できるようにして、その答えによって次に出てくる質問を変更する。

画面の挙動やデザイン

画面全体に質問が出る感じ。で、OKボタンやボタンを押すと、次の画面へ行き、２個めの質問が出る。

方法について

if文とかで判断するのが良いのだろうが、ネストがかなり深くなりそう
-

iconにGBが大きい画像を設定すると、expoが落ちる。

調査すべきはどのぐらいの大きさなら、アプリが落ちないか。ここをはっきりさせれば、解決策の検討もしやすい。
考えられる解決策→アイコンの隣に「〇〇GB以上の画像は指定できません」みたいな風に表示する。

推しメンを１人以上持てるようにする。

要件

現状は推しメンを一人しか持てない状況であるが、２人以上持てるようにする。それに伴い１人のユーザーが複数の部屋に所属できるようになるし、部屋一覧に複数の部屋が表示されるようになる。

仕様

推しメン決定の画面の次に「2推し」診断画面を追加する。「診断する」ボタンと気になるメンバーを設定しない「設定しない」ボタンを追加する。
「設定しない」ボタンを押した際には、現在と同じルーティングをする。「診断する」ボタンを押した際には、再診断のロジックと同じように質問の一番最初に遷移させる。
それが終了した際の画面も「推しメン決定画面」と同じでいい。
その後「チャット入室画面」には遷移するが、そこが問題。→チャットに遷移するのは第１推しメンの部屋でいい。第２推しメンの部屋はルーム一覧画面に表示する感じ。入室時間(enterRoomTime)は共通で良い。

関係しそうなファイル

YourRecommend.tsx
RoomList.tsx

React 18.0.0へのアップデート

jest 27.5.1へのアップデート

バリデーションの追加

#15

firebaseのデータ取得hooksの作成

作ろうと感じたきっかけ

いちいちcollection使って〜、参照取得して〜とかやるのが面倒。内部処理はだいたい同じなので、なんか一つにまとめたいなと思う。

注意

優先度はめちゃ低いので、

firestoreにiconに有効なURIを埋め込む

チャットでのアイコン、プロフィール編集画面でユーザーのアイコンを保持しておく必要があるため、firestoreで保存されたアイコンのURIを取ってきてきて表示する必要がある。
そのため、firestoreに保存されたアイコンのURIが有効でないと、表示できない。

ニックネーム、アイコンを変更してもチャット画面では反映されていない。

設定画面でアイコン、ニックネームを変更後、チャット画面を見ると前のアイコンが表示されている。

課題

公式を読んでこれだなというのがわかる→それを「こう使う」と上手くいく！というのがまだわからない

expoでのファイル構造の理解

screenに画面表示を行いたいものを追加するのは分かる。ただその作ったコンポーネントをどこで、importして使うのかがいまいちわからないので、調べる。
#4
これとも関連性が高く、トップページに表示するscreenの設定法もわかればスムーズ。

アプリ開いたときにチャット画面を表示させる。

要件

expoを開いた瞬間、チャット画面一覧を表示させる。
イメージはマナリンク。あれも一回キルしても再度開くと、以前ログインしたユーザーの情報が表示されている。

情報

getAuth→firebase

部屋一覧からその部屋に入ったとき、違う部屋で発言したメッセージも表示されている。

みーぱんの部屋でメッセージを送り、部屋に戻る。そしてひなのの部屋に入るとみーぱんの部屋のメッセージが表示されている。

チャット画面「送信処理の実装」

#30 の完成へやるべきこと。

具体的にはonSendの中をどう実装するのか？

roomListの表示

https://reactnativeelements.com/docs/2.3.2/listitem

これ使ってmapする。そのためにroomIdが入った配列を取ってこなければならない。

新規登録画面でのレンダリング回数の節約

consoleを埋め込んで確認したところ、インプット欄に文字入力を続けるたびにレンダリングが走っていた。

push通知の実装

要件

自分の所属している部屋で自分以外の誰かが発言を行った時、push通知を受信できるようにする。
アプリを開いているときにはpush通知は出さずに、アプリを裏で開きっぱなし(フォアグラウンド)、キルしている場合のみpush通知（イメージは上から何か出てくるやつ）を受け取る。

使用するライブラリ・メソッド

expo-notification
cloud functions
sdk-node

チャット部屋への入室確認画面の作成

概要
推しメン決定画面において、「この推しメンを決定する」を押したあとに遷移する画面。
要件
タイトル→「チャット部屋に入る」
説明文→「チャット部屋についての説明」を書く。
ボタン→チャットのルームに遷移するボタンと自分の所属しているルームが表示されている「ホーム画面」のようなものに移動する「戻る」ボタンの２つ
今イシューで満たすこと
チャットの実装が最優先であると思うので、チャットの画面へ遷移するナビゲーションのみ実装する。

新規登録画面の作成

トップ画面の「新規登録を行う」をpushすると、その画面に行く。
デモアプリを参考に

チャット画面実装

まずは推しメンが同じ人同士が連絡を取れるようにしたい。
これを更に分解すると、「送信処理の実装」「推しメンが同じ人同士とはどう判断するか？」の２つに分かれるはず。

デモアプリの作成

https://www.fluidui.com/　

これを使ってアプリの作成イメージを固める。仕様の理解がまだ深いうちに決めてしまう。
期間は３時間ほど。これに凝る必要はなし。イメージを固める。

typescript 4.6.3へのアップデート

giftedcahtのonSend切り出し

onSendの処理だけChatScreen上に書いたままなので、その部分を切り出したい。
一応ファイル自体は書いてあるが、それをonSend内で使用したとき、送った文面が表示されなかったため、そこで止まっている状況。
調査状況→onSnapshotの前のconsoleは実行されるが、docChangeの中のconsoleは実行されない。

PUSH通知の調査

push通知にはローカル通知とリモート通知の２つがある。ローカル通知は指定されたコンテンツや配信条件に基づいてユーザーへ通知を送る。今回はローカル通知。
FCMを使うと自分でswiftなどのネイティブ言語で書かなければいけないので、厳しい。だが、expoが自動でそこの分岐もやってくれるので、expo-notificationを使う。
参考サイト(expo-notification + cloud functions)
https://qiita.com/sei_sato/items/cb0bdb35a3eedc142219
https://docs.expo.dev/push-notifications/sending-notifications/
参考サイト(FCM + Cloud function)

推しが二人いるときでも一人しか表示されない

表示についてはうまくいきそう→一人しかいないときにレンダリングが走ってしまい、それが保持されたままなので、２人推しメンがいるのに１人しか表示されていない。

Originally posted by @yuki-hinata in #57 (comment)

不具合修正

会員登録を行う際に、storage/object-not-foundエラーが発生する。
firestoreのfirstAnswerに空文字列が入る。
メアドを変えて、再度会員登録しようとしてもできない。(アイコンを変更すればできる)→userの挙動によるので、後でいい。

診断画面のテスト作成

手動で確認はできるが、一々会員登録を踏まないといけないため、かなり手間がかかる。そのため、テストコードを書くのが、一番効率が良く、安心だと思う。

診断が終わったかどうかを判断する変数の検討

以前はroomIdが存在しているかどうかで診断を途中でやめたとしても、最初から診断させるようにしたが、推しメン複数保持機能の追加によって、その判断ができなくなった。そのため、roomIdの代わりとなるものを作るor探す。
loadingはだめ。障壁となるのはwhereにundefinedが入ってしまうことによる、エラーの発生。これが起きるとTop画面から進まない。