HTML・CSS・JavaScript・JSON・XML の圧縮コードを一画面で展開
ブラウザ一画面で HTML・CSS・JavaScript・JSON・XML の圧縮コードを展開
本番ビルドは容量の都合、最初から圧縮された状態で届きます。HTML テンプレートは一行に潰れ、スタイルシートから空白が消え、JavaScript バンドルは平らになり、JSON ログは塊で出力され、XML エクスポートにはインデントがありません。バイトは節約できても、デバッグはつらいものです。このページは、スニペットを貼った瞬間に読める構造が欲しいときのためのツールです。IDE 全体でもビルドパイプラインでもなく、貼り付けやファイル読み込みのあと、ブラウザタブ内ですぐ展開できます。
ここでの「展開」と、やらないこと
このツールでの展開とは、改行とインデントを戻してネストを追い、抜けた括弧を探し、チケット用に一部をコピーしやすくすることです。HTML 圧縮の解除、CSS の行整理、JavaScript の一行展開、JSON のインデント復元、XML 構造の展開——検索語は形式ごとに違っても、目的は同じ「読めるテキスト」です。JavaScript の難読化解除ではありません。リネームされた変数、削除されたコメント、意図的なエンコードはそのまま残ります。入力が有効で潰されているだけなら展開は役に立ち、わざと難読化されていても見えるのは構造までで、秘密は戻りません。
単体のフォーマッターは、ファイル種別をすでに知っている前提が多いです。ここでは自動判別で貼り付け内容を適切なエンジンへ送り、誤判定なら形式を上書きできます。HTML にスクリプトやスタイルが埋まっている場合は、<script>・<style> 内まで展開するオプションもあります——ページ全体は一行なのにバグはコールバック内、というときに便利です。JSON・XML・HTML が少し壊れているときは、展開前に修復を試します。JSON ビューや XML ツールと同じ考え方で、末尾カンマや閉じタグのズレで作業全体が止まらないようにしています。
貼り付けて展開5形式、ひとつのツールバー
どのフォーマッタータブを開くか迷う必要はありません。一度貼れば HTML、CSS、JavaScript、JSON、XML を処理。種類が分かっているなら手動指定も可能です。
展開後は本物のビューアで確認
展開した HTML はホームの Playground でライブプレビュー。JSON と XML は JSON ビューア・XML ビューアへ飛び、出力は読み込み済み——平坦なテキストエリアを睨むだけではありません。
貼り付けた内容は端末に留まる
展開はブラウザタブ内だけで実行。ステージング API、クライアントリポジトリ、障害ログ由来のコードもサーバーへ送りません。
汎用フォーマッターとの違い
複数形式の展開とビューアプレビュー——単機能ツールには少ない組み合わせです。
実務で貼る形式をひとつの入口で
チーム作業では圧縮は一言語だけとは限りません。CMS 出力の HTML、CDN の CSS、ログ一行の JSON、旧連携の XML——形式ごとにブックマークを替えると流れが切れます。インデント、修復、出力を同じ画面に置き、コンテキストを移す前に終わらせられます。
このページで圧縮コードを展開する手順
1）圧縮コードを貼り付け・読み込み・入力
本番出力を入力パネルへ、またはファイルを読み込み。形式は「自動判別」のままでよく、ログ断片が JSON と誤判定されるなら JSON に固定。インデント設定は展開前に反映されます。
2）ワークスペースで展開
自動実行を切っているなら「展開」をクリック。貼り付けでも起動します。HTML にスクリプトが埋まっているなら「インライン JS・CSS も展開」をオン。失敗したら HTML・JSON・XML で修復を試すか、形式を手動変更。
3）対応形式はビューアで開く
ツールバーの目アイコン「ビューアでプレビュー」を使います。HTML は Playground、JSON は JSON ビューア、XML は XML ビューア。CSS・JavaScript はボタンがグレー——編集のための展開で、視覚確認用ではありません。
4）コピー・ダウンロード・さらに探索
展開テキストをエディタへコピー、拡張子付きでダウンロード、またはビューアでノードを辿る。インデントや修復を変えたら再実行——出力はその場で更新されます。
圧縮コード展開 FAQ
クリップボードの圧縮スニペットから始めましょう
HTML・CSS・JavaScript・JSON・XML をローカルで展開——HTML・JSON・XML はちゃんとしたビューアで確認。
圧縮コード展開
- HTML・CSS・JS・JSON・XML の自動判別または手動選択
- 展開した HTML・JSON・XML をサイトビューアでプレビュー
- HTML のインラインスクリプト・スタイル展開（任意）
- 破損 JSON・XML・HTML の修復経路
ブラウザで動作。アカウント不要。
一行の本番コードを横スクロールで追わない
貼り付け、展開、形式が合えばビューアで確認——構造が人が書いたように読めたらコピー。