N2
NanToo

📝ブログ

各ツールの背景にある知識、Web開発・ヘルスケア・デザインで実務的に役立つ解説記事をお届けします。

CSS Anchor Positioningとは ― ツールチップやPopoverの位置計算をCSSに任せる仕組み
DDEVELOPER
開発14

CSS Anchor Positioningとは ― ツールチップやPopoverの位置計算をCSSに任せる仕組み

CSS Anchor Positioningは、ボタンなどを基準にツールチップやPopoverを配置し、画面端では別の表示位置を試せるCSS仕様です。anchor-name、position-area、anchor()、position-try、Popover APIとの使い分け、対応状況とフォールバックを解説します。

#CSS#Anchor Positioning#Popover API
WebGPU はなぜ速いのか ― WebGL との違い、GPUDevice、Pipeline、WGSLを読む
DDEVELOPER
開発14

WebGPU はなぜ速いのか ― WebGL との違い、GPUDevice、Pipeline、WGSLを読む

WebGPUはブラウザから現代的なGPU機能を使うためのAPIです。WebGLとの違い、GPUAdapter/GPUDevice、Render Pipeline、Compute Pipeline、WGSL、対応ブラウザとフォールバック設計を整理します。

#WebGPU#WebGL#WGSL
Bluetooth LE Audio と Auracast は何が新しいのか ― LC3、同時配信、補聴器対応まで
EENTERTAINMENT
エンタメ13

Bluetooth LE Audio と Auracast は何が新しいのか ― LC3、同時配信、補聴器対応まで

Bluetooth LE Audio は、Bluetooth Low Energy 上で音声を扱う新しい基盤です。LC3、Multi-Stream Audio、Auracast broadcast audio、補聴器対応、Bluetooth 6.0 との関係、対応機器選びの注意点を整理します。

#Bluetooth#LE Audio#Auracast
パスキーはなぜフィッシングに強いのか ― WebAuthn / FIDO2 と公開鍵ログインの仕組み
DDEVELOPER
開発13

パスキーはなぜフィッシングに強いのか ― WebAuthn / FIDO2 と公開鍵ログインの仕組み

パスキー(passkey)は、パスワードを保存しないログイン方式です。WebAuthn / FIDO2 の公開鍵認証、チャレンジ署名、origin / RP ID への結びつき、同期パスキーと端末固定キーの違い、復旧設計の注意点を整理します。

#Passkey#WebAuthn#FIDO2
Cookie はなぜ壊れやすいのか ― SameSite / Secure / HttpOnly / Partitioned を正しく読む
DDEVELOPER
開発13

Cookie はなぜ壊れやすいのか ― SameSite / Secure / HttpOnly / Partitioned を正しく読む

Cookie の Secure、HttpOnly、SameSite、Partitioned(CHIPS)、__Host- / __Secure- プレフィックスは、それぞれ守る対象が違います。CSRF、XSS、第三者Cookie廃止、埋め込みウィジェットの状態管理まで、Set-Cookie 属性の設計意図を整理します。

#Cookie#SameSite#HttpOnly
SNI はなぜ見えていたのか ― TLS Encrypted ClientHello(ECH)と HTTPS の最後の平文
DDEVELOPER
開発13

SNI はなぜ見えていたのか ― TLS Encrypted ClientHello(ECH)と HTTPS の最後の平文

HTTPSでも、TLSハンドシェイクのSNIは長く平文で送られてきました。2026年にRFC 9849として標準化された TLS Encrypted ClientHello(ECH) が何を隠し、何を隠さないのかを、TLS 1.3、ClientHelloInner/Outer、HTTPS/SVCB DNSレコード、DoHとの関係から整理します。

#TLS#ECH#SNI
量子コンピュータで TLS は破られるのか ― ML-KEM / Kyber とポスト量子暗号の実務
DDEVELOPER
開発12

量子コンピュータで TLS は破られるのか ― ML-KEM / Kyber とポスト量子暗号の実務

NIST は 2024 年に ML-KEM、ML-DSA、SLH-DSA を正式標準化しました。量子コンピュータが RSA / ECC に与える影響、Harvest Now, Decrypt Later、Kyber から ML-KEM への改名、TLS のハイブリッド鍵交換、開発者が今やるべきことを整理します。

