The ieru from addtobasic

chatItemのhover時のアイコンに枠と背景などをつける

概要

これを参考につくりたいという話

やること

枠の作成.
hoverの色などをこねこね,

チャットひとつひとつにメニューを作成

概要

チャットひとつひとつに修正や匿名化などの情報をしまい込むためのメニューを作成する.

やること

アイコンを探す.
デザインを考える.
実装する.

GitHub Actionsでプッシュからデプロイまでの自動化

概要

GitHub Actionsでfirebaseにデプロイする.

やること

workflowのymlファイルの作成
firebaseとの設定

チャットの複数行の送信

概要

チャット欄で複数行の分の送信の実装.

やること

長文の折りたたみ
inputからテキストエリアの変更

navigation_barの折りたたみ

概要

画面のサイズに応じてnavigation_barを折りたたむ.

やること

折りたたむ際の画面サイズを決める.
MUIで頑張る.

typetalkに送ったOGP画像がずれていたので修正

概要

一応デプロイしたので見てくださいとtypetalkにURLを送ったらOGPが見切れていたいので修正する.

やること

typetalkがどのSNSに対応しているのか確認.
そのSNSに合うようにOGP画像を用意する.

トピック名修正機能の実装

概要

トピックhover時にメニューの表示をしてメニューからトピック名を修正する.

やること

hover時にアイテムの表示.
トピック名修正関数の実装.
選択時にトピック名修正関数を呼ぶ.

firestoreの読み取り回数が大変なことになることの改善

概要

firestoreの読み取り回数が一瞬で5万とかになるのがやばすぎるのでリファクタリングする.

やること

原因解明.
ドキュメントの読み込み.
リファクタリング.

プロダクト名の変更

概要

並々ならぬ理由でプロダクト名が変わったのでietaからieruへの変更

やること

GitHubリポジトリ名の変更
ファイルやフォルダ名の変更
firebase周りの諸々の変更

Security Policyの修正

概要

security policyを真面目に書く

やること

security.mdの修正

参考

https://docs.github.com/ja/code-security/getting-started/adding-a-security-policy-to-your-repository

fontの設定と文字の大きさの修正

概要

フォントの設定をしてついでに文字の大きさなどを調整する.

やること

フォントの決定.
フォントの設定.
フォントの適用.
各要素の文字の大きさの修正.

メモ

MUIのTypographyもいい感じに使えるかも.

匿名顕名変更の同期

概要

2つのウィンドウを開き匿名 - 顕名の変更をしようとした時に同期が上手く行っていないのか片側に反映されないのでそこの改善

やること

原因をみつける. (テキストなどは上手くいっているので)
同期の実装

選択しているchannelがどれなのかをわかりやすくする

概要

今mainに表示してるchannelは何なのかを分かるようにsidebarで強調して表示する.

やること

現在表示してるchannelの取得.
channnelの強調表示.

いいねを取り消す機能の実装

概要

いいねされている状態でいいねボタンを押された場合にいいねを取り消すようにする.

やること

いいねの取り消し.

色合いが微妙な気がするので修正する

概要

テーマカラーなどの色の合わせ方が微妙な気がするので吟味して修正する.

やること

色の吟味と選択.
色の定数化.
singinボタンやsidebar, headerなどへの適応.

状態管理をReduxに書き換える

概要

状態管理がmobxだったりuseContextだったりするのでReduxに書き換えて統一する(したい)

やること

reduxのインストール.
状態管理の書き換え.

入力が改行やスペースで終わっているときに削除する

概要

テキストの終わりに大量の改行などを入れられると画面に大量のスペースができてしまう恐れがあるのでそれを改善する.

やること

ユーザーの入力を判断し適切な値に修正する.

Sign in の前にプライバシーポリシーに同意させる

概要

googleのsign inのまえに誹謗中傷, 他人を不快にさせる発言などは禁止するなどのプライバシーポリシーに同意させる.

やること

プライバシーポリシーの作成.
誹謗中傷などの対応の流れを記載する.
同意ボタンが押されてからsign in ボタンを押せるようにする.

コメント送信時に時間の表示がinvalie dataと表示される問題の修正

概要

コメント送信時にinvalid dataと表示されるのの改善(読み込み直すと治る)

やること

原因探し.
原因の改善.

色の定数化

概要

SmartHRの資料に乗っ取って全体の色を定数化する.

やること

色を決める.
色を定数化する.
色を適用する.

送信ボタンの作成

概要

画面サイズによって送信ボタンを作成する.

やること

デザインを考える.
送信ボタンを作成する.
画面サイズによって送信ボタンの表示を切り替える.

channnelsとadd channelを分けるバーの修正

概要

