おやすみの計画はフローチャートで作る。そんな時代。

何を作ったか

簡単に簡単なフローチャートを作れる簡単なWebアプリケーションです。
https://mystifying-thompson-b2b252.netlify.app/

スクリーンショット 2021-07-25 18.52.28.png

上のヘッダー部分にある[ADD BOX]からボックスを追加して、線を繋いでいくだけでフローチャートが作れます。

フローチャートの保存[SAVE]と読み込み[LOAD]にも対応してますが、バックエンドがないのでjson形式でガッツリダウンロードされます。

大してテストしてないので意図しないタイミングでエラーが出るかも知れません。すみません。

開発内容

期間

web1weekに参加すると決めた後、ビックリするぐらい堕落してたので、最終日の昼12時ぐらいから作り始めました。

技術

なんとなく、「フローチャートって作るの大変そう」ってイメージがありますが、一番大変な描画部分はReact Flowというライブラリがあるので、基本的にはこれに乗ってしまっています。

あとはノードやエッジをカスタマイズして、編集機能や保存機能、読み込み機能を作っていっただけです。

なので、今回のはReact Flowの技術調査という感じでサンプルアプリを作った、というのがイメージに近いかもしれません。

UIはMaterial-UIです。(いつも同じの使ってるので代わり映えしませんが……)

終わったらNetlifyに突っ込みました。

作り終わって

さすがにもう「ごめんなさい」しようと思ったのですが、なんとかやっつけられて良かったです……。

まだ全然web1weekの作品を追えていないので、
これから回っていこうと思います。

毎回主催していただいている @dala さんありがとうございました!


iotas𓆡創作支援アプリ運営中𓅬

創作支援ツールとかを作ってます。(Python) https://www.world-type.com 歴史成分多め。

コメント