開発・Web制作の便利ツールまとめ
エンコード/デコード、正規表現のテスト、QRコードやUUIDの生成、CSSのグラデーションやカラーコード、JSONの整形——開発・Web制作でよく使う道具を一か所に集めました。すべてブラウザ内で完結し、入力データは外部に送信しません。
コピーしてすぐ使える形で結果を表示します。仕様の解説や注意点も添えているので、はじめての記法でも安心して使えます。
変換・エンコード
テキストを Base64 にエンコード、または Base64 をテキストにデコードします。日本語対応。URLセーフ変換、ファイルのBase64化(データURI対応)、デコード結果のファイル保存にも対応。すべて端末内で処理します。
URL に使えない文字をパーセントエンコード、またはデコードします。日本語対応。値として/URL全体/フォーム(+=空白)の3方式に対応し、デコード時は「+をスペースに戻す」も選べます。
文字とコードポイント(U+XXXX)・10進・UTF-8バイト・HTML数値文字参照・\uXXXXを相互に変換。絵文字やサロゲートペアにも対応した完全クライアント処理のツールです。
テキストやファイルから MD5 / SHA-1 / SHA-256 / SHA-384 / SHA-512 のハッシュ値(16進・小文字)を計算します。ファイルのドロップにも対応。すべて端末内で処理し、入力・ファイルは外部に送信されません。
JSON を読みやすく整形、または1行に圧縮(minify)します。キーのアルファベット順ソート・.jsonダウンロードにも対応。構文エラーは行・列の位置を案内。処理はすべてブラウザ内で完結します。
HTMLの特殊文字(& < > " ')をエンティティにエスケープ、または名前付き実体・数値参照(&#NN; / &#xNN;)を元の文字にデコードします。すべてブラウザ内で完結します。
YAMLとJSONを、ブラウザ内だけで相互変換します。マッピング・シーケンス・スカラー・コメントに対応した簡易変換で、データはサーバーに送信されません。
JSONの配列とCSVを、ブラウザ内だけで相互変換します。区切り(カンマ/タブ)やヘッダ行の有無を指定でき、データはサーバーに送信されません。
確認・テスト
正規表現のパターンとフラグを入力し、テスト文字列に対するマッチ箇所のハイライトとマッチ一覧(インデックス・キャプチャグループ)を確認できます。置換プレビューにも対応。
正規表現(regex)の記法を日本語で一覧できる早見表。メタ文字・文字クラス・量指定子・アンカー・グループ・先読み/後読み・フラグと、メールアドレスやURL・郵便番号・日付などよく使うパターン例をキーワードで絞り込めます。
Unix/Linuxのファイルパーミッション(chmod)を計算。所有者・グループ・その他の読み/書き/実行のチェックから755などの8進数とrwxr-xr-xの記号表記を相互変換します。setuid/setgid/stickyの特殊ビットにも対応。
JWT(JSON Web Token)を貼り付けるだけで、ヘッダーとペイロードをBase64URLデコードしてJSON整形表示。exp・iat・nbfは日時に変換します。署名検証はせず、すべてブラウザ内で処理します。
URLを入力するだけで、ページのOGP(og:title / og:image など)やTwitter Card・titleなどのメタタグを取得し、SNSプレビューと一覧で確認できます。
いま接続中のグローバルIPアドレスを表示。ブラウザ・OS・画面サイズ・言語・タイムゾーン・UA文字列もまとめて確認できます。
IPアドレスから国・地域・都市・ISP・タイムゾーン・緯度経度などの位置情報を表示します。接続元IP(自分のIP)の確認や、任意のIPの調査に。
IPv4アドレスとプレフィックス長(/24など)から、ネットワークアドレス・ブロードキャスト・サブネットマスク・ワイルドカードマスク・利用可能なホスト範囲とホスト数を計算します。/0〜/32に対応。
200・301・404・500など主要なHTTPステータスコードの英語名と日本語の意味・使いどころを、コード番号やキーワード検索とカテゴリ(1xx〜5xx)で確認できる早見表です。
ファイルの拡張子とMIMEタイプ(Content-Type)の代表的な対応を早見表で確認。拡張子でもMIMEタイプでも部分一致で検索でき、MIMEタイプはワンクリックでコピーできます。
前景色と背景色のコントラスト比を計算し、WCAGの基準(通常テキスト AA 4.5・AAA 7.0/大きい文字 AA 3.0・AAA 4.5)で合否を判定。実際の配色プレビューも表示します。
パスワードの推定エントロピー・強度ランク・総当たり解読時間を計算します。入力値は送信せずブラウザ内だけで処理します。
cron式(分・時・日・月・曜の5フィールド)を入力すると、人間が読める日本語の説明と各フィールドの解説を表示します。* */n a-b a,b の記法に対応。
生成
テキストやURLを入力すると、QRコードをリアルタイムで生成します。PNG・SVGでダウンロードできます。誤り訂正レベルと保存サイズも選べます。
長さと文字種を選ぶランダム文字列に加え、覚えやすい単語をつないだパスフレーズ(例: Lake-Tower-Reed-Sage-482)も生成できる無料ツールです。crypto乱数で安全に、強度メーター付き。すべてブラウザ内で生成し送信されません。
UUID v4(ランダム)を crypto.getRandomValues で安全に生成。個数指定・ハイフン有無・大文字小文字の切替、各行コピー・全コピー・.txt ダウンロードに対応。UUID v7 / NIL UUID も生成できます。
日本語ダミー / Lorem Ipsum のダミーテキストを段落数・文字数指定で生成します。
linear/radialのグラデーションを、角度・色・位置を調整してリアルタイムにプレビューし、backgroundのCSSを生成・コピーできます。
影のX/Yオフセット・ぼかし・広がり・色・不透明度・insetを調整して、box-shadowのCSSをリアルタイム生成・コピーできます。
CSS・レイアウト・テキスト
幅と高さからアスペクト比を16:9などに簡約します。比固定モードでは比と片方の値からもう片方の解像度を計算します。
ルートfont-sizeを基準に、px・rem・em・ptを相互変換します。CSSの単位換算をリアルタイムに内訳表示します。
Markdownを入力するとHTMLプレビューをリアルタイム表示。見出し・リスト・コードブロック・テーブル・リンク・画像に対応。XSS対策済みで、すべてブラウザ内で処理します。生成したHTMLのコピーと .html ファイル保存にも対応。
HEX・RGB・HSL のカラーコードを相互に変換します。不透明度(アルファ)に対応し、RGBA・HSLA・8桁HEX(#RRGGBBAA)も出力。色見本とカラーピッカー付き。
ベース色(HEX/カラーピッカー)から補色・類似色・トライアド・モノクロマティックなどの配色を自動生成。各色のHEX/RGBを表示し、クリックでコピーできます。
左右2つのテキストを行単位で比較し、追加・削除・共通の行を色分けして表示します。LCS(最長共通部分列)アルゴリズムで差分を算出。一致・差分の件数も表示。
文章の文字数・行数・原稿用紙換算をリアルタイムで数えます。
入力した文章の文字数・UTF-8/Shift_JISのバイト数・空白を除いた文字数・行数・改行数・単語数を、すべてブラウザ内でリアルタイムに数えます。
SQLを読みやすくインデント整形、または1行に圧縮します。キーワードの大文字化・インデント幅を選択可。文字列やコメントの中身は壊さず、処理はすべてブラウザ内で完結します。
画像ファイルを data URI(Base64)に変換します。選択またはドラッグ&ドロップした画像をその場でエンコードし、HTML/CSSに直接埋め込める文字列を出力。すべてブラウザ内で完結し、画像はサーバーに送信されません。