ゼロへ

残り時間が減っていくのを眺めていると、不思議な気持ちになる。焦りではない。むしろ静けさに近い。砂時計の砂が落ちるのを見ているような、あの感覚。 31,536,000秒。一年をそう書くと、途方もなく多い。でも今、この瞬間にも減っている。眺めているうちに、また1秒。また1秒。 ゼロになったら、また新しい数字が始まる。

Boids

群れに指揮者はいない 鳥の群れは、誰かが指示を出しているわけではない。魚の群れも同じ。それぞれが周囲を見て、少しだけ動く。その繰り返しが、全体として秩序ある動きを生む。 これを1986年にCraig Reynoldsがコードで再現した。名前は Boids（bird + oid）。個体に与えるルールは3つだけ。 1. Separation ── 近すぎたら離れる 2. Alignment ── 周囲と同じ方向を向く 3. Cohesion ── 群れの中心に寄る これだけで、群れは群れらしく動く。 なぜ作ったか 群れの動きは、見ていて飽きない。 * 単純なルールから複雑な動きが生まれる ── 創発（emergence）の典型例。設計していないのに、設計したかのように見える。 * 自分のブログに置きたかった ── 静的なページに、動くものがあると空気が変わる。 * Web Components で作りたかった ── どこにでも持っていける部品として。 設計の話 見えないときは止める 画面外でアニメーションを回し続けるのは無駄。Inte

Days Elapsed

一年を「面」で見る 一年は365日。数字で見ると多いけど、並べてみると案外少ない。 12ヶ月を並べて、過去を塗りつぶして、今日を光らせる。それだけのカレンダーを作った。進捗バーが「一次元」なら、これは「二次元」の進捗表示。 Year Progress一年は50週ちょっとしかない 2026年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、

Year Progress

一年は50週ちょっとしかない 一年を週で数えると、52週とちょっと。 カレンダーで見ると長そうなのに、週で数えると急に短くなる。そんな感覚を形にしたくて、このページの上の方に進捗バーを置いた。 やっていることは単純で、「今年が何%進んだか」をリアルタイムで表示しているだけ。 なぜ作ったか 理由は3つある。 1. 時間を「量」として見たかった ── イベントや予定ではなく、単純に「どれだけ経ったか」を数値で見たかった。 2. 目に見える形にしたかった ── 抽象的な「一年」を、動く数字に落とすとどう感じるか試したかった。 3. 自分の場所に置きたかった ── 誰かのツールを借りるのではなく、自分のブログに自分で作ったものを置きたかった。 実装の話 せっかく作るなら、それなりに丁寧にやりたかった。 * Web Components で実装。ブログのCSSやDOMを汚さず、どこにでも持っていける。 * requestAnimationFrame で描画。固定間隔のタイマーではなく、画面更新に同期させることで滑らかさとリソース効率を両立。 *

AVIFを使っていこうと思った話

以前の記事の振り返り 以前、ブログで使うWeb用の画像のフォーマットについて検討するで「Web用の画像フォーマット」を比較して、当時は WebPがいちばん現実的という結論にしていた。 ブログで使うWeb用の画像のフォーマットについて検討する背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットにつ

メールを送信しないドメインにSPF/DKIM/DMARCを設定して迷惑メール被害を避ける

独自ドメインを持っているが、メールには使っていないという状況はよくあるはずです。 しかし、メールに使っていないドメインでも、メールの仕組み上、そのドメインを騙ってメールを送信されるリスクが存在します。 悪意ある第三者がドメインを詐称して迷惑メールやフィッシングメールを送信することで、ドメイン所有者が加害者であるかのように見せかけることが可能です。 結果として、ドメインの評判が傷つき、将来メールを使いたくなったときに正常に送信できなくなったり、最悪の場合ブラックリストに登録されたりする可能性があります。 被害を防ぐには、メールを送信しないドメインでも適切なセキュリティ設定が必要です。 本記事では、メール送信に使わないドメインでも設定しておくべき迷惑メール対策について解説します。 TL;DR メール送受信に使わないドメインには、以下の3つのDNS TXTレコードを設定しましょう。 レコード名 タイプ 値 （空） TXT v=spf1 -all _dmarc TXT v=DMARC1; p=reject; sp=reject; adkim=s; asp

なぜ静止画に4:2:2は存在しないのか

はじめに 動画のコーデックを扱う際、「4:2:2」や「4:2:0」といった表記を目にすることが多い。これらはクロマサブサンプリング（色差サブサンプリング）のパターンを示す記法である。しかし、静止画フォーマットであるJPEGにおいても同様のサブサンプリングが適用されていることは、意外と知られていない。 本稿では、クロマサブサンプリングの数理的基礎から、各画像フォーマットにおける実装まで、技術的に正確な理解を構築することを目的とする。特に、「なぜ写真の世界では4:2:2がほとんど存在しないのか」という問いに対して、技術的・歴史的観点から考察する。 色空間とサブサンプリングの分離 クロマサブサンプリングを理解するには、まず「なぜ色情報を間引いても画質劣化が少ないのか」という根本的な問いに答える必要がある。この答えは、人間の視覚系の生理学的特性に深く根ざしている。 RGB色空間の特性 RGB色空間は、赤(R)・緑(G)・青(B)の3つの加法混色成分によって色を表現する色空間である。これは、ヒトの網膜に存在する3種類の錐体細胞の分光感度特性に対応している。 * L錐体（長波長

