はてなブックマーク

Potentially-incompatible changes ================================ This release disables RSA signatures using the SHA-1 hash algorithm by default. This change has been made as the SHA-1 hash algorithm is cryptographically broken, and it is possible to create chosen-prefix hash collisions for <USD$50K [1] For most users, this change should be invisible and there is no need to replace ssh-rsa keys. O

Git の小ネタで、 Git で管理されていないファイルのみを一覧表示する方法についてです。 早速結論ですが、 git ls-files コマンドを使えば OK です。 git ls-files は Git 管理下のファイルを一覧表示するためのコマンドです。 通常は管理されているファイルの一覧を返すのですが、 --others オプションを渡すことで管理対象外のファイルのみを一覧で表示します。 もうひとつの --exclude-standard オプションは .gitignore 等で無視されているファイルを除外するオプションです。 オプションの名前が長いので、利用頻度が高い場合は次のような感じでエイリアスを作っておくとよいと思います。

Safari で HTML を閲覧した際に、親要素に overflow: hidden と border-radius を設定してあるのに子要素が border-radius の範囲をはみ出して表示されてしまう問題についてです。 追記: 親要素に overflow: hidden を設定している前提の説明が抜けてしまっていたのでタイトルと本文を修正しました（コメントいただいた方ありがとうございました）。 問題 子要素に角丸スタイルを適用するために親要素で overflow: hidden と border-radius を設定しても、子要素が border-radius の範囲外でも表示されてしまいます。 デスクトップ版の Safari や iOS 上の Chrome 等で発生します。 たとえば次のように <img> を <div> で囲って overflow: hidden と bord

GitHub Actions （以下 GHA ）で改行文字を含む複数行の文字列をコマンドの output にセットする方法についてです。 追記 2022/11/16 output パラメータをセットする方法が ::setoutput を使った形から環境変数 GITHUB_OUTPUT を使った形に変更されたので各所更新しました。 参考: GitHub Actions: Deprecating save-state and set-output commands | GitHub Changelog Setting an output parameter | Workflow commands for GitHub Actions - GitHub Docs 前提 この記事は当初 2022 年 05 月に書きました。 時間が経つと GitHub Actions の仕様変更などで情報が古くなる

Docker Compose の depends_on の使い方をかんたんにまとめました。 主に自分用のまとめですが、このあたりは公式ドキュメントの説明があまり充実していないので Docker Compose をよく使う方のお役に立つのではないかと思います。 前提 Compose ファイル（ docker-compose.yml ）のバージョン 3.8 を前提としています。 動作確認には次のバージョンを使用しました: $ docker --version Docker version 20.10.5, build 55c4c88 $ docker-compose --version docker-compose version 1.29.0, build 07737305 depends_on とは depends_on は Docker Compose の各サービスに対して設定できる項目

追記 2024/04/05 GitHub Codespaces の仕様変更によりこの記事の情報は古くなっています。 内容をシンプルにして最新化したページ ↓ を書いたのでそちらを参照してください。 GitHub Codespaces で WordPress を動かす方法 追記終わり GitHub Codespaces 上で WordPress を動かす方法についてです（ 2021 年 8 月時点の情報です）。 Codespaces にはポートフォワーディング機能が備わっており Codespaces 上で動かしたウェブサーバー・ CMS にブラウザからアクセスすることができます。 Codespaces を使うと手元の環境を汚すことなく Docker も使わずに WordPress をさっと動かせるので、最新バージョンの WordPress や気になるプラグインをちょろっと試したいときなんかに

Google Chat のルームにプログラムで自動投稿する方法についてです。 事前に想像したよりかんたんであっけなかったですが、また次久しぶりにやるときに少し時間がかかるかもしれないので、かんたんに方法をまとめておきます。 Google Chat をプログラムから利用するパターンは大きく 2 つがありますが 呼びかけに応答する bot を作る 一方的に投稿だけする bot を作る 今回は後者の「投稿だけする方法」について扱います。 実装の選択肢 選択肢は大きく 3 つあります。 A) Google Chat のウェブフックを使う Using incoming webhooks  |  Google Chat API  |  Google Developers B) Google API のクライアントライブラリを使う Client libraries  |  Google Chat API