#ポスト量子暗号#ML-KEM#Kyber
Web圧縮は gzip / Brotli から zstd へ進むのか ― Content-Encoding: zstd とHTTP圧縮の現在地
DDEVELOPER
開発12

Web圧縮は gzip / Brotli から zstd へ進むのか ― Content-Encoding: zstd とHTTP圧縮の現在地

HTTPレスポンス圧縮に zstd が加わりつつあります。gzip、Brotli、Zstandard の違い、Accept-Encoding と Content-Encoding の交渉、RFC 8878 / RFC 9659、ブラウザ対応、CDN・Nginx運用での注意点を整理します。

#HTTP#zstd#Brotli
JSONPath はなぜツールごとに書き方が違うのか ― RFC 9535 と jq / JavaScript パスの実務整理
DDEVELOPER
開発11

JSONPath はなぜツールごとに書き方が違うのか ― RFC 9535 と jq / JavaScript パスの実務整理

JSONPath、jq、JavaScript のプロパティアクセス、lodash の path は似ていますが同じ言語ではありません。RFC 9535 で標準化された JSONPath の考え方、$・@・[]・..・フィルタの意味、jq や JavaScript パスとの違いを実務目線で整理します。

#JSONPath#JSON#jq
USB-C PD はなぜ 240W まで出せるのか ― 電圧・電流・PPS の実用数学
LLIFESTYLE
ライフ11

USB-C PD はなぜ 240W まで出せるのか ― 電圧・電流・PPS の実用数学

USB-C 充電器の 30W / 65W / 100W / 240W は、魔法ではなく P=V×A の組み合わせです。USB Power Delivery 3.1 の EPR、28V / 36V / 48V、5A ケーブル、PPS と AVS の違い、ケーブル損失が電流の2乗で増える理由まで、実用上の選び方に落とし込みます。

#USB-C#USB PD#PPS
QR コードはなぜ同じデータでも模様が変わるのか ― マスクパターンとペナルティ計算
EENTERTAINMENT
エンタメ10

QR コードはなぜ同じデータでも模様が変わるのか ― マスクパターンとペナルティ計算

同じ文字列を QR コードにしても、生成ライブラリや条件で模様が変わることがあります。理由は、QR コードが8種類のマスクパターンを試し、読み取りにくい模様へペナルティを付けて最小スコアを選ぶからです。ISO/IEC 18004 の考え方、DENSO WAVE の公式情報、実用上の注意点を整理します。

#QRコード#マスクパターン#誤り訂正
JPEG 品質 80 と 90 の差はどこに出るのか ― DCT・量子化・ファイルサイズのしくみ
GDESIGN
デザイン11

JPEG 品質 80 と 90 の差はどこに出るのか ― DCT・量子化・ファイルサイズのしくみ

JPEG の品質 80 と 90 は、単純なパーセントではありません。DCT で画像を周波数に分け、量子化テーブルで高周波ほど粗く丸める仕組みを理解すると、なぜ 90 から 95 で急に重くなるのか、なぜ文字や線画に弱いのかが見えてきます。

#JPEG#DCT#量子化
20,000mAh なのにスマホを数回しか充電できない理由 ― mAh と Wh と昇圧ロスの物理
LLIFESTYLE
ライフ10

20,000mAh なのにスマホを数回しか充電できない理由 ― mAh と Wh と昇圧ロスの物理

「20,000mAh のモバイルバッテリーなら 3,000mAh のスマホを 6 回くらい充電できるはず」 ― なのに実際は 3〜4 回。 故障ではありません。 mAh (電荷) と Wh (エネルギー) は次元が違い、 両者の橋渡しには電圧が要ること、 そしてセルの 3.7V を USB の 5V に昇圧し端末側で再び降圧する「二重変換ロス」 が原因です。 リチウムイオンの公称電圧、 Panasonic 公式が示す実効 50〜60% という数字、 製品裏の「定格容量」 表記の罠まで、 計算をすべて Node.js で検算しながら解説します。

#モバイルバッテリー#mAh#Wh
0.1 + 0.2 が 0.3 にならない本当の理由 — IEEE 754 浮動小数点をビットで読む
DDEVELOPER
開発11

0.1 + 0.2 が 0.3 にならない本当の理由 — IEEE 754 浮動小数点をビットで読む

