2015Webデザインインデントで表した階層をツリー状に変換するWebアプリ「Directree」Webサービスツール作ってみたTwitter0Facebook0Hatena0Google+0Pocket0Feedly0目次はじめにこんな時に使いたい使い方お気に入りのポイント実装についてES6で書いてみたAceいいねインデントの文字列をオブジェクトに変換するまとめはじめにインデントで表したテキストをツリー状(├─,└─)に変換するDirectreeというWebアプリを作ってみました。http://directree.net/こんな時に使いたいこのブログでもたまに使っていますが、ファイル構成の説明なんかに使う下記の様な形式のテキストです。└─style.cssメールやREADMEなど、文章ベースでファイル構成を伝える時に便利ですよね!これまでは、AsciiTreeというWebアプリを使ったり、実際にあるディレクトリならtreeコマンドで出力していたりしていました。treeコマンドが使えないPCではやっぱり手打ちが必要だったので「それは面倒だ!」ということで、Chromeのみの対応ですが、ディレクトリを画面にドロップするとファイルを一覧する機能を実装してみました。画面左側のエディタにスペース2つ分のインデントを付けることで、階層を一つ区切ることができます。最初の画面にそれっぽいテキストが入っているので、なんとなく分かるかと思います。編集した内容はすぐにツリー状に変換されて、画面右側に反映されていきます。app.jsこんな結果が出力されます。└─app.jsインデントに使用するスペースの数は2つで固定となっていて、出力形式も1パターンです。Chromeのみの対応ですが、ディレクトリを画面にドロップすると中にあるファイルが一覧されます。ドロップするディレクトリは単一のものに限られます。(Chromeのみ)実装について実はReactかMithril.jsを使ってなんかアプリを作りたいなぁ〜というところからのスタートだったのですが、最終的にどちらも使わずに完結させてしまいました...。ES6で書いてみたただ、何かしら自分なりに新しいことにチャレンジしたい!と思ったので、初めてES6でコードを書いてみました。Functionとクラスがあるのがたまらないですね!AceいいねGitHubなんかでも使われているJavaScript製テキストエディタのAceを初めて使ってみました。動作が軽いし、キーバインドも充実、APIが整備されていて組み込みやすいのもいい感じでした。Reactで使う場合、react-aceというコンポーネントが公開されているみたいです。機会があれば触ってみたいなと思います。Aceインデントの文字列をオブジェクトに変換するこのアプリのために、インデントで区切った文字列をオブジェクトに変換するライブラリを作りました。一応npm、bowerからインストール出来るので似たような事がやりたいぜ!という方がいればぜひ使ってみてください!(いなそうですが...)tsuyoshiwada/indent2objまとめそもそも需要の少なそうだなぁ〜という気がしてならないのでブラウザでの検証も最低限ですが、フィードバック頂けたら大変嬉しいです!ちなみにアプリのコードは下記のリポジトリに置いてありますので、参考程度に。この記事のコメントメールアドレスが公開されることはありません。お気軽にコメントどうぞ。コメントをキャンセル渋谷でWebサイトを作っています。ちなみに、「ダッケル」はドイツ語でダックスフンドの事だそうです。