name: Scheduled build on: schedule: # 月曜日の 11:00 (JST) に処理を実行する。 # UTC の 02:00 は JST だと 11:00 。 - cron: '0 2 * * 1' jobs: build: name: build runs-on: ubuntu-latest steps: - name: curl run: curl --show-error -X POST -d {} "${{ secrets.BUILD_HOOK_URL }}" # で始まる行はコメントです。 name の値は処理には影響しないのでわかりやすい値をセットして使うとよいと思います。 記事執筆時点では runs-on に ubuntu-latest を選べば前準備なしで curl が使えました。 リポジトリの Settings → Secrets で BU

Google Cloud Platform （以下 GCP ）の Container-Optimized OS で Docker を使ってサイトを構築・運用するときの tips 集です。 Container-Optimized OS を使うようになってしばらく経ったので利用時の小ネタをかんたんにまとめました。 利用イメージとしては、単一のインスタンスで Docker または Docker Compose を使ってサイトを運用する場合を想定しています（ Kubernetes に関する tips はここには含まれていません）。 Container-Optimized OS の利用に興味のある方は参考にしてみてください。 Container-Optimized OS とは Container-Optimized OS とはコンテナ利用に最適化された Google 社製 OS です。 GCP ユー

2020 年 12 月以降に Homebrew で brew update をしようとすると次のようなエラーが出て処理が実行できないことがあります。 Error: homebrew-core is a shallow clone. To `brew update` first run: git -C "/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core" fetch --unshallow This restriction has been made on GitHub's request because updating shallow clones is an extremely expensive operation due to the tree layout and traffic of Homebrew/homebre

追記 2021/03/25: profiles を使った方法について追記しました。 Docker 小ネタで、 docker-compose up コマンドで一部のサービスを除外する方法についてです。 動作確認時点の Docker と Docker Compose のバージョンは次のとおりです。 docker: 19.03.5, build 633a0ea docker-compose: 1.25.4, build 8d51620a docker-compose.yml で定義されたサービスのうち一部を除外してサービスを起動する方法として、以下の 3 通りの方法があります。 方法 A: docker-compose up の引数を使う 方法 B: docker-compose up の --scale オプションを使う 方法 C: 設定ファイルで profiles を使う 方法 A: doc

Mac で現在のメモリ使用量を調べる方法について。 メモリ使用量は Mac にデフォルトで備わっている Activity Monitor から調べることもできますが、コマンドラインから調べたくなることがあります。 そんな場合には top コマンドを使用すれば OK です。 監視し続けたい場合 top コマンドをオプションなしで実行すると現在動いているプロセスのサマリーを 1 秒更新で表示し続けてくれます。 PhysMem と書かれたところがメモリの使用量を表します。 $ top Processes: 233 total, 2 running, 6 stuck, 225 sleeping, 1149 threads 20:31:01 Load Avg: 1.65, 1.66, 1.62 CPU usage: 7.78% user, 4.62% sys, 87.59% idle SharedL

フロントエンドフレームワーク React の Context API と useContext() の使い方についてまとめました。 ウェブ上で見つかる Context API と useContext() についての説明は、読者にクラスコンポーネントの知識があることを前提としているものが多いようですが（私が見たものがたまたまそうだっただけかもしれません）、そのような説明はクラスコンポーネント主流の時代から React を使い続けてきた人にはわかりやすいですが、今の「 Hooks + 関数コンポーネント」主流の時代に React を学ぶ人にはかえってわかりづらいのではないかと思います。 今回は「 Hooks + 関数コンポーネント」が主流の時代に React を学ぶ方（＝かつての私）に向けて、クラスコンポーネントの知識を前提としない形での説明をしてみます。 対象読者 React を少しだけ知

