このサイトは？
WEBサイトで技術系解説記事を書いていると、例えば以下のようにディレクトリ構造を示したくなることがあります。
どのフォルダに、何のファイルを入れるかを示した図ですね
しかし、これを一から作っていこうとすると、意外と面倒です。これを感覚的なUIで操作して作れたら良いと思いませんか？
そこで、このサイトが活躍します。このサイトは、ディレクトリ構造を簡単に作ることができるジェネレーターです。上のワークスペースの「フォルダを追加」または「ファイルを追加」を選択することで、ワークスペース上にフォルダ・ファイルブロックを追加できます。これをドラッグアンドドロップし、順番を変えることができるのは勿論のこと、フォルダに対してファイルをドラッグアンドドロップすることで、親子構造を作ることができます。実際にこれを操作することで、以下のような形式となりますね：
なお、各ブロックをホバーして出現する鉛筆のマークを押すことで、名前を変更することができます。同様に、ゴミ箱アイコンを押すことで、ブロックを削除することができます。
- ファイルには拡張子を付すと良いと思われます
さて、ディレクトリの定義が終わったら、「出力してコピー」のボタンを押しましょう。これを押すことでディレクトリのプレビューが表示されるほか、同時にそのテキストがクリップボードにコピーされます。
なお、ここでコピーされたテキストはこれ単体では単なるテキストであり、WEBページでそのまま使うには少々見栄えが悪いです。そのため、このテキストを、以下のサイトにてソースコード形式に変換して、HTML形式にすることをおススメします。
サイトの「ソースコード整形」のモード内の「ソースコード」に、先ほどコピーしたテキストをそのまま貼り付けることで、ソースコード形式のテキストがHTML形式で得られます。
これでより良いサイトを作れますねっ！
