開発者ツール
開発者向けの日常ツール群 — 色の変換、暗号学的ハッシュの生成、Unixタイムスタンプの処理、JWTのデコード。
よく使う変換
クリックするだけで、その作業用に設定済みのツールが開きます。
開発者ツール - 色・ハッシュ・タイムスタンプ・JWT
ここは、本来の作業を中断させる小さな変換のためのカテゴリです。デザインから渡された色は HEX で、CSS が欲しいのは HSL。ログの行には Unix タイムスタンプがあり、それが自分のタイムゾーンで何時だったのかを知りたい。API がトークンを返し、その中身を見たい。ダウンロードページに SHA-256 が載っていて、ファイルを確かめなければならない。どれも難しくはなく、どれも手作業では煩わしく、四つともここでアカウントなしに動きます。
このカテゴリにあるもの
| ツール | できること | 使う場面 |
|---|---|---|
| カラーコンバーター | HEX・RGB・HSL を相互変換する | パレットの表記とスタイルシートが求める表記が違う |
| ハッシュジェネレーター | テキストやファイルの MD5・SHA-1・SHA-256・SHA-512 を計算する | ダウンロードの検証、二つのファイルの比較、キャッシュキーの生成 |
| タイムスタンプコンバーター | Unix タイムスタンプを読める日時に、またその逆に。タイムゾーンをまたいで | ログ、DB の列、API のレスポンスに日付であるべき数値が入っている |
| JWTデコーダー | JSON Web Token を分解し、ヘッダー・ペイロード・有効期限を表示する | 認証をデバッグしていてクレームを見たい |
| 未使用CSS削除ツール | ChromeのCoverageエクスポートやHTMLから、ページで使われているCSSだけを残す | テーマやページビルダーが、ページに必要な量よりはるかに多いCSSを読み込んでいる |
| コード整形ツール | HTML、CSS、JavaScript、SQLを整形または圧縮する。SQL方言に対応し、言語は自動で検出 | バンドル、テンプレート、クエリが読めない1行で届いた、またはコード片をできるだけ小さくしたい |
| cron式チェッカー | cronのスケジュールを1フィールドずつわかりやすい言葉で読み解き、次回の実行時刻をローカル時刻またはUTCで示す | ジョブが違う時刻に実行される、またはデプロイ前にcrontabの1行が何をするのか確かめたい |
| サブネット計算ツール | IPv4とIPv6のネットワークアドレス、ブロードキャスト、ホスト範囲、マスク、アドレスの種類を示し、ネットワークをサブネットに分割する | ファイアウォールのルール、VPCの設計、ルーターの設定を書いていて、範囲を正確に合わせる必要がある |
| ユーザーエージェント解析ツール | どんなユーザーエージェント文字列からもブラウザー、エンジン、OS、デバイスを読み取り、検索エンジンやAIのクローラーを特定する | ログの1行、アクセス解析のレポート、不具合報告に、意味を理解したいユーザーエージェントが含まれている |
| JSON型定義ジェネレーター | JSONのサンプルを、TypeScript、Go、Python、C#、Rustの型、またはJSON Schemaに変換する | APIがJSONを返し、コードにはそのための型付きモデルが必要 |
色の表記と、HSL を知る価値
HEX と RGB はまったく同じものを別の筆跡で書いているだけです。#4F46E5 は rgb(79, 70, 229) であり、0-255 の三チャンネルを十進ではなく十六進で書いたものです。両者の変換は機械的です。
HSL は本当に別のモデルであり、だからこそ居場所があります。色を色相（色相環上の位置、0-360）、彩度（鮮やかさ、0-100%）、明度（0-100%）で表します。実務上の見返りは明快です。ホバー用に色を 10% 暗くするのは数値一つの変更で済み、関連する色調のパレットを作るのは色相と彩度を固定して明度を歩かせることになります。同じことを HEX でやるなら、三チャンネルを計算し直して勘に頼ることになります。
コントラストがもう一つの理由です。通常サイズで WCAG AA を満たすには、文字は背景に対して 4.5:1 以上のコントラスト比が必要です。自分がどのあたりにいるのかは、十六進コードを睨むより HSL の明度のほうがはるかによく予測できます。
ハッシュ: 何のためにあり、何のためではないか
ハッシュ関数は、任意の入力を固定長の指紋に変えます。同じ入力からは常に同じ出力が出て、一文字変えればまったく別の出力になり、ハッシュから入力へは戻れません。だからハッシュは完全性の検証には正しい道具であり、パスワードの保存には間違った道具です。
| アルゴリズム | 出力 | 状況 |
|---|---|---|
| MD5 | 128ビット | セキュリティ用途では破られている。衝突を意図的に作れる。非セキュリティのチェックサムやキャッシュキーなら問題なし |
| SHA-1 | 160ビット | 2017年以降破られている。古いシステムや Git のオブジェクト ID にはまだ見られるが、新規に選んではいけない |
| SHA-256 | 256ビット | ファイル検証・署名・証明書における現在の既定 |
| SHA-512 | 512ビット | 同じ系統でダイジェストが大きい。64ビット環境ではしばしばこちらが速い |
日常的な使い道はダウンロードの検証です。サイトが SHA-256 を公開し、受け取ったファイルをハッシュジェネレーターでハッシュ化すれば、二つの文字列は一文字残らず一致するか、しないかのどちらかです。途中で切れたダウンロードも、改竄されたミラーも同じように捕まえます。
ハッシュが向いていないのがパスワードです。パスワードの素の SHA-256 は、ありふれたハードウェアで毎秒数十億回の試行にさらされます。パスワードの保存には、遅く、ソルト付きで、その目的のために作られた関数 - bcrypt、scrypt、Argon2 - が必要です。意図的に高価になっています。上の表のどれかでパスワードをハッシュ化しているなら、それはバグです。ハッシュジェネレーターには、まさにそのための bcrypt タブがあります。選んだコストで bcrypt ハッシュを作成し、保存済みのハッシュとパスワードを照合でき、bcrypt のページからは直接そのタブを開けます。
Unix タイムスタンプとタイムゾーンの混乱
Unix タイムスタンプは 1970 年 1 月 1 日 UTC の午前 0 時からの秒数です。タイムゾーンを持ちません。そしてまさにそれゆえにシステムはこれを使います。曖昧さのない一つの瞬間であり、どの言語でも表示用にローカル時刻へ変換できるからです。十桁の数値は秒、十三桁はミリ秒で、後者は JavaScript の Date.now() が返すものであり、日付が 1970 年や 55000 年に着地する非常によくある原因です。
タイムスタンプコンバーターは双方向に動き、結果を UTC とあなたのローカル時刻の両方で示します。別の地域のサーバーが書いたログを読むときに本当に必要なのは、たいていその比較です。覚えておくとよい日付が二つ。2147483647 は符号付き 32 ビットのタイムスタンプが保持できる最後の秒で、2038 年 1 月にあたります。0 はエポックそのもので、タイムスタンプが 0 だったり日付が 1970 年 1 月 1 日だったりするのは、ほぼ常に値が一度も設定されなかったことを意味します。
JWT を読む
JSON Web Token は、ドットで区切られた三つの URL セーフ Base64 セグメントです。署名アルゴリズムを述べるヘッダー、クレームのペイロード、そして署名。JWTデコーダーはこれを分解し、はじめの二つを読める JSON として表示します。exp と iat は日時に直されており、リクエストが拒否されているときに知りたいのはたいていそこです。
はっきりさせておくべきことが二つ。第一に、ペイロードは暗号化されていません。トークンを持つ者は誰でもすべてのクレームを読めるので、JWT は非公開の情報を入れる場所ではありません。第二に、デコードは検証ではありません。クレームを読めばトークンが何を主張しているかはわかりますが、署名が有効かどうかはわかりません。それに答えられるのは鍵を持つサーバーだけであり、それを確かめるために署名の秘密鍵を貼り付けさせるブラウザツールがあってはなりません。
トークンは有効なあいだ生きた資格情報なので、どこに貼るかが問題になります。このデコーダーは完全にブラウザ内で動きます。JavaScript があなたの端末でトークンを解析し、どこにも送信しません。ネットワークパネルで確認できます。
関連カテゴリ
- エンコーディングツール - JWT の下にあるのはURL セーフな Base64で、それを知っているとデコードの失敗のほとんどが説明できます。
- ジェネレーター - これらのツールが後で検分することになる識別子やシークレットを作り出します。
- テキストツール - デコードしたペイロードから出てきたJSON を整形する。
- 画像ツール - 同じデザイン作業を進めながら素材を変換する。