Google Cloud Platform で特定の国からのアクセスをブロックする方法についてです。 直接国を指定してブロックする方法は用意されていないので、 まずブロックしたい国の IP アドレスの範囲を特定してから、それらをファイアウォール機能で全件ブロックする というアプローチを採ることになります。 Google Cloud Platform （以下 GCP ）のファイアウォール機能は 1 つのルールにつき最大 256 件の IP アドレスの範囲を指定できるので、およそ ブロックすべき IP アドレスの範囲の数 ÷ 256 [個] のルールを作成すれば OK です。 たとえば 1,000 個の IP 範囲のある国をブロックしたい場合は 1,000 ÷ 4 ≒ 3.9 なので、ルールを 4 つ作ればすべてカバーできます。 手作業で行う場合は、 GCP のコンソールから VPC netw

Git で git init 後に最初のコミットをすると自動的に作られるブランチの名前を master 以外に変更する方法についてです。 早速結論ですが、設定項目 init.defaultBranch を使えば OK です。 次のようにするとデフォルトで作られるブランチの名前が main になります。

今回は Next.js を使って Jamstack なブログを作る方法を紹介します。 ゴール 本チュートリアルでは最終的に以下の構成のブログサイトを作ります。 ページ構成 / フロントページ ├ /archive （なし） └ /archive/[page] 投稿一覧ページ └ /posts （なし） └ /posts/[slug] 投稿詳細ページ 「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の 3 つだけのシンプルな構成です。 投稿の管理方法 frontmatter 付きの Markdown ファイル 利用技術 / サービス サイト生成: Next.js コードホスティング: GitHub ビルド・ホスティング: Netlify その他: Google Fonts / Google Analytics リポジトリ 今回作成したサンプルは GitHub 上に置いているので興味のあ

JavaScript のフレームワーク React に関する小ネタです。 掲題のとおり「 state hook で array を扱っているときに、 array を更新してもコンポーネントの再描画が起こらない」という問題についてです。 今回動作確認に使った React のバージョンは 16.13.1 です。 現象 state hook で管理している array （配列）を更新しても関連するコンポーネントの再描画が起こらない コードのイメージは次のとおりです。 このサンプルでは記事をブックマークできる機能をページに持たせており、そのブックマーク一覧の管理に state hook を使っています。 // `onChange` が呼ばれても再描画が起こらない例 import { useState } from 'react' const Page = props => { let articl

