yuki-hinata / hinata-blogs

Hi I'm Yuki!

---

👨‍💻 About Me :

I am a beginner application engineer

---

🛠️ Languages and Tools :

     

---

🔥 My Stats :

hinata-blogs's Issues

push通知の実装

要件

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

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

• expo-notification
• cloud functions
• sdk-node

チャット画面「リッチ化」

• lineのグループのような見た目にする

希望要件

• アイコンが有り、吹き出しの上にユーザーのニックネームを表示させる。
• 吹き出し内の時刻を消すことができれば消し、吹き出しの左に表示させる

giftedcahtのonSend切り出し

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

チャット画面内でのシステムメッセージの表示(優先度中)

現状

• ユーザーが新たにチャットルームに入った時に何も表示されず、現状その部屋に人が何人いるのか分からない。

解決策

• その部屋にユーザーが追加されたときに、システムメッセージで「〜が新たに入室しました」みたいなメッセージを表示する。また、チャット画面の名前の隣に設定ボタンを設置し、そこからその部屋にいるユーザーを見れるように。

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

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

推しメン診断画面作成

主な機能

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

画面の挙動やデザイン

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

方法について

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

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

• 概要
  推しメン決定画面において、「この推しメンを決定する」を押したあとに遷移する画面。

• 要件
  タイトル→「チャット部屋に入る」
  説明文→「チャット部屋についての説明」を書く。
  ボタン→チャットのルームに遷移するボタンと自分の所属しているルームが表示されている「ホーム画面」のようなものに移動する「戻る」ボタンの２つ

• 今イシューで満たすこと
  チャットの実装が最優先であると思うので、チャットの画面へ遷移するナビゲーションのみ実装する。

課題

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

トップ画面の作成

• アプリを開いたときに出力される画面の作成。
• 表示すべきは新規登録画面へとナビゲートするボタンの作成

診断画面を一つに

今ははいを押すとナビゲーションして、次の質問とかだが、はいを押すと次の質問とかにしたい。

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

• 調査すべきはどのぐらいの大きさなら、アプリが落ちないか。ここをはっきりさせれば、解決策の検討もしやすい。

• 考えられる解決策→アイコンの隣に「〇〇GB以上の画像は指定できません」みたいな風に表示する。

チャット画面実装

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

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

要件

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

情報

• getAuth→firebase

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

要件

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

仕様

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

関係しそうなファイル

• YourRecommend.tsx
• RoomList.tsx

serverディレクトリの実装

デモアプリの作成

https://www.fluidui.com/　

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

現状の不具合

• 登録時、アイコンを設定した後にメアドを変更すると、そのメアドの画像が見つからないため、エラーが起こる。
• 登録時、メアドが既に使われてた場合などメアドを変更して再度登録しても上のやつと同じエラーが起こる。
• 編集を反映するボタンを２回押さないとだめ。

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

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

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

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

firebaseのデータ取得hooksの作成

作ろうと感じたきっかけ

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

注意

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

画面遷移時に一瞬undefになってしまう。そのせいでfalse側の質問が表示されてしまう。

• 仮説→一瞬useStateで保持した値が、undefinedになってしまうため、それがfalse認定されてしまうため、一瞬false側の質問が表示されてしまう。

• 解決策→undefinedのときにloadingを表示できるようにする。

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)

現在いるroomIdを取得する

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

roomListの表示

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

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

新規登録画面の作成

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

バリデーションの追加

#15

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

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

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

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

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

ログアウトを行う→新規登録をする→エラー発生

ログアウトを行う→新規登録をする→エラー発生
原因→新規登録後userに情報が入るのはそりゃそう。でもroomIdは入ってちゃダメなのに入っている。なので、tabのところに遷移する。

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

診断画面のテスト作成

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

ユーザープロフィール編集画面の実装

• tabナビゲーター実装後に行う。
• 左にそのユーザーが設定したアイコン画像を表示させ、その右にニックネームを表示。そしてその右に「編集」ボタンを作り、そこを押すと編集画面が表示され、アイコン画像、ニックネームの変更することが可能。
• 「新規登録画面」を参考に実装しよう

React 18.0.0へのアップデート

不具合修正

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

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

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

firestore過剰読み出し[至急]

• この画像のように、無限ループが行われていた。原因として考えられるのは、onSnapshotを使っているuseEffectの第２引数にnameを指定していたこと。

チャットの履歴が見れない

• 一度Backボタンなど、前の画面に戻り、再度チャット部屋に入ると前見ることができていたメッセージが表示されていない。
• useEffectの第２引数がnameだけだからレンダリングされず、表示がされないと考える。

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

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

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

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

renderActionをクリックするとアプリが落ちる

• renderActionを使って、iconを表示させる。その後クリックするとアプリが落ちる

アイコンについて最初に設定されたものから変更するときに、ユーザーのメアドでストレージに保存しているので、違う画像が表示される可能性あり

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

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

jest 27.5.1へのアップデート

RootNavigatorの書き換え

• 画面遷移は可能であるが、型エラーになってしまう。
• 公式ドキュメントを参考に、型指定を行う。

eslintの追加

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

タブナビゲーターの実装

• 一番下の画面にチャットの部屋一覧が表示される画面とユーザーのニックネーム、プロフィール画像を変更できる画面の２つを行き来できるようにする。

typescript 4.6.3へのアップデート

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

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

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

新規登録画面の作成

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