WebUI作成作業メモ1日目

$ npx create-react-app keicho-webclient --template typescript
- create-react-app
- --typescriptではダメになったっぽい
reportWebVitalsってのが新しく増えてる
ルーティングは一旦置いといてメインの画面を作ってみる
- 前回Appなら書いて行ったら肥大化してしまったので気をつける
Material-UI
- $ npm install @material-ui/icons
- AppBar
- nisbot
チャット CSS
- HTMLとCSSでLINE風チャット画面(会話方式)を記事に表示する方法(ほんとに売ってるラインスタンプイラスト41個付き) | ナコさんのブログ | nako-log
- To import Sass files, you first need to install node-sass
- $ npm install node-sass
- Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
- $ npm install node-sass@4
チャット部分はコンポーネントに切り分けた
後で検討: 投稿の間の隙間が異なるの気になる
後で検討: ボットの発言だけコンテンツより長く伸びる

Githubに置いてNetlifyでデプロイする

次にやること

スマホで開くと文字が小さいときはズームしてしまう
- 直した
- ボットの発言だけ伸びるのも嫌だったので全部伸ばしてみた
テキストエリアでの改行で発言追加
- - word-break: break-all;することにした(日本語ユーザなので)
テキストエリアでの改行でサーバを叩く
- Flask-CORS
- 400 Bad Requestになった→JSからFlaskを叩いて400 Bad Request
レスポンスを表示する
- とりあえずnopを返すようにして、無事表示できた
ページを開いた時点で新しいenvオブジェクトを作るようにする
- env作成APIが必要
- 新規作成してIDを返す
- サーバをいじるとき、いちいちデプロイしないでローカルで試したい
  - FlaskをHTTPSにする
  - 必要なかった
動くようになった
- ローカル
- サーバー
ローカルとかサーバーとかの表現が微妙なので整理した
- 上記のスクショはTypeScriptのクライアントをローカルとリモートと両方で試して問題なく動いたって話
- 後者は開発用PCではなくスマホからアクセスしている

次にやること

ログが表示できるようにする
- Regroupにインポートしたり、Scrapboxに貼ったり
テストできるようにする
- たぶん内部構造を少しいじりたくなると思うのだけど、テストなしでいじると地獄だから
  - 学習データにするためや、Regroupにインポートするためにいじりたい
Firebaseに溜まったデータをローカルにダウンロードして解析できるようにする
どれをやるのか相談してみた
- 会話ログ20210120
- Regroupにインポートできる形でのログ出力が大事

🪴 Quartz 4.0