PHP の static と self の違いについてです。 基本中の基本なのですが、 PHP を書かない日が続くとどちらがどちらなのか忘れてしまい調べ直すことしきりなので、メモとして残しておきます。 まとめ static は 実行時 のクラスを指す self は 定義時 のクラスを指す 詳細説明 static は実行時の文脈でのクラスを指します。 つまり、 static の利用場所が static メソッドの場合はレシーバのクラスを、通常のインスタンスメソッドの場合はレシーバはオブジェクトなのでそのクラスを指します。 他方の self は定義時の文脈でのクラスを指します。 コードで確認してみましょう。 次のコードでは static と self の両方を使用しておりその違いを確認することができます。 class User { public static function loadByNa

この記事は 2020 年時点の古い記事です。現在は状況が大きく異なっているためご注意ください。 最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。 これからどちらを使うか・学ぶか迷っている方のご参考になれば幸いです。 あくまで私が知る範囲での説明であり 100% の正確さを保証するものではないのでその点にご留意ください。 尚、本記事は Next.js と Gatsby が以下のバージョンが最新のときに書いています。 Next.js 9.4.1 Gatsby 2.22.3 いずれも活発に開発が行われており、バージョンが進むとあてはまらなくなる記述も出てくるものと思います。 「そもそもスタティックサイトジェネレーターって何

PHP で少数点以下の桁を指定して数値を切り上げ・切り捨てする方法についてです。 尚、今回動作確認には PHP のバージョンの 7.2 を使用しました。 組み込み関数 PHP では、数値を丸めるための組み込みの関数として次のものが用意されています。 round() ceil() floor() 名前から想像がつくとおり round() は四捨五入（等）、 ceil() は切り上げ、 floor() は切り捨てです。 PHP Manual のリファレンスによると宣言部はそれぞれ次のとおりです。 float round ( float $val [, int $precision = 0 [, int $mode = PHP_ROUND_HALF_UP ]] )

Gatsby 公式のブログ用テーマ gatsby-theme-blog を使うときの tips 集です。 追記 2020/07/29: この説明は gatsby-theme-blog のバージョン 1.x 系に対するものです。 2020 年 7 月にリリースされた 2.x にはあてはあまらない部分もありますのでご注意ください。 Gatsby の theme システムには WordPress 等旧来の CMS によくある拡張機能が備わっているのですが、 gatsby-theme-blog の場合はおそらく大がかりな拡張はせずほぼそのまま使うものとして作られている感じがします。 あるいは gatsby-theme-blog は単純に reference implementation なのかもしれません。 そんな gatsby-theme-blog を私なりに工夫して使い倒してみたので、その t

HTML のテキストフィールドやテキストエリアで、日本語の変換を確定させるためのリターンキー（エンターキー）入力とその他のリターンキー入力とを JavaScript で識別する方法についてです。 早速結論ですが、イベント compositionstart と compositionend を使えば OK です。 イベント compositionstart は変換処理がスタートしたときに発火します。 compositionend は変換処理が終了すなわち変換が確定したときに発火します。 なので、変換中であるかどうかを表すフラグを持っておいて、フラグが立っているときにリターンキーが入力されたら変換確定、立っていないときに入力されたらそれ以外、という風に見分けることが可能です。 Vue.js での処理イメージ: <input type="text" @keydown.enter="submit"

ふだんは Markdown を書いていて、稀に reStructuredText を書く必要がある技術者（私です）のための reStructuredText 文法まとめです。 reStructuredText のすべてを網羅するのではなく、あくまで「 Markdown にある機能を reStructuredText で使いたい」という状況を想定した上での簡易的なまとめです。 reStructuredText の詳細を本格的に学びたい場合は次の 2 つのページを参照することをおすすめします。 reStructuredText Primer — Sphinx documentation reStructuredText 「 Markdown なら書き方がわかっているんだけど、 reStructuredText でどう書けばいいかわからないので、いちいち検索してしまう」という方のお役に立てば幸い

追記 2022/08/04: タイトルの「 O'Reilly Safari 」を「 O'Reilly Online Learning 」に変更しました。価格以上の価値を得ているのでその後も使い続けています。 追記 2020/06/13: その後も使い続けています。今は名前から「 Safari 」が外れて「 O'reilly Online Learning 」になっているようです。 追記 2020/03/10: 2020/01/06 に価格が月々 39 ドルから 49 ドルに変更されたようです。とても強気の価格変更ですが、個人的にはこれでも価格以上の価値は十分にあると思います。 ソフトウェア関連の技術書で有名な米 O'Reilly 社が Safari というウェブサービスを行っています。 Online Learning and Training - O'Reilly Media 月額の利用料

2018 年 6 月時点での Drupal の現状の整理と今後（ 3 〜 5 年）の展開予測 をしてみました。 このあたりの認識をそのときどきで記録しておくと後々おもしろそうなので分析のエクササイズがてら書き残してみます。 英語圏も含めてこのタイプのまとめをしている人はあまりいないので、興味のある方にはおもしろい内容になっているのではないかと思います。 最初に、ここで述べる私の認識は今後変わる可能性があることをお断りしておきます。 というのと、ネガティブな意見が含まれるので「 Drupal 万歳！」な方は読まないようにしてください（笑） 著者の立ち位置と認識 最初に私の立ち位置と認識を明確にしておきます。 私は Drupal の利用者です。 Drupal の本体やモジュールに貢献したり Drupal Association に寄付したりしています。 本番環境で使ったことのある Drupal