YSNHatenaBlog

主にアプリやWebサービス開発について

Next.jsのバージョンを上げた

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のバージョンを上げている

よいデータ設計が思いつかないので、気分転換も兼ねて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 とはいえそもそも流入ほぼ無い状態。検索キーワード候補を見ても、「テニスコ…

iOSのフォーム選択で画面が拡大されてしまうのを防ぐ

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

Safariのoverflow-wrap: anywhere

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

Redux Toolkitがすごい便利だった

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

google-map-reactから@react-google-maps/apiに乗り換え

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

23区分だけデータ入れ終わった

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

自作サービスにデータを入れていっている

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

Firestoreの住所のfieldを整理

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

Firestoreのルールのテストを書いた

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

Firestoreルールのテストの書き方を再調査

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

Firebase Emulator x Next.jsでnet::ERR_CONTENT_DECODING_FAILED

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

GitHub ActionsでFirestore Emulatorを使った自動テストを行うためにやったこと

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

firebaseの設定ファイルをpushしたくない

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

GitHub ActionsでFirestore Emulatorを使ったCIをやりたい

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

algoliasearchをモックする

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 | …

Cloud Functionsのテスト導入中

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入れるまで)

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

Firestoreの設定をfirebase.jsonに入れる

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

reduxのデバッグ・リファクタリング

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…

編集機能を作る

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

Material-UIのフォーム完成 & Firestoreへの登録

座標が取得できたときに、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…

material-uiのSelect

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…

2021年目標

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

material-uiのtable修正&cssの改行

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

materialize-cssがNext.jsと相性悪そうなのでmaterial-uiに乗り換える

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

Cloud Functionsのonly, exceptオプションについて調査したこと

Cloud Functionsの数が増えてくるとこんな感じのエラーが返ってきてデプロイに失敗する。 FirebaseError: HTTP Error: 429, Quota exceeded for quota group 'Write' and limit 'Write requests per 100 seconds' of service 'cloudfunctions.googleapis.com…

Firebase FirestoreのデータをBigQueryにエクスポートする

FirestoreのデータをBigQueryにデータを取り込む手段について。 まだサービスローンチ前ならFirebase Extension 直接試せてないがFirebase Extensionがあるのでこれを使いたい。 firebase.google.com リアルタイムでデータが同期される(と思う)。 すでにロ…