JavaScript / Python / Java / C — どの言語で書いても 0.1 + 0.2 は 0.30000000000000004 になります。 これはバグではなく、 ほぼ全ての現代コンピュータが採用する IEEE 754 浮動小数点規格の必然です。 二進小数で 0.1 が無限循環することから、 binary32 / binary64 / binary16 のビット構造、 そして金額計算で fp を使ってはいけない理由まで、 ビット可視化ツールで一つずつ確かめます。

#IEEE 754#浮動小数点#binary32
ガチャ確率の数学 — 「3%を33連で当たる確率」は63%しかない理由と天井の意味
EENTERTAINMENT
エンタメ10

ガチャ確率の数学 — 「3%を33連で当たる確率」は63%しかない理由と天井の意味

「排出率 3% なら 33 連で 1 個出るはず」 ― この感覚、 数学的には外れています。 33 連で当たらない人は 36.6% もいて、 50% の確率に達するには 23 連、 90% には 76 連、 99% には 152 連必要です。 ガチャの確率公式 P=1−(1−p)ⁿ、 期待値、 二項分布、 天井 (pity) の意味、 そして景表法で課徴金になった「3% 表記で実は 0.333%」 事案まで、 全数値を Node.js で再計算しながら整理します。

#ガチャ#確率#二項分布
chmod 755 / 644 / 600 完全ガイド — setuid と sticky の罠まで一気に理解する
DDEVELOPER
開発11

chmod 755 / 644 / 600 完全ガイド — setuid と sticky の罠まで一気に理解する

Linux/Unix のパーミッション 755 / 644 / 600 を「なんとなく」 で使っていませんか? 「4=read, 2=write, 1=execute」 の意味から、 rwx ↔ 8進 の即変換、 setuid / setgid / sticky の特殊ビット、 SSH 秘密鍵が 600 でないと弾かれる理由、 /tmp が 1777 である理由、 そして 4755 (setuid) が現代のセキュリティ慣行では避けられる事情まで、 POSIX 標準と Linux man page を一次ソースに整理します。

#chmod#パーミッション#Linux
72 の法則は実は 1494 年生まれ — 厳密値との誤差を全金利で検算する
BBUSINESS
ビジネス9

72 の法則は実は 1494 年生まれ — 厳密値との誤差を全金利で検算する

「72 ÷ 年利% で元本が 2 倍になる年数」 ― 投資の入門書で必ず出てくるこの近似法則は、 1494 年のイタリア数学者ルカ・パチョーリの著作にすでに登場します。 当時は導出も理由も書かれていなかったこの 72 という数字は、 現代の対数計算 ln(2)/ln(1+r) と比べてどれだけ正確なのか。 5〜10% で誤差 1% 未満、 8% で完璧、 高金利で外す ― 全金利帯の誤差を Node.js で実測し、 連続複利の 69.3、 70 や 78 への調整版まで整理します。

#72の法則#複利#金利計算
3d6 と 4d6-drop-lowest はどれだけ違うのか — TRPG 能力値の数学
EENTERTAINMENT
エンタメ10

3d6 と 4d6-drop-lowest はどれだけ違うのか — TRPG 能力値の数学

D&D 5e の標準ロール「4d6-drop-lowest」 は、 オリジナル D&D (1974) の 3d6 ストレートと比べてどれだけ「優しい」 のか。 平均値 10.50 → 12.24、 18 が出る確率は 0.46% → 1.62% (3.5 倍)、 6 つ全部 13 以上の確率は 0.030% → 1.345% (45 倍)。 畳み込みで全 1296 通りを完全列挙し、 D&D 5e の修正値 (能力値修正) ベースで「平均的なキャラがどれだけ強くなったか」 を数学的に整理します。

#TRPG#D&D#ダイス
Mbps と MB/s はなぜ 8 倍違うのか ― bit と byte、 そして 10 進・2 進接頭辞の話
LLIFESTYLE
ライフ9

Mbps と MB/s はなぜ 8 倍違うのか ― bit と byte、 そして 10 進・2 進接頭辞の話