ブログで使うWeb用の画像のフォーマットについて検討する

背景と目的 普段から写真撮影を行っていると、画像ファイルが占める容量は無視できない規模になる。現在はNASとAmazon Photosに保存しているため、容量的な制約は少ないものの、ファイルサイズが小さくできるのであれば小さくしておく方が合理的だ。特にWeb公開を前提とする場合、ファイルサイズはアップロード・ダウンロード、そしてページ表示時間に直結するため、可能な限り小さい方が望ましい。 これまでは現像ソフトからJPEG品質100で出力し、Web用途など容量削減が望ましいケースではWebPに変換してきた。RAWファイルは別途バックアップしてアーカイブとして保存している。目視で画質劣化が認められないのであれば、全てWebPで保存しても問題ないのではないかと考えたが、より優れたフォーマットが存在する可能性があるため、現在利用可能な画像フォーマットについて調査した。 主要な画像フォーマットの特徴 JPEG 最も広く普及している画像フォーマットで、互換性に関する信頼性は高い。しかし、規格自体が古く、現代的な圧縮技術と比較すると効率は劣る。 JPEGについて知っておくべきすべての

WebpとAVIFをWindowsでローカルに使ってみる

ブラウザツールはいろいろあるのだが、ローカルでやるのがやはり便利なのでその方法を模索する。 sharpで画像を一括圧縮、WebP・AVIF変換する - Web production note画像変換ライブラリsharpを用いて、画像をまとめて圧縮や変換（Webp・AVIF・JPG・PNG）できる方法をまとめました。Web production note 非公式なコマンドラインツールなどもあるが、開発が最新のバージョンに追随していなかったりするので、おとなしく公式実装を使うのがよさそう。 PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリース。PNGやJPEG画像をAVIFフォーマットへ変換してくれるコマンドラインツール「cavif」がリリースされています。詳細は以下から。AAPL Ch.AAPL Ch. Webp WebpはGoogleが作ったナウい画像形式。古臭いJPEGに比べて画質を保ったまま小さくできるのがウリ。 WebpのダウンロードはGoogle公式ページの「Windows版をダウンロード」から。 WebP のダ

Webpの向き不向き

WebpにはLosslessとLossyの2つのオプションがある。常識的に考えて、Losslessはファイル容量がデカくなりがちで、ファイル容量を小さくしたければLossyを使えばいいと思うが、意外とそんなことないので、用途を考えて使い分けましょうという話。 ウェブ用の画像形式 | WebP | Google for Developersウェブ用により小さい画像を作成するこの画像形式の詳細や、G4 Converter のダウンロードやサポートのためのリンクを確認できます。Google for Developers 最近、ScanSnapのix1300で本をスキャンするようになった。白黒の最高解像度でスキャンをする場合、PDFで画像が出力される。PDFよりも汎用的な画像ファイルのほうが都合がいいので、pdfimagesで画像を抜き出している。 PDFから画像をTiffで抜き出す PDFが一個だけ $base = (Get-Item *.pdf).BaseName; pdfimages -tiff *.pdf temp; Get-ChildItem temp-*.tif | F

GhostでWebp/AVIFを使う

はじめに 最近、WebpやAVIF形式といった次世代画像フォーマットを積極的に使うようになった。これらの形式は、従来のJPEGやPNG形式と比較して、同等の画質を保ちながらファイルサイズを大幅に削減できるという特徴がある。ページの読み込み速度が向上し、画質の劣化も気にならないため、本ブログでも積極的に使っていきたいと考えている。 ただし、Ghostで運用する際には、いくつか把握しておくべき仕様がある。 Ghostにおける画像処理の仕様 Ghostでは、アップロードされた画像に対して自動的な処理が行われる。特に注意すべき点は以下の通りだ。 GhostPro supports webp or avif?Sharing tests for any future people searching about this. Okay I like to be exacting and detail oriented, especially when learning a new tool/platform, and just did some

白い壁に近づいても露出が変わらない物理学的理由

謎の現象 カメラを持っている方なら、ぜひ試していただきたい実験があります。カメラをマニュアルモードにして、均一に照らされた白い壁に向けてください。そして、壁から離れたり近づいたりしながら、露出計の針を観察してみてください。 驚くべきことに、露出計の針は全く動きません。 なんともオカシな現象です。なぜなら、電球やローソクにカメラを近づければ、露出計の針は確実に明るい方向に振れるからです。スピーカーに近づけば音が大きく聞こえるのと同じように、光源に近づけば明るくなるはずです。光も音も所詮エネルギーですから、近づけば大きくなり、離れれば小さくなる——これは物理学の基本です。 それなのに、なぜ白壁では変化がないのでしょうか? この問題は、私が普段から見ているPhoto Cafeteriaさんのサイトに載っていたものです。サイトには「もしこれについて理論的に説明できる方がいらっしゃいましたら、是非お便りを頂ければと思います。もしご不明の方は、（残念ですが）引き続き幣サイトを覗いてみて頂ければ幸いです。」と書かれていて、ずっとわからずもやもやしていました。 実験の勧め - Photo