Firebase Hostingのwebframework、簡単にNext.jsをHostingできて便利なのですが、Dynamic Routingのページに直ランディングすると404エラーになってしまい、解決方法を調べていました。 結論だけ言うと、Pages RouterではなくApp Routerにしたら解決しました…

実は結構前からfirebase-framework-toolsで遊ぶことを目的として自分のブログを作ってみている。 先週まとまった時間が取れたので、少し体裁を整えてみた。 YSN Blog といってもまだ読みにくいので、もうちょっとマージン調整したい。 具体的にやったことは…

Next.jsのバージョンを上げている - YSNHatenaBlog 前回記事でNext.jsのバージョンを上げてハマっていうたけど、何も問題なかった。 Server Error Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This co…

よいデータ設計が思いつかないので、気分転換も兼ねてNext.jsのバージョンをv11.1.0に上げようとしている。 % yarn yarn install v1.16.0 [1/5] Validating package.json... [2/5] Resolving packages... [3/5] Fetching packages... error next@11.1.0: …

今練習で作ってるテニスコート検索のサイト。各テニスコート詳細ページのタイトルを「（コート名）の場所」にしたけど、SEO的に悪化したような気がするので戻した。 tennico.app とはいえそもそも流入ほぼ無い状態。検索キーワード候補を見ても、「テニスコ…

また細かい話。 ここ参考にさせていただいただけなのですが。formのフォントが16px未満のときに発生するらしい。 これだと入力後にもう一度全画面表示に直さないと検索結果が見られないので不便。 Before pgmemo.tokyo 16pxに設定して修正。 After viewport…

Safariで開くとoverflow-wrap: anywhere の範囲の文字列が折り返されず、画面外にテキストが続いてしまうことがある件。 そもそもoverflow-wrapはSafariで非対応。 developer.mozilla.org これで折り返せた。 overflow-wrap: 'anywhere' word-break: 'break-…

画面遷移しても状態保存しておこうと思い、再度reduxを見直していたが、これを見つけてちょっと感動した。 redux-toolkit.js.org reduxの構成にしたい人はこれ入れておくとよさそう。 action, reducer, selectorの記述が少ない reduxは何と言ってもコードの…