「1Gbps の光回線なのにダウンロードは 125MB/s 止まり」 ― このズレの正体は、 ほぼ 1 byte = 8 bit という単純な事実です。 さらに紛らわしい 10 進接頭辞 (M=10⁶) と 2 進接頭辞 (Mi=1024²) の違い、 HDD 容量が減って見える理由まで、 IEC 60027-2 / NIST の一次資料を基に整理します。

#Mbps#MB/s#bit
マグニチュードが「1」違うとエネルギーは32倍 ― 震度との違いとGutenberg-Richterの式
NGENERAL
その他11

マグニチュードが「1」違うとエネルギーは32倍 ― 震度との違いとGutenberg-Richterの式

ニュースでよく聞く「マグニチュード」 と「震度」。 この 2 つはまったく別の指標です。 マグニチュードは地震の規模 (放出エネルギー) を表す対数尺度で、 1 増えるとエネルギーは約 32 倍、 2 増えると 1000 倍。 Gutenberg-Richter のエネルギー式、 原爆との比較、 そして震度・気象庁マグニチュード (Mj) とモーメントマグニチュード (Mw) の違いを一次資料で整理します。

#地震#マグニチュード#震度
燃費表示の謎 ― km/L と L/100km、 なぜ「逆数」で印象が変わるのか (MPG illusion)
LLIFESTYLE
ライフ10

燃費表示の謎 ― km/L と L/100km、 なぜ「逆数」で印象が変わるのか (MPG illusion)

日本/米国は「距離あたりの燃料効率」 (km/L, MPG)、 欧州は「燃料あたりの距離効率」 (L/100km)。 同じ車の同じ性能を表す数字なのに、 直感に与える印象が劇的に違うのが MPG illusion です。 Larrick & Soll (Science 2008)、 米国 EPA の 2013 年燃費ラベル改定、 日本の 10・15 → JC08 → WLTC モード変遷を一次ソースで整理します。

#燃費#MPG#L/100km
角度の単位の歴史 ― 360° のバビロニア、 ラジアンの数学的必然、 そして消えたグラード
NGENERAL
その他10

角度の単位の歴史 ― 360° のバビロニア、 ラジアンの数学的必然、 そして消えたグラード

「1 周は 360°」 ― 当たり前に使っているこの分割は、 古代バビロニアの 60 進法と古代天文学の名残です。 一方、 数学者がこだわるラジアンは sin x の微分が cos x になる「唯一の自然な単位」。 フランス革命期に生まれて消えかけたグラード (gradian) は、 今も欧州測量界で生き残っています。 Wikipedia、 SI Brochure、 ECMA-262 を一次ソースに、 角度単位 3 種類の正体を整理します。

#角度#ラジアン#
BTU と空調機 ― 米国エアコンの『12,000』、 日本の『2.8 kW』、 1 冷凍トンの謎
LLIFESTYLE
ライフ11

BTU と空調機 ― 米国エアコンの『12,000』、 日本の『2.8 kW』、 1 冷凍トンの謎

海外のエアコンを買おうとカタログを見ると 12,000 BTU/h、 18,000 BTU/h といった謎の数字が並びます。 一方、 日本のエアコンは 2.2 kW、 2.8 kW、 6 畳用、 8 畳用 ― 同じ「冷房能力」 を表しているのになぜここまで違うのか。 「1 冷凍トン」 という 19 世紀の氷貯蔵時代の名残、 BTU の定義、 SEER / APF の効率指標を一次ソースで整理します。

#BTU#冷凍トン#エアコン
明治改暦 1873 ― 12 月 3 日が翌日 1 月 1 日になった日、 太陰太陽暦から太陽暦への切替
NGENERAL
その他11

明治改暦 1873 ― 12 月 3 日が翌日 1 月 1 日になった日、 太陰太陽暦から太陽暦への切替

1872 年 12 月 31 日(旧暦 明治 5 年 12 月 3 日)の翌日が、 1873 年 1 月 1 日(新暦 明治 6 年 1 月 1 日)に。 公布から実施まで 1 か月未満という荒業の改暦は、 西洋化の象徴であると同時に明治政府の財政事情から生まれた決断でもありました。 太政官布告第 337 号、 国立公文書館資料、 福沢諭吉『改暦弁』を一次ソースに、 改暦の経緯・社会的影響・現代に残る痕跡を整理します。

#明治改暦#太陽暦#太陰太陽暦