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

2024年5月12日

CSS HTML Javascript Tool

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

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

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

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

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

解説

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

あとがき

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

人気の投稿

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。

ブログ アーカイブ