2020-01-01から1年間の記事一覧
サイトが８言語に対応しているが、利用規約やプライバシーポリシーは英語と日本語の２か国語しか用意していない そのため、他言語で利用規約ページに遷移した場合には英語の利用規約ページにリダイレクトさせたい Next.jsでリダイレクトする方法を調べた nex…
FlowからTypeScriptに乗り換えていて その際に、Flowで$ValuesはTypeScriptでどうやるのかを調べた 調べた限りではAPIはなく、自作すると以下のようにすると同じようなことができる type $Values<O extends object> = O[keyof O]; const obj = { EN: 'en', JA: 'ja', } as cons</o>…
next-translateを使ったNext.jsページの翻訳を行った uga-box.hatenablog.com この時は「build step」を使ったが、他にもやりかたもあるようなので調べる https://github.com/vinissimus/next-translate#13-do-i-need-this-build-step-is-there-an-alternati…
Next.js 10 で国際化対応したルーティングはできるようになった uga-box.hatenablog.com 今度はそのlocaleをつかってページの翻訳をしたい Next.jsのリポジトリにnext-translateを使ったサンプルコードがあるので参考にする https://github.com/vercel/next.…
Next.jsとFirebase AuthenticationでGoogle認証を行いたい こちらの記事が参考になった qiita.com 手順 Firebase設定 firebaseのインストール コンテクストを使用して認証済みユーザをコンポーネント間で共有する _app.jsでページ初期化時にAuthProviderをラ…
Next.js 10 からi18n対応したルーティングができるようになったので調査してみた プロジェクトのサイトは多言語対応しているのでありがたい SSR, SSG ページごとに静的生成またはサーバーレンダリングのいずれかを選択できる i18nのget startからダウンロー…
以前Next.jsでsvgを利用する方法は調べた uga-box.hatenablog.com 今度は一つのアイコンが保存されたsvgファイルではなく、複数のアイコンを集めたsvg-spriteをつくってそれを利用したい ただ、結論どうにもうまくいかなかったので代替案を考えた iconコンポ…
StorybookをAppEngineStandardでappspotに公開していたが、使っていないときには落ちるとしてもAppEngineちょっとお高いので Firebase Hostingを利用することにする firebase.google.com Firebase CLIのセットアップ curl -sL https://firebase.tools | bash…
Next.jsでsvgを利用したい Next.jsのリポジトリにsvgを使用するexampleがあるのでそれを参考にする github.com babel-plugin-inline-react-svgのインストール $ npm i -D babel-plugin-inline-react-svg .babelrcに以下を追加する { "presets": [ "next/babe…
Blitz.jsというものを知ったので調べた blitzjs.com 最初に書かれていること "Zero-API" Data Layer Built on Next.js Inspired by Ruby on Rails つまり、Blitz.jsはRailsをNext.jsとPrismaで再現しようとしているReactフレームワークらしい ちなみに、まだ…
Prismaという技術スタックを聞いて、よく知らなかったので調べた www.prisma.io Prismaはデータベースへのアクセスを容易にするツールセット（ORM） 従来のORMと違うところ 従来のORMはプログラミング言語のモデルクラスにテーブルをマッピングすることによ…
Next.jsのgetInitialProps と getStaticProps と getServerSidePropsを調べる この記事が参考になったので個人的まとめ qiita.com getStaticPropsはSSG用のAPIで事前にサーバーサイドで実行される getServerSidePropsはSSR用のAPIでサーバーサイドで実行され…
Next.js 9では、ページ内にgetServerSidePropsとgetInitialPropsが無い場合、ページが静的である（事前にレンダリングできる）と自動的に判断し、サーバーサイドレンダリングと静的事前レンダリングの両方を取り入れた高速のWebサイトを作成することができる…
Next.jsのサンプルコードにある_app.jsと_document.jsが何かを調査した _app.js nextjs.org Next.jsは、Appコンポーネントを使用してページを初期化する これをオーバーライドして、ページの初期化を制御する場合に_app.jsを使う 例えば ページ変更間のレイ…
Next.jsアプリケーションで、以下のコマンドでサーバーを起動した場合のデフォルトのポートは3000番になる npm run dev だが、そのポートは既に利用しているため変えたい ドキュメントは見つからなかったが、issueを探ると https://github.com/vercel/next.j…
末尾に言語コードがついたID 12345:en や 12345:jaなどがA_TABLEテーブルに格納されている このテーブルから、IDが末尾:enのものを検索して、言語コード部分enを別の言語コードjaに置換してB_TABLEに格納したい つまり、B_TABLEテーブルには英語をコピーした…
TypeScriptを導入して、select要素のonChangeにどういう型を定義するべきかわからなかったので調査した Takepepeさんのこちらの記事が参考になった qiita.com 型推論により、こう定義するのがよいみたいだが type Props = { onClick: (event: React.MouseEve…
Yewというのを知ったので調べた 日本語のドキュメントがあり、ここをみたらわかった yew.rs 個人的なまとめ Yew は WebAssembly によってマルチスレッドなWebアプリのフロントエンドを作ることができる、モダンな Rust のフレームワーク React や Elm のよう…
JAMstackとは、「JavaScript」「APIs」「Markup」の3つを組み合わせた、新しいWebアーキテクチャのこと NetlifyのMatt Biilmann氏とChris Bach氏がNetlifyの最新のWeb開発ワークフローと機能を作成していたときに生まれたものらしい jamstack.org Jamstackは…
AppEngineで以下のエラーが発生した app:server:main ReplyError: OOM command not allowed under OOM prevention. GCPのRedisを使っていて、そのRedisが利用メモリが最大メモリを超えた際に発生するエラーらしい Compute Engine VM から Redis インスタンス…
PostgresのCOPY FROMコマンドを使ってcsvファイルをテーブルに読み込ませたい さらにはpsqlにそのsqlを渡してコマンドラインで実行したい 実行環境 Postgresサーバーはdockerで起動している psqlはローカルマシンにインストール済み psqlでsqlを実行する書式…
application.ymlとは別にapplication-with-cloudsql.ymlを用意していて環境ごとに使い分けたいのだが、ローカルのIntelliJでSpringBoot起動時に使い分ける方法が不明だったので調べた やり方① VM Optionsに-Dspring.profiles.active=with-cloudsqlを設定する…
10/20にReact v17がリリースされたが新機能なしという特殊なバージョンアップ ja.reactjs.org 安全に段階的にReactのアップグレードができるようにするためのバージョンアップらしく、「踏み台」となるリリースみたい 一気にバージョンアップが難しいことが…
Cloud Tasksを使っていて、あるタスクがタイムアウトを起こして失敗とみなされていた どうやらApp Engine タスクには、実行中のサービスのスケーリング タイプに応じてタイムアウトが設定されているようなので調査した cloud.google.com スタンダード環境で…
ESのgeo_distanceクエリで、ある指定した中心からの距離で検索かけたい GET /my_locations/_search { "query": { "bool" : { "must" : { "match_all" : {} }, "filter" : { "geo_distance" : { "distance" : "200km", "location" : { "lat" : 40, "lon" : -7…
GCEのインスタンステンプレートにシークレットマネージャーの権限をつけたい コマンドから実行する場合は--scopesを付ければよく、オプションに指定できる権限は以下に一覧がある cloud.google.com ただ、シークレットマネージャがどれにあたるかがわからな…
Spring Boot起動時に環境毎にapplication.propertiesを切り替える場合、コマンドライン引数を以下のようにしている java -jar spring-boot-application-properties-sample-1.0.0.jar --spring.profiles.active=dev1 これをjibで固めたコンテナの起動時に指定…
以前、Domaを使ってSpring Boot アプリケーションからPostgresに接続した uga-box.hatenablog.com これに追加で、JSON型のカラムを用意したい ## Entity Entityにプロパティを追加する 方はStringで定義する @Id @Column(name = "search_condition") String …
PostgreSQLのJSONデータ型にはjson型とjsonb型という2種類のデータ型があることを知ったので違いを調べてみた www.postgresql.jp 上のドキュメントを引用してまとめる 現実的に主要な違いは効率 jsonデータ型は入力テキストの正確なコピーで格納し、処理関数…
Postgresのpostgres:11-alpineイメージで起動したdockerコンテナに入ってpsqlコマンドを使いたい psqlがローカルに入っていなかったので、psqlコマンドをほんのちょっと試したいがため 普通にコンテナに入って叩いてみる $ docker exec -it postgres_server …
