図の作成・保存ツール

図の記述を画面でプレビューし、保存して一覧から開き直すサンプルです。記述を入力するとその場で図になり、保存するとデータベースに残ります。一覧から選ぶと、保存した記述を再びプレビューできます。ファイルに書いた図と、画面で見る図が分かれていた状態を、入力、プレビュー、保存、一覧の流れにしています。

図の記述を入力するとプレビューが出て、保存すると一覧から開き直せます。ファイル名で最新を判断するのではなく、保存した記述をデータベースの記録として残します。入力、プレビュー、保存、再開を、サンプルの一つの流れにしています。図の記述をその場でプレビューし、保存した記録を一覧から再び開けるようにしています。保存先はデータベースです。

図の記述はファイルに残り、プレビューと保存先が分かれていました。記述を直しても、プレビューを出す手順と、あとから見返すファイルが別でした。どれが最新の記述かを、ファイル名と更新時刻で判断していました。同じ図を誰かに見せるときも、記述のファイルと、プレビューした画面のどちらを渡すかが決まっていませんでした。

記述を直すたびに、プレビュー用の手順と、保存しているファイルが別でした。ファイルが複数あると、更新時刻を見てどれを開くかを判断していました。相手に渡すときも、記述のファイルと、プレビューした画像のどちらが本体かが決まっていませんでした。直した内容が、次に開いたプレビューに反映されているかを目で確認していました。

記述を入力すると、その場で図のプレビューを出します。内容を直すたびにプレビューを更新し、意図した図になっているかを画面で確認します。保存するとデータベースに残り、一覧に並びます。一覧から一つ選ぶと、保存した記述を再びプレビューできます。入力、プレビュー、保存、再開を同じサンプルの中で通し、ファイルとプレビュー画面を行き来しないようにしています。

入力欄の記述を変えると、プレビューが追従します。保存したあとは一覧に並び、選ぶと保存時点の記述を再びプレビューします。新しい版を保存すれば一覧の記録が増え、ファイルを別名でコピーして最新を示す必要はありません。プレビューは画面、保存は API 経由、という分担でサンプルを通しています。

画面は Next.js で、記述の入力、プレビュー、一覧をブラウザに出します。API は Laravel と PHP で、記述の保存と取得を受けます。データは MySQL に置き、実行環境は Docker です。画面と API とデータベースを Docker でまとめて起動し、プレビューは画面側、保存は API 経由に分けています。図の記述をファイルではなくデータベースのレコードとして残すところまでが、このサンプルの構成です。

Next.js が入力、プレビュー、一覧の画面を出します。Laravel と PHP が記述の保存と取得の API です。MySQL が記述のレコードを持ち、Docker が画面と API とデータベースを起動します。図の文法そのものは記述として保存し、プレビューは画面側でその記述から図を出します。ファイルシステム上の図ファイルは、このサンプルの保存先にしていません。