猫でもわかるWebプログラミングと副業

本業Webエンジニア。副業でもWebエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

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

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

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

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

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 …

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

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

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

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

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

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

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

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

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

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

Yjs の Awareness について

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

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

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

Misoca (PC版)を使って請求書を発行する

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

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

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

GMOコインから ByBit に Symbol XYM を送る

ByBit 側のアドレスの確認 GMOから送金手続き ByBit 側のアドレスの確認 ByBit にログインし、右上のメニュー「資産」から「現物アカウント」を選択する 「入金する」を選択 XYM を選択。ウォレットの情報が出てくる。「XYMウォレットアドレス」と「XYM 入金…

2/16にスムーズに確定申告をするために確認したこと

2021年分の確定申告の手順の記事書きました www.utakata.work 確定申告ができるようになるのは 2月16日からだが、1月中には、クレカの請求なども確定するので、いつでも確定申告できる状態にはなる。 確認事項 やよいの確定申告を使っている場合、「簡単取引…

Django REST framework シリアライザの種類

ModelSerializer どのフィールドを含めるか ネストされたフィールドのシリアライズ フィールドの形式を指定する Readonly なフィールド HyperlinledModelSerializer ListSerializer BaseSerializer ModelSerializer JSON, XML など ↔︎ Django の model の変…

元素騎士 Online AMA (Ask Me Anything) on Telegram【2022年1月18日】

2022年1月18日、元素騎士 Online の Telegram にて、AMA (Ask Me Anything)が開催されました。 1月19日から、元素騎士 Online の MV トークンが上場する Bybit。その Bybit の Bill Xing さんが、ユーザーのあらゆる質問に答えました。 (日本語訳について…

'OrderingFilter' object has no attribute 'filter_queryset' エラーの対処法

view で import している OrderingFilter のクラスが間違っている ダメな例 from django_filters.rest_framework import OrderingFilter from django_filters.filters import OrderingFilter 正解はこっち from rest_framework.filters import OrderingFilte…

Polygon (MATIC) での NFT 確認方法 Metamask 編【元素騎士 Online】

元素騎士から送られてきたNFT はじめに Polygon のネットワーク追加について NFTのみかた 届いている NFT の情報を確認する PC での NFT の確認方法 NFT をスマホの Metamask で確認する まとめ はじめに 先日、元素騎士のNFT配布キャンペーンがありました。…

Django REST framework Serializers

www.django-rest-framework.org Serializers Declaring Serializers(シリアライザを定義する) Serializing object(シリアライズする) Deserializing objects(デシリアライズする) Serializers Serializers は、Django の QuerySet や、モデルのインス…

Bybit で本人確認(Lv.1 基本認証)を行う

必要なもの 手順 必要なもの 顔写真付きの身分証明書 パスポート、運転免許証、マイナンバーカード カメラがついているスマホかPC このブログではPCで行います。PCがあるならPCがおすすめ。 Bybitアカウントは取っている前提です。まだ取っていない人は、ア…

Binance で AXS (Axie Infinity)のステーキングを30日やった結果

ステーキングの年利 Axie Infinity とは ステーキングとは 1ヶ月ステーキングしてみた結果 ステーキングをする際の注意点 結果 ステーキングの年利 暗号通貨には、「ステーキング」と言って、通貨を一定期間預けると、高い年利がもらえる仕組みがあります。 …

MacBook の性能比較表

機種 MacBook Air MacBook Pro13インチ MacBook Pro14インチ MacBook Pro16インチ チップ Apple M1 Apple M1 Apple M1 ProorApple M1 Max Apple M1 ProorApple M1 Max CPU 8コア 8コア 8〜10コア 10コア GPU 7〜8コア 8コア 14〜32コア 16〜32コア Neural En…

Mac で動画編集をするなら何を買えばいいのか

はじめに どの Mac がいい? なぜ MacBook なのか どの MacBook を買えば良いのか カスタマイズはした方がいいのか メモリ ストレージ GPU を増やすなら MacBook Pro にした方がいい MacBook Pro 14インチと16インチはどうなの? チップについて メモリにつ…

Merit Circle について

公式ページ Merit Circle は、Play to Earn ゲームに関す分散自立型組織のガバナンストークン 公式ページ https://www.meritcircle.io/ を見ると、「Where can I find more information about Merit Circle?」(Merit Circle に関する情報をもっと知りたい場…

動画のサムネやブログのアイキャッチに Adobe Creative Express が便利

はじめに 基本的な使い方 Facebookの投稿 YouTube サムネール 他にも Instagram に使えるテンプレートなど 操作 まとめ はじめに Adobe Premiere Rush のプランに入ると自動的についてくる Adove Creative Cloud Express (旧 Adobe Spark)が非常に良かった…

PHPのHTTPクライアントライブラリ Guzzle を使うときに知っておきたいこと

Guzzle とは リクエストオプションの指定の方法 例外処理の方法 例外の構造 例外の意味 GuzzleException まとめ Guzzle とは HTTP リクエストを送りたいとき、例えば、Web APIを叩きたい時、PHP では Guzzle という HTTP クライアントライブラリが最も有名で…

Adobe Premiere Rush をダウンロードしようと思ったら新しいプランになっていた?

私は、スマホでサクッと動画編集したいとき、 Adobe Premiere Rush を使っています。 Adobe には色々プランがあります Premiere Rush が使える Premiere Rush プラン Premiere Rush に加えて、 Premiere Rush の上位版「Premiere Pro」が使える Premiere Pro…

【個人事業主】やよいの青色申告を使っている理由、マネーフォワードとの比較。

私は個人事業主で、「やよいの青色申告」を使っていますが、なぜやよいの青色申告を使っているのか説明します。 私の場合は、「マネーフォワードクラウド会計」と「やよいの青色申告」を比較し、やよいを使うことにしました。比較する際に重視したポイントに…

Mac はプログラミングにおすすめの PC ですが、どの Mac を買えば良いのか

僕はエンジニアとして働いていて、開発には MacBook Pro を使っています。そんな僕が、2021年おすすめの Mac を紹介していきます。 なぜ Mac なのか どの Mac が良い? MacBook の中でどれを選択したら良い? MacBook Air をどういうスペックにするか MacBoo…

PCの古いモニタを安く簡単に処分する方法

モニタは粗大ごみで回収不可 リネットジャパン 2枚のモニタを回収してもらった 感想 先日、ウルトラワイドのモニタを買った記事を書きましたが、今回はモニタの処分についてです。 www.utakata.work モニタは粗大ごみで回収不可 モニタを買ったらモニタを処…