フォルダーツリー視覚化
インデント付きのファイル・フォルダー名リストを、README や Unix の `tree` コマンド出力でおなじみの罫線ツリー(`├──`、`└──`、`│`)に変換します。パーサーは各行の先頭の空白だけで深さを判断するので — ソースに合わせてレベルごとに 2 スペース、4 スペース、タブ 1 つを選んでください — どんなエディターでも構造を下書きして貼り付けられます。子を持つ項目はディレクトリとして扱われ、末尾に `/` を付けられます。子のない項目はファイルとして表示され、トップレベルのルートが複数あっても問題ありません。 すべての処理は入力と同時にブラウザー内で行われます。何もアップロードされず、下書きはローカルストレージに保持されるので再読み込みしても消えません。出力に使う Unicode 罫線文字は、モダンなターミナル、GitHub/GitLab のコードブロック、ほとんどのドキュメントシステムで正しく表示されます — 等幅フォントで枝が揃うよう、ツリーはコードブロックで囲んでください。
project/ ├── src/ │ ├── components/ │ │ ├── Header.tsx │ │ └── Footer.tsx │ ├── lib/ │ │ └── utils.ts │ └── index.ts ├── public/ │ ├── favicon.ico │ └── robots.txt ├── package.json └── README.md
出力は Unicode 罫線文字を使用 — モダンなターミナルや GitHub でレンダリングされる。
使い方
- インデント付きリストを貼り付けるか入力します — 1 行に 1 つのファイルまたはフォルダー、子は親より 1 レベル深くインデントします。
- リストのインデント方式に合わせてオプション(2 スペース、4 スペース、タブ)を設定します。設定が違うとツリーが平坦になったり過剰に入れ子になったりします。
- ディレクトリに `/` を付けたければ末尾スラッシュをオンにします。
- 結果をコピーして、README やドキュメントのコードブロック(バッククォート 3 つ)に貼り付けます。
よくある質問
- タブとスペースが混在していたら?
- パーサーは選択したインデント単位 1 つしか認識しないため、混在すると深さがずれます。多数派の方式を選ぶか、エディターの正規表現置換で `\t` をスペース 2 つに直すなど、先に統一してください。
- ディレクトリの末尾スラッシュはなぜ重要?
- プレーンテキストにはアイコンがないので、`/` の接尾辞だけが、その項目が拡張子なしのファイルではなくフォルダーだと伝える手がかりです。GitHub の README、ターミナルのドキュメント、Unix の `tree -F` オプションも同じ慣習を使います。
- 空のフォルダーはどう表示しますか?
- 子が 1 つ以上ある行だけがディレクトリと判定されるため、空のフォルダーはファイルのように表示されます。フォルダーとして見せたい場合は `.gitkeep` のようなプレースホルダーの子を入れてください — Git で空ディレクトリを保持する慣習でもあります。
- GitHub でもツリーは正しく表示されますか?
- はい — `├──`/`└──` はただの Unicode テキストです。バッククォート 3 つのコードブロックに入れれば等幅フォントで表示されます。コードブロックの外では空白が詰められ、枝がずれます。
- 入力は保存・アップロードされますか?
- ブラウザーの外には出ません。ただし再読み込み後も残るよう、最新の入力をブラウザーのローカルストレージに保持します。消すにはテキストエリアを空にするか、サイトデータを削除してください。
関連ツール
画像 → ASCII アート
画像を ASCII アートに変換 — 幅・文字セット・反転を調整、ブラウザ内処理。
テキスト ↔ 2進数 変換ツール
テキストを8ビットの2進数に、またその逆に変換します。UTF-8 エンコードなので絵文字やアクセント文字も対応、バイト区切りも選べます。
テキスト ↔ 16進数 変換
テキストを16進数バイトに変換し、16進数をテキストに戻します。UTF-8 対応、ブラウザ上で動作します。
Lorem Ipsum ジェネレーター
段落・文・単語の単位でダミーテキストを生成。
URL スラッグジェネレーター
任意のテキストを URL スラッグに変換 — アクセント除去、区切り選択、最大長指定。
Leetspeak(1337)変換ツール
テキストを leetspeak に変換し、1337 を文字に戻します。ブラウザ上で動作します。
ASN.1 / DER デコーダ
PEM でも base64 でも hex でも貼り付ければ ASN.1 のツリーを表示します。オフセット、タグ、長さ、復号した値まで。