WebDesign Dackel

インデントで表した階層をツリー状に変換するWebアプリ「Directree」

インデントで表した階層をツリー状に変換するWebアプリ「Directree」

Hatena0
Google+0
Pocket0
Feedly0

はじめに

インデントで表したテキストをツリー状(├─,└─)に変換するDirectreeというWebアプリを作ってみました。

スクリーンショット

http://directree.net/

こんな時に使いたい

このブログでもたまに使っていますが、ファイル構成の説明なんかに使う下記の様な形式のテキストです。

.
├─index.html
├─src
│  ├─coffee
│  │  └─app.coffee
│  └─sass
│    └─style.scss
└─dist
  ├─js
  │  └─app.bundle.js
  └─css
    └─style.css

メールやREADMEなど、文章ベースでファイル構成を伝える時に便利ですよね!

これまでは、AsciiTreeというWebアプリを使ったり、実際にあるディレクトリならtreeコマンドで出力していたりしていました。

しかし、treeコマンドが使えないPCではやっぱり手打ちが必要だったので「それは面倒だ!」ということで、Chromeのみの対応ですが、ディレクトリを画面にドロップするとファイルを一覧する機能を実装してみました。

使い方

画面左側のエディタにスペース2つ分のインデントを付けることで、階層を一つ区切ることができます。
最初の画面にそれっぽいテキストが入っているので、なんとなく分かるかと思います。

編集した内容はすぐにツリー状に変換されて、画面右側に反映されていきます。

こんな入力に対して、

.
  index.html
    js
      app.js

こんな結果が出力されます。

.
└─index.html
  └─js
    └─app.js

ベーシックな動作サンプル

インデントに使用するスペースの数は2つで固定となっていて、出力形式も1パターンです。


また、Chromeのみの対応ですが、ディレクトリを画面にドロップすると中にあるファイルが一覧されます。
ドロップするディレクトリは単一のものに限られます。

ディレクトリのドロップサンプル

お気に入りのポイント

  • 編集内容がリアルタイムに反映される
  • エディタの使い心地がいい感じ
  • ディレクトリのドロップでファイルを一覧できる (Chromeのみ)

実装について

実はReactMithril.jsを使ってなんかアプリを作りたいなぁ〜というところからのスタートだったのですが、最終的にどちらも使わずに完結させてしまいました…。

ES6で書いてみた

ただ、何かしら自分なりに新しいことにチャレンジしたい!と思ったので、初めてES6でコードを書いてみました。まだ全然書き慣れてないのですが、Coffeeでも使っていたArrow Functionとクラスがあるのがたまらないですね!

Aceいいね

GitHubなんかでも使われているJavaScript製テキストエディタのAceを初めて使ってみました。
動作が軽いし、キーバインドも充実、APIが整備されていて組み込みやすいのもいい感じでした。
もしReactで使う場合、react-aceというコンポーネントが公開されているみたいです。機会があれば触ってみたいなと思います。

Ace

インデントの文字列をオブジェクトに変換する

このアプリのために、インデントで区切った文字列をオブジェクトに変換するライブラリを作りました。
一応npmbowerからインストール出来るので似たような事がやりたいぜ!という方がいればぜひ使ってみてください!(いなそうですが…)

tsuyoshiwada/indent2obj

まとめ

そもそも需要の少なそうだなぁ〜という気がしてならないのでブラウザでの検証も最低限ですが、フィードバック頂けたら大変嬉しいです!

ちなみにアプリのコードは下記のリポジトリに置いてありますので、参考程度に。

tsuyoshiwada/directree