Docker Compose の depends_on の使い方まとめ
Docker Compose の depends_on の使い方をかんたんにまとめました。 主に自分用のまとめですが、このあたりは公式ドキュメントの説明があまりわかりやすくはないので、 Docker Compose…
GCP で処理を定期実行する方法
Google Cloud Platform (以下「 GCP 」)で特定の処理を定期的に実行する方法についてかんたんにまとめました。 GCP で処理を定期実行する方法の選択肢 GCP で処理を定期実行するための方法はいくつかあります。 A. Compute Engine…
スマートフォンのブラウザでフォントサイズがおかしくなる問題の対処方法
ウェブ制作者向けの小ネタです。 スマートフォンのブラウザでウェブサイトを開いたときに、指定したフォントサイズと異なるサイズで文字が表示されてしまう問題についてです。 問題 font-size でフォントサイズを指定しているのに、 iOS や Android…
Node.js のパッケージをまとめて最新版にアップデートする方法
Node.js のパッケージをまとめて最新版にアップデートする方法についてです。 npm と Yarn を使った方法をそれぞれ説明します。 npm 記事執筆時点の npm の最新版 7.x…
React でウィンドウサイズが小さいときだけスライドショー表示をする方法
ピンポイントな小ネタですが、 React…
Homebrew で Error: homebrew-core is a shallow clone が出て brew update が実行できない問題
2020 年 12 月以降に Homebrew で brew update をしようとすると次のようなエラーが出て処理が実行できないことがあります。 homebrew-cask を利用している場合はそちらでも起こります。 Homebrew はこれまで Git…
React の PropTypes.element と PropTypes.elementType の違い
JavaScript のフレームワーク React で使われる PropTypes.element と PropTypes.elementType の違いについてです。 両者には次の違いがあります。 意味 例 PropTypes.element React…
GCP の Container-Optimized OS でサイトを運用するときの tips
Google Cloud Platform (以下 GCP )の Container-Optimized OS で Docker を使ってサイトを構築・運用するときの tips 集です。 Container-Optimized OS…
axios で reCAPTCHA のレスポンストークンの検証を行う方法
JavaScript のライブラリ axios で reCAPTCHA のレスポンストークンの検証を行う方法をかんたんにまとめます。 reCAPTCHA は一般に次の 3 ステップで利用するものですが、今回はこのうちの…
React Context API と useContext() の使い方
フロントエンドフレームワーク React の Context API と useContext() の使い方についてまとめました。 ウェブ上で見つかる Context API と useContext…
Docker の MariaDB / MySQL イメージを使うときの tips
Docker で MariaDB / MySQL イメージを使うときのプチ tips をいくつかまとめました。 対象イメージは mariadb:10.5 と mysql:5.…
GitHub Actions で WordPress のプラグインを自動更新する方法
GitHub Actions を使って WordPress のプラグインを自動的に更新する方法をご紹介します。 より正確に言うと「 Git でコードを管理している WordPress サイトのプラグインを GitHub Actions…
Google Cloud Platform で特定の国からのアクセスをブロックする方法
Google Cloud Platform で特定の国からのアクセスをブロックする方法についてです。 直接国を指定してブロックする方法は用意されていないので、 まずブロックしたい国の IP…
JavaScript で File オブジェクトの画像のサイズを取得する方法
JavaScript で File オブジェクトとして保持された画像ファイルのサイズ(幅・高さ)を取得する方法についてです。 Node ではなくクライアントサイドの JavaScript でのお話です。 早速結論ですが、 Image オブジェクトを生成して src…
Git でデフォルトのブランチ名を master 以外に変更する方法
Git で git init 後に最初のコミットをすると自動的に作られるブランチの名前を master 以外に変更する方法についてです。 早速結論ですが、設定項目 init.defaultBranch を使えば OK…
Next.js を使った JAMstack なブログの始め方
今回は Next.js を使って JAMstack なブログを作る方法を紹介します。 ゴール 本チュートリアルでは最終的に以下の構成のブログサイトを作ります。 ページ構成 「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の…