ブログ
ツールガイド、ヒント、開発者リファレンス。
-
GIF 圧縮の仕組みと実践：ロッシー LZW と減色でアニメーション GIF を軽量化する
アニメーション GIF をブラウザで圧縮・軽量化する方法を解説。ロッシー LZW、色数、ディザリング、リサイズ、フレーム間引きでファイルサイズがどう変わるかを実測値で示し、gifsicle・ffmpeg・Pillow・sharp のレシピも紹介します。
-
AI チャットや Issue にログを貼る前に、シークレットをマスキングする
ログや .env ファイルを AI チャットや GitHub Issue に貼ったときに何が漏れるか、安定したプレースホルダーによるマスキングの仕組み、そして鍵が漏れてしまった後にすべきこと。
-
CA が CSR を却下する理由と、その事前検出方法
認証局が PKCS#10 要求に署名する前に確認する 7 項目、SAN のない Common Name が役に立たない証明書を生む理由、そして CSR の自己署名を自分で検証する方法。
-
現場で読めるバーコード作成：シンボロジー選定とチェックデジットの実務
EAN-13（JAN コード）と Code 128 の使い分け、右端を基点にしたチェックデジット計算、クワイエットゾーンやコントラストなど印刷段階で読めなくなる原因を開発者向けに解説。
-
CSS clamp()：流体文字を正確に
端点から正確な式を導き、計算・アクセシビリティ・実装を検証します。
-
ブラウザでのDNSルックアップ：DNS-over-HTTPSで引くA / MX / TXT / CAA
dig、nslookup、whatsmydnsを使わずに、どのブラウザからでもDNSレコードを照会する方法。DoHが fetch() 一発でA、AAAA、CNAME、MX、TXT、NS、SOA、CAA、PTR、SRVを解放する仕組みと、DNSSEC・TXTセグメント・伝播にまつわる落とし穴。
-
ゼロ幅文字検出ツール：AI出力とコードに潜む不可視Unicodeを暴く
ゼロ幅スペース、BOM、双方向制御文字、ASCIIテキストを隠せるUnicodeタグ文字など、あらゆる不可視Unicodeを検出・除去。Trojan-Source対応。ブラウザ内で処理。
-
プロのように HTTP ヘッダーを読む：実戦ガイド
HTTP の生ヘッダーを貼り付け、セキュリティ・キャッシュ・CORS・Cookie のメタデータを一度に把握。カテゴリの読み方、コンプライアンスの落とし穴、コードがすでに送信しているヘッダーを使い倒す方法を解説。
-
event.keyCode が嘘をつく理由：JavaScript キーボードイベント現代ガイド
event.key・event.code・keyCode の使い分けで迷うのはもう終わりにしよう。ブラウザが実際に何を発火するか、修飾キーで挙動がどう変わるか、IME 変換が単キーハンドラを壊す理由、そして非 QWERTY 配列でも壊れないショートカットの書き方を解説する。
-
EyeDropper API で画面上の任意のピクセルを取得する
ブラウザネイティブの EyeDropper API を開発者向けに解説します。仕組み、制約、そしてスクリーンショット・動画・他アプリから色をサンプリングする実践的な使い方まで。
-
MIME タイプ検索：アップロード検証のためのマジックバイト判定リファレンス
アップロード検証で拡張子を信用するのはやめましょう。IANA メディアタイプレジストリの仕組み、ブラウザ上で動くマジックバイト判定、そして HTTP ヘッダに入れるべき Content-Type を解説します。
-
IBAN 検証：間違った銀行口座への送金を出す前に止める
mod-97 アルゴリズム、国ごとの BBAN 構造、OCR 時代に SEPA 送金が跳ね返される典型的な落とし穴を解剖。無料・ブラウザ内で動く IBAN チェッカー付き。
-
File Hash Checker：ブラウザで SHA-256 を計算してダウンロードを検証する
サイズを問わずローカルファイルの SHA-256・SHA-1・SHA-384・SHA-512・MD5・CRC32 をブラウザで分割して計算し、期待値や SHA256SUMS と照合。アップロードしません。
-
PKCE ジェネレーター：OAuth 認可コードフローを正しく組むための実践ガイド
code_verifier と code_challenge をブラウザで生成し、/authorize と /token に正しく組み込み、モバイル・SPA のログインを静かに壊す PKCE の五つの落とし穴を回避する。
-
SSL 証明書デコーダー:X.509 PEM の現場速見ガイド
X.509 PEM 証明書をブラウザでデコードし、Subject・Issuer・SAN・有効期間・鍵タイプ・署名アルゴリズム・フィンガープリントを確認。アップロード不要、OpenSSL コマンドも不要。
-
CSP ヘッダージェネレーター：厳格な Content Security Policy を、痛みなく構築する
ディレクティブ・hash・nonce で本番グレードの Content-Security-Policy ヘッダーを構築。strict モードテンプレートと Express / Nginx スニペット付き。
-
AI のトークンとは：tokenizer は日本語をどう数えるか
トークンは番号の付いたテキストの断片です。GPT と DeepSeek の tokenizer が同じ日本語をどう分割するか、文字数からの概算がずれる理由、コードで正確に数える方法を実測値で解説します。
-
タイムゾーン変換ツール：IANA・サマータイム・UTC オフセットが開発者を焼き尽くす理由
IANA タイムゾーン、サマータイム遷移、UTC オフセットの実態と、JavaScript / Python / Go / Java / SQL でそのままコピペできる変換コードを解説します。
-
Markdown 目次ジェネレーター：1 ファイル、4 つのアンカー方言
GitHub・GitLab・Jekyll・Bitbucket で実際に動く Markdown 目次を生成。アンカー slug アルゴリズム、重複処理規則、マーカー方式の原位置更新、そしてリンクを密かに壊すクロスプラットフォーム罠まで網羅。
-
OGPとは？設定するタグとX・Facebook・LINE・はてなブックマークでの読まれ方
OGP（Open Graph protocol）の必須タグ4つと書き方、X・Facebook・LINE・はてなブックマークが実際に読むタグと画像の条件、キャッシュの消し方を公式ドキュメントと生成例で確認します。
-
Cubic Bezier ジェネレーター: CSS イージング曲線を勘で書くのをやめよう
コントロールポイントを 2 つドラッグし、アニメーションを再生して CSS / SCSS / Tailwind をコピー。さらに cubic-bezier の数学、デザインシステムの標準曲線、本番にそのまま出てしまう典型的な落とし穴も解説。
-
ファビコンのサイズは何px？必要な5種類とブラウザが実際に読むファイル
ファビコンのサイズを仕様とブラウザの実測で整理。favicon.icoの16・32・48、iPhone用180、マニフェストの192・512、SVG、Google検索の条件、WordPressのサイトアイコンが出力するサイズまで解説します。
-
カラーコントラストチェッカー: ブランドカラーを殺さずに WCAG AA を通す
前景色と背景色から WCAG 2.x 比、本文 / 大きな文字 / UI 三段の AA/AAA 合否、不合格時は色相を保ったまま明度だけを調整する修正案を取得。
-
EXIF メタデータビューアー：ブラウザで写真の GPS とカメラ情報を取り除く
ブラウザ上で EXIF メタデータを確認し、JPEG 写真から EXIF / XMP / IPTC マーカーセグメントを除去する。JPEG マーカーレイアウト、GPS 座標のデコード、SNS の実際の挙動まで網羅。
-
CSS box-shadowの使い方：下だけ・内側・角丸の影と仕様の読み方
box-shadowの書き方を仕様とChromeの実測で解説。省略できる値、ぼかしの範囲、下だけ・片側だけの影、spreadと角丸、inset、デジタル庁デザインシステムの影、drop-shadowとの違い。
-
ULIDジェネレーター：ULIDとは何か、ソートでUUIDより優れている理由
ULID vs UUID——違いを理解し、ULIDをいつ使うか、生成方法、分散システムにおけるULIDの順序付け問題の解決方法を解説。
-
ブラウザだけで完結する開発者生産性ハック10選：JSON / JWT / UUID を一発処理
インストール不要、ブラウザ上で完結する10個の開発効率テクニック。JSON整形・JWT解析・UUID生成・Cron解読・テキスト差分など、日々の調査作業を数秒で片付けます。
-
開発者ツールの進化史：CLIからブラウザへ
ローカルCLIからクラウドSaaS、そしてクライアントサイドのブラウザアプリへ — 開発者ツールがどう変わってきたか、なぜブラウザベースが勝ち残ったかを整理します。
-
散らかったJSONからクリーンなAPIへ：実録デバッグ物語
本番webhookの「サイレント失敗」を45分で追い詰めた実話。ブラウザツールでトークンを解読し、payloadをdiffし、フォーマットし、ついにバグを掴むまで。
-
Web開発者が押さえるべきセキュリティのベストプラクティス
ハッシュ・HMAC・JWT・TOTP・パスワード保存といったWebセキュリティの基礎を、ブラウザで動く検証ツール付きで実践的に解説。
-
開発者にツールボックスが必要な理由：効率的なワークフローの作り方
デキる開発者は頭がいいのではなく、ツールに対して意図的なだけ。厳選されたツールボックスがワークフローを何倍にも引き上げる理由を解説します。
-
サブネットマスクとは？255.255.255.0の意味と計算方法を2進数・CIDR・過去問で解説
サブネットマスクの意味を2進数で解説。CIDR表記（/24）との換算表、ネットワークアドレスの求め方、基本情報技術者試験の過去問、/31と/32、AWS・Azure・Google Cloudの予約アドレスまで。
-
AES 暗号化ツール：ブラウザでテキストを安全に暗号化・復号
AES-GCM を使ってブラウザ内でテキストを暗号化・復号。AES の仕組み・鍵サイズ・動作モードの選び方と Web Crypto API の実装例を解説します。
-
CSS 詳細度計算ツール：セレクターの重みをオンラインで確認・デバッグ
CSS 詳細度計算ツールでセレクターの重みを即座に確認。0-0-0 記法の仕組み、よくある落とし穴、スタイル競合のデバッグ方法を解説します。
-
Flexboxの使い方：横並び・中央揃え・flex: 1・折り返しを仕様とChromeの実測で解説
CSS Flexboxの使い方を仕様とChromeの実測で解説。横並びと軸、中央揃え、flex: 1とflex: autoの違い、縮み方、日本語ラベルが1文字ずつ縦に折り返す原因、flex-wrapとalign-content、gap。
-
CSS Gridの使い方：fr・minmax・名前付きエリア・auto-fillとauto-fit・subgridを実測で解説
CSSグリッドレイアウトの使い方を仕様とChromeの実測で解説。frとminmax()、1frの列がURLで崩れる理由、-1の意味、全角スペースで無効になるエリア指定、auto-fillとauto-fitの違い、subgrid、縦書き。
-
JSONPathテスターオンライン：コードなしでJSONデータをクエリする
JSONPath構文を学んでオンラインでJSONパス式をテスト。$ルート、ドット記法、フィルター、ワイルドカード、再帰的降下を実例で解説。無料ツール付き。
-
ASCIIコード表（0〜127）：10進・16進・2進と制御文字の意味
ASCIIコード表の全128文字を10進・16進・8進・2進で一覧にし、制御文字の意味とCtrlキー、JIS X 0201・Shift_JISで円記号やダメ文字が生まれる理由、全角英数字との違いをまとめました。
-
アスペクト比計算機完全ガイド：16:9・4:3・カスタム比率の計算とCSS実装
動画・デザイン・Webのアスペクト比を計算・変換。16:9、4:3、21:9の違いと使い分け、リサイズ時の比率維持、CSSでの実装方法を解説。無料ツール付き。
-
Base64エンコードとは何か：仕組みと使い方を徹底解説
Base64エンコードの仕組み、使いどころ、JavaScript・Python・コマンドラインでのエンコード・デコード方法をわかりやすく解説。無料オンラインツール付き。
-
Linuxのパーミッション：rwx・755・644の読み方とchmodの実測ガイド
パーミッションをls -lの読み方から解説。数字表記、レンタルサーバーの推奨値、ディレクトリのrwx、umask、SUID・SGID・スティッキービット、LinuxとmacOSの違いを実測で確認します。
-
cron式完全ガイド：構文・よく使う例・プラットフォーム別設定まとめ
cron式の構文をチートシートと実例で完全解説。Linux crontab・GitHub Actions・AWS EventBridge・Kubernetes CronJobの設定を即座に検証するオンラインパーサー付き。
-
CSS変数ジェネレーター完全ガイド：カスタムプロパティでテーマシステムを構築
CSSカスタムプロパティの構文・スコープ・ダークモード実装・JavaScriptからのアクセスを解説。デザイントークンシステムの構築とオンラインCSS変数ジェネレーターの使い方。
-
.envファイルをオンラインで解析・検証する完全ガイド
.envファイルの構文ルール・よくあるミス・各言語でのパース方法を解説。ブラウザ上でキーバリュー確認・構文チェック・JSON変換まで即座に実行できます。
-
HMACとは？HMAC-SHA256の仕組みと署名検証の実例
HMAC-SHA256 の計算を ipad / opad から 1 段ずつ追い、ハッシュやデジタル署名との違い、LINE・Chatwork の Webhook 署名検証、検証が失敗する原因とテストベクターをまとめました。
-
.htaccessとは？Apache 2.4で確かめた書き方・読み込み条件・リダイレクトの落とし穴
.htaccessが読まれる条件（AllowOverride）、エックスサーバー・ロリポップでの置き場所、mod_rewriteの[L]と[END]、2.2と2.4の書き方の違いを、Apache 2.4.67の実測結果つきで解説します。
-
HTML特殊文字一覧：記号の文字参照コード表（名前・10進・16進）
HTMLの特殊文字・記号を文字実体参照と10進・16進の数値文字参照でコピーできる一覧表。WHATWG の一覧から生成し、名前のない日本語の記号、円記号とバックスラッシュ、Shift_JIS での文字化けも解説します。
-
JSON Schema バリデーター：スキーマ検証の仕組みと実践ガイド
JSON Schemaの主要キーワード・ドラフトバージョン・AJV/Python/GoでのバリデーションAPIを解説。オンラインバリデーターでスキーマとデータを即座にテストする方法も紹介。
-
JWTデコード完全ガイド：JSON Web Tokenの仕組みとセキュリティ
JWTの構造・クレーム・署名アルゴリズムをわかりやすく解説。Node.js・Python・Goでの検証方法と、開発者が陥りがちなセキュリティの落とし穴も網羅。
-
Loremイプサムジェネレーター完全ガイド：UIモックアップ向けプレースホルダーテキストの作り方
UIモックアップや開発用のLoremイプサム プレースホルダーテキストを生成。Loremイプサムの由来、使うべき場面、カスタム出力の方法を解説。無料ツール付き。
-
マークダウン記法 一覧：Qiita・Zenn・note・GitHub の違いと日本語で太字が効かない理由
マークダウン記法を一覧表で整理し、すべて実際の変換結果で確認しました。日本語で太字が効かない句読点の規則、改行の扱い、Qiita・Zenn・note・GitHub の独自記法と違いをまとめています。
-
Markdown の表（テーブル）の書き方：区切り行・配置・パイプのエスケープと Qiita・Zenn での違い
Markdown の表は GFM の拡張機能です。区切り行と配置のコロン、表が崩れる 3 つの原因、コード内の | のエスケープ、セル内改行の <br>、日本語の太字や ○× の幅まで、Qiita・Zenn・GitHub の実際の表示で確かめます。
-
数値進数変換ガイド：2進数・8進数・10進数・16進数の仕組みと使い方
2進数・8進数・10進数・16進数を即座に変換。進数変換の仕組みとプログラミングでの各進数の使いどころを解説。無料オンラインツール付き。
-
安全なパスワードの作り方：文字数・ランダム性・使い回しを数字で確かめる
パスワードの作り方を、IPA・総務省・NIST SP 800-63B の推奨と実際の数字で確認。文字数ごとの強度、漏えいデータの実例、コアパスワード、全角入力の注意、生成ツールの使い方。
-
正規表現 一覧・早見表：全角半角・ひらがな・カタカナ・電話番号まで実例で確認
正規表現の記号を一覧表で整理。\d が全角数字に一致する言語、[ぁ-ん] で漏れる文字、日本語で \b が使えない理由、郵便番号・電話番号・金額の書き方を JavaScript・Python・PCRE2・Go で実行して確認しました。
-
robots.txtの書き方と読まれ方：RFC 9309・WordPress・AIクローラー対策まで
robots.txtをRFC 9309とGoogleの仕様で解説。従うグループは1つ、長いルールが勝つ、5xxは全拒否。WordPressの仮想robots.txt、エックスサーバーのAIクローラー遮断設定との違いも実測付きで。
-
URLスラッグとは？WordPressの日本語スラッグとGoogleの推奨ルールを実例で確認
URL スラッグの意味、Google 検索セントラルの URL 構造のガイド、WordPress が日本語タイトルから作るスラッグ（パーセントエンコードと 200 文字の上限）、全角英数字や【】の扱い、スラッグ変換ライブラリの違いを実行結果で解説。
-
キャメルケースとは？パスカルケース・スネークケースとの違いと略語・数字の扱い
キャメルケース（camelCase）とパスカルケース・スネークケース・ケバブケースの違い、PEP 8・Go・.NET・Google・Rust の規約、URI や ID など略語の書き方、全角英字やカナ混じりの変換で起きることを実例で解説。
-
TOTPとは？RFC 6238 のワンタイムパスワードを計算例で理解する
TOTP（時刻ベースのワンタイムパスワード）の仕組みを、RFC 6238 のテストベクトルで 1 桁ずつ計算して解説。otpauth:// URI、Google 認証システムが無視する設定、サーバー側の検証ルールまで。
-
URLエンコード・デコード完全ガイド：パーセントエンコーディングの仕組み
URLエンコード（パーセントエンコーディング）の仕組みを解説。encodeURIとencodeURIComponentの使い分け、よくある落とし穴、JavaScript・Python・Goでの実装方法を紹介。
-
URLパーサー完全ガイド：URLを構成要素に分解して理解する
URLをプロトコル・ホスト・パス・クエリパラメーター・フラグメントに分解する方法を解説。APIデバッグ・リダイレクト追跡・セキュリティレビューへの実践的な活用法も紹介。
-
UUID完全ガイド：種類・生成方法・データベースでの使い方
UUIDのフォーマット・バージョンの違い・各言語での生成方法を解説。データベースの主キーや分散システムでのベストプラクティスも紹介。無料オンラインツール付き。
-
WebPとは？JPEG・PNGとの違いと対応状況、小さくならない画像を実測で解説
WebPとは何かを、ファイルの中身（VP8・VP8L）、caniuse の対応状況、WordPress と PageSpeed Insights での扱い、写真・日本語スクリーンショット・一覧表の変換実測で解説します。