チャートやフロー図を作る時に便利な見た目のツールを簡単構築

ホームページ制作を依頼される時に、たまに会社の組織図を表示したいと言われる場合があります。 もちろん、会社組織の階層図を画像で作ってimgタグで貼り付けるだけでもいいんですが、レスポンシブ対応するために、 画像を２パターン用意したり、 svg形式にして、cssのメディアクエリを使ったり、 色々やっていますが、データを読み取って自動的に階層構造を作れる方法を考えてみました。

以前作ったフローチャート作成ツールをご紹介

以前に、DOT言語という、フローチャートをコマンドラインで作成できるサーバーツールを使って、チャート作成ツールを作ったことはあったんですが、 今回はWeb三種の神器言語である、HTMLとCSSとJavascriptのみで完結できるようにしてみたいな〜と考えていました。 DOT言語でフローチャート作成ツール「DotFlow」 今回はここまでの完成状態にはならないので、DOT言語に興味がある人などは、こちらの方がオススメです。

デモ: ２つの要素を自由にドラッグしてそれを線でつなぐ処理

ドラッグしてみてください。（パソコンのみのデモなのでスマホのタッチ操作では動きません）

解説

見た目シンプルですが、コードはめちゃくちゃ書いています。 要素のドラッガブルは、夏季のブログを参考にしてもらえるといとも簡単にできます。 ドラッカブル : JavaScriptで要素をドラッグして移動する簡単な方法 要素２つをつなぐラインは、１つの要素の::beforeと::afterの疑似要素にborderプロパティでラインを表現しています。 角丸にしていますが、それを無くせばわかりやすいかもですね。（ブラウザのデバッグツールなどで確認してみてください） あと、線がどの位置に表示されるかを、座標判別してtypeという値を取得するようにして、cssのselectorで切り分けています。

あとがき

さて、今回作ったこの処理、実は別のツールを作ろうと思って、事前にテストてきに作ったものでした。 フローチャートも、組織図も、トーナメント表も、何にでも応用ができてしまうと思うので、もっとコードを整理して汎用的な構造にしておけば、ライブラリとして使えそうですね。