もともと google-map-react を使っていたのを @react-google-maps/api に変更。 google-map-react はダウンロード数が多く、当初必要だった要件を満たしそうだったので導入したものの、デフォルトのマーカーへの変更を考えたときに、 new maps.Marker({ posi…

tennico.app 公私共に忙しかったので進捗悪かったけど、とりあえず23区だけ。 市区町村入れるとあと44ありそう...。 ただここでデータの形式についてちょっと考えたいかもしれない。 特に料金が複雑で検索パラメータとして入れにくい。 どう探したいかを考え…

tennico.app 都内のテニスコートを探してはデータ入力していっている。 改めて思ったのはテニスコートの料金って結構複雑であるということ。 時間帯 季節 コート 地域住民かどうか 照明利用有りか などで料金は変わるし、予約できる時間単位（1時間、2時間な…

いままではプロトタイプの意味も含めて住所は1 fieldに格納していたけど、都道府県、市区町村、残りで分けるようにしてみた。もっと細かくもできたかもしれないけど、どうやって探すかを考えればそこまで詳細じゃなくてもよいでしょうと。入力も大変だし。 …

Firestore rulesのテストを書いていく。 initializeAdminAppで取得したappでfirestoreに書き込む際、Timestampの型はfirebase-admin由来でないとエラーになった。 Value for argument "data" is not a valid Firestore document. Detected an object of type…

Firestoreルールのテストの書き方を復習がてら再調査。 firebase.google.com カバレッジの取得。そういえばできた気がする。 http://localhost:8080/emulator/v1/projects/<project_id>:ruleCoverage.html Firestoreに限らないかもしれないが、最初のデータセットアップ</project_id>…

Firebase Emulator x Next.jsの構成で、yarn serveを使うとブラウザで net::ERR_CONTENT_DECODING_FAILED が出ていた。 net::ERR_CONTENT_DECODING_FAILED 200 (OK) gzipされてないのにgzipのヘッダがついてる模様。 github.com 結局このissueからたどって直…

いろいろ苦戦したけど何とかできた。 やりたかったこととしては、Firestore EmulatorをGitHub Actions実行時のCIサーバで起動してCloud Functionsとfirestore.rulesのテストを行うこと。 まだrulesのテストはできてないが、雛形はできたのであとは流れででき…

テストはfirebaseの設定ファイルいらないはずなので、pushしなくてもGitHub Actionsを回せるのだが、手元の開発環境では設定ファイル参照して、GitHub Actions実行時は設定ファイルを無視あるいはダミーする、みたいなことがいい感じにできないか考え中。 一…

この辺が参考になりそう。 qiita.com 調べてみるとDocker Composeでやってる例が多そう。 firestore local emulator を docker-composeで動かす - Qiita DockerでFirebase Local Emulator Suiteを起動する。 - Qiita これも参考になりそう。 zenn.dev import…

algoliasearch がmockできない。 i Running script: jest FAIL src/functions/__tests__/index.test.ts ● Test suite failed to run TypeError: algoliasearch_1.default is not a function 2 | import * as functions from 'firebase-functions' 3 | > 4 | …

CloudFunctionsテスト導入。 このエラーが出る。 % yarn test yarn run v1.16.0 $ firebase emulators:exec 'jest' i emulators: Starting emulators: functions, firestore, hosting ⚠ functions: The following emulators are not running, calls to these…

firebaseプロジェクトにテストを導入してみる。 馴染みがあるjestを使う。やり方は2種類。 Babelで使う Getting Started · Jest ts-jestを使う Jest - TypeScript Deep Dive 日本語版 直接Babelは使ってないのでts-jestで。型チェックも効く。 yarn add -D j…

そろそろテストを書いてみる。 firestoreのルールもテストしたいので、この際firestoreの設定も含めるようにしてみる。 index取得。 firebase firestore:indexes > firestore.indexes.json ルールはコピペするしかない？ firestore.rulesに書く。現状の内容…

redux-dev-tools入れた https://github.com/zalmoxisus/redux-devtools-extension import { devToolsEnhancer } from 'redux-devtools-extension/developmentOnly' import { createFirestoreInstance, firestoreReducer } from 'redux-firestore' const init…

編集画面作った。 新規登録のフォームを再利用する感じで。 フォームのコンポーネントが編集用の処理を含んでしまって複雑化している。 型の定義の仕方もあまりよくなかったかも。明日はリファクタだろうか。

座標が取得できたときに、formikのsetValueで値を更新したらラベルと値が重なってしまう。 本当は初期値nullにしたかった 面数はSelectより type="number" の方がいいな...せっかく調べたが。 とりあえず入力画面こんな感じでできた。MVP。 firestoreへの追…

クライアントサイドはGeocoding API使えそう。 https://developers.google.com/maps/documentation/javascript/geocoding ライブラリ。TypeScript対応。Geocoding API対応。 https://www.npmjs.com/package/@googlemaps/google-maps-services-js TypeScript…

Selectが切り替わらない。Controlledにするとだめ。 TextFieldは大丈夫なんだけどな... TextFieldで書いてもいいらしい。見た目も綺麗なのでこっちで。 <TextField id="select" label="Age" value="20" select> <MenuItem value="10">Ten</MenuItem> <MenuItem value="20">Twenty</MenuItem> </TextField> そもそもFormControlとは？ Provides context such as filled/focused/error/re…

子供が泣くので朝活できないから、今年の目標でも書いてみる。 とりあえずやりかかっている個人PJを完了させてしまうのと、最近知識の定着を意識してインプットしたいと思ってたので、本を読んで満足して終わらないよう、認証資格を目標に置いてみようかと思…

tableうまくいってないので修正。 TableCellの改行がされてなさそう。 TableContainerが不要そうだったので外しつつ、table自体にmin-width指定してたのを外す。 const useStyles = makeStyles({ - table: { - minWidth: 650, + labelCell: { + wordBreak: '…

materializecssのSelectを入れたい。 https://materializecss.com/select.html selectは初期化が必要らしいのだが、next.jsからだと呼べない。 https://materializecss.com/select.html#initialization materialize-cssっていうnpmがあるので入れてみたけど…