Next.js で <table> を使おうとして Hydration failed because the initial UI does not match what was rendered on the server.

Next.js でたまにこういうエラーが出てくる。エラーが出てくるけど、dom は正常に描画されている。どうやら、HTML タグの使い方がおかしい場合にこのエラーが出てくる事があるようだ。私の場合は、<table> タグを使おうとしてこのエラーが出たのだが、<table> タグを使</table></table>…

2022-05-02

Next.js で、いい感じに head, title, ogp などを配置する【React.js】

JavaScript React.js プログラミング・開発

Next.js の Head コンポーネントを使うタイトルとかをいい感じに使い回す Next.js の Head コンポーネントを使う Next.js では、 Head コンポーネントを使うことで、 title などの <head> タグ内の属性を設定できます。 import type { NextPage } from 'next'; im</head>…

2022-04-29

AWS ECS + Fargate の ECS Exec で An error occurred (TargetNotConnectedException)

AWS Docker プログラミング・開発

ECS Exec で An error occurred (TargetNotConnectedException) Amazon ECS Exec Checker でトラブルシューティング実行例各項目の説明 Prerequisites for check-ecs-exec.sh Prerequisites for the AWS CLI to use ECS Exec Cluster Configuration Can I …

2022-04-11

Stripe の Checkout Session と Webhook で届いた Subscription の紐付け

課金・決済システムプログラミング・開発

Stripe Checkout と Webhook Checkout session と Webhook の紐付け Subscription の metadata を使う customer.subscription.created 以外の Webhook を使うのは？ success_url に到達した瞬間にサービス提供するのは？ Stripe Checkout と Webhook Stripe …

2022-03-18

個人で VPS で Kubernetes クラスタを組むなら kubeadm （vs Kubespray）

Kubernetes プログラミング・開発

はじめに Kubernetes 概要 kubectl コマンドについて Kubernetes クラスタの構築 indigo VPS を利用 kubeadm vs kubespray Kubernetes クラスタのマスターノードとワーカーノード kubeadm を使った Kubernetes クラスタ構築の手順全てのノードで実行マスタ…

2022-02-22

やよいの青色申告オンラインで確定申告をした【2021年分】

副業・個人事業・確定申告

前提条件確定申告処理の開始（書類の作成） Step 1 減価償却費の計算 Step 2 青色申告決算書の作成基本情報の入力売上と仕入の確認光熱費・通信費の処理（経費の家事按分）地代家賃の処理従業員への給与消費税最終確認決算書のダウンロード Step 3 …

2022-02-22

aws/aws-sdk-php で Your requirements could not be resolved to an installable set of packages.

PHP Laravel プログラミング・開発

composer ライブラリの依存エラーエラーの見かた解決方法詳細な解決方法 composer update guzzlehttp/psr7 guzzlehttp/promises 最後に composer ライブラリの依存エラー composer で aws/aws-sdk-php のライブラリをインストールしたところ、以下のよう…

2022-02-14

Yjs の「Awareness & Presence」ドキュメントを読む

JavaScript プログラミング・開発

docs.yjs.dev ※ Yjs は、ドキュメント共同編集用のライブラリです。 ※ Awareness 、あるいは、 Awareness 情報というのは、ドキュメント共同編集の際の、各ユーザーのカーソルの位置など、ドキュメントの更新以外の情報のことを指します。 Awareness & Prese…

2022-02-10

Yjs の Awareness について

Awareness Awareness CRDT Awareness CRDT API Awareness Protocol Yjs の Awareness の公式ドキュメントはこちら docs.yjs.dev Awareness Awareness は、オプショナルな機能です。 Yjs を使うにあたり、実装必須ではありません。 Awareness は、 y-protocol…

2022-02-04

y-protocols/sync 内のメソッドが何をしているのか

JavaScript プログラミング・開発

y-protocols のドキュメントが少ない Yjs の WebSocket のサーバーサイドを自前実装しようとすると、y-protocols について理解しなければなりません。 github.com Yjs 公式には y-websocket というリポジトリがあり、この中にはサーバーサイドの実装も入って…

2022-02-02

Misoca （PC版）を使って請求書を発行する

副業・個人事業・確定申告

やよいの青色申告と Misoca 料金請求書の発行方法まとめやよいの青色申告と Misoca Misoca とは、弥生（やよい）が出している会計ソフトです。やよいの青色申告オンラインを私も利用していますが、そこと同じ会社が出している製品になります。弥生のアカ…

2022-01-30

yjs/y-websocket 共同編集エディタ用ライブラリ YJS の WebSocket 周りの実装

JavaScript プログラミング・開発

y-websocket の README の翻訳です。 github.com y-websocket とは Quick Start y-websocket をインストールします。 WebSocket サーバーを立ち上げますクライアントの実装例 API （Websocket Provider の API） Websocket サーバーデータを永続化したい場…