channnelsとadd channelを分けるバーがborderを使用しているため中心が開いてる時がある(?)ので修正

やること

バーの修正.

使っていないファイルの削除

概要

MUIに書き換えた際に使っていないコンポーネントが残っているので, それらの削除.

やること

使用していないコンポーネントの削除.

グループ作成機能の実装

概要

チャットツールである以上, それぞれのグループを作成する機能が必要.

やること

グループ作成ページ
- グループ名の設定.
- グループ画像の設定.
他ユーザーの招待機能
- グループ作成者にメールアドレスを入力させる.
- メールアドレスに招待URLを送信.
- GoogleでサインインしたときのURLと確認しグループへ参加.

LP(sign inページ)の修正

概要

LPがsign in だけの簡素なものなのでちゃんとしたLPを作成する.

やること

#6
プライバシーポリシーの作成.
LPの実装.

faviconの変更

概要

faviconデフォルトのnextのアイコンではなくいい感じのものに変更する.

やること

ツールのアイコンの作成.
faviconの作成, 適用.

コメント送信前に匿名かどうかを選択する機能

概要

コメント送信前に匿名かどうかを選択して送信できるようにする.

やること

inputの部分にチェックボックス的なのを用意する.
チェックボックスで顕名か否かを管理する.
送信時に顕名かどうかの状態で送信する.

importの順番とCSSの順番を揃える

概要

importの順番やCSSの順番がバラバラなのでprettierでプラグインを入れて整理する.

やること

プラグインを探す.
プラグインをインストールする.
prettierを実行する.

グループ招待フォームの実装

概要

グループにユーザーを招待するためのフォーム, ページが必要. (#28 参考)

やること

フォームの作成
- グループIDの入力
- 招待する人のメールアドレスの入力

リアクションの数に応じてチャットを装飾する機能

概要

チャットのリアクションの数に応じて文字を大きくしたり透過率をあげたりする

やること

チャット参加者に応じてチャットの装飾の段階を分ける.
装飾の変化によってチャットがとずれないように実装する.

リアクション機能の実装

概要

メッセージそれぞれにリアクションをできるようにする.

やること

メッセージにリアクションボタンの作成
絵文字リストの読み込みと表示.
押された絵文字の保存.

いいねボタンにhoverしたときに誰が今までいいねしたかを表示する

概要

以下の画像を参考にhover時に誰が反応したのかを表示する.

やること

hoverのデザインを考える.
hover表示の実装.

スマホでsidebarを開くときにmainが崩れるのを修正

概要

スマホなど画面幅が小さいときにsidebarを開くとメインのチャットが崩れるので暗くして隠す, もしくは要素を画面9割ほどまで開くなどして見えないようにする.

やること

隠す or 崩れないようにする方法を決める.
実装する.

リプライ機能の実装

概要

リプライ機能の実装

やること

コメントに対してのリプライのデザインを考える.
リプライの機能を実装する.

文字削除機能の実装

概要

送信したテキストを削除することができる機能の実装

やること

チャット修正の関数を実装する.
すでにあるチャットの削除ボタンからチャット修正の関数を呼ぶ.
onSnapshotでロードなしで消えるようにする.

誤爆を防ぐため, 顕名の時は顕名と, 匿名の時は匿名と分かりやすくする.

概要

花田軍曹からのフィードバックで「誤爆は心理的安全性を損なうよねーなにか分かるようにしたらよいかも(要約)」と言われ「たしかに！！」となったので誤爆を防ぐため, 顕名の時は顕名と, 匿名の時は匿名と分かりやすくする.

やること

顕名, 匿名と分かるようなデザインを考える. (フォームの中に匿名ON - OFFボタンを入れるなど)
考えたデザインを実装する.

READMEを真面目に書く

概要

READMEをSetUpなどから真面目に書く

やること

README.mdの修正

チャットが10件までしか表示されないバグの解決

概要

チャットがロードした時に10件までしか表示されないバグの解決.

やること

バグの原因解明.
解決.

MUI v4をv5に書き直す.

概要

仕様するMUI v4からv5に変えたのにあたって該当部分を書き直す.

やること

アイコンの選び直し.
スタイリング方法をstyled-componentsからMUI v5のsytled-componentsもどきに書き直す.
package.jsonからv4を削除.

いいね機能の実装

概要

typetalkのチャットのようないいねを送る機能を作成する.

やること

いいねを送る機能の実装.
送られたいいねを確認できる機能の実装.
いいね0と1以上の時にアイコンを変更.

やること

匿名画像の色分け.

addtobasic / ieru Goto Github PK

ieru's Introduction

ieru's People

Contributors

Stargazers

Watchers

ieru's Issues

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

参考

概要

やること

メモ

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要

やること

概要