Java設計

guiflowで画面遷移図を作成してみた

画面遷移図とは、Webサイトやアプリケーションの画面間の相互関係を1つの図にまとめたもので、画面遷移図を作成することで、システムで必要な画面を明確にすることができる。

今回は、guiflowというツールを使って画面遷移図を作成してみたので、作成した画面遷移図とguiflowのソースコードを共有する。

なお、guiflowについては、以下のサイトを参照のこと。
https://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42

前提条件

Windows端末上で操作を行うものとする。



guiflowのダウンロード

guiflowをダウンロードするには、以下のURLから「guiflow-win32.zip」をダウンロードすればよい。
https://github.com/hirokidaichi/guiflow/releases/tag/v_0.1.1

guiflowの起動と操作

guiflowの起動と操作は、先ほどダウンロードした「guiflow-win32.zip」を解凍後、以下の方法で行う。

1) guiflow.exe をダブルクリック
guiflowの起動と操作_1

2) 以下のように、画面が開くことが確認できる
guiflowの起動と操作_2

3) 例えば、以下のように左側のエディタで「[検索画面]」と指定すると、右側のビューに検索画面が表示される
guiflowの起動と操作_3

4) 左側のエディタをファイルに保存するには、「File(ファイル)」メニューから「Save As(名前をつけて保存)」を選択
guiflowの起動と操作_4_1

下記ファイル保存のダイアログが表示されるので、ファイル名を指定し「保存」ボタンを押下
guiflowの起動と操作_4_2

保存した「test.txt」の内容は以下の通りで、左側のエディタで入力した内容になっている。
guiflowの起動と操作_4_3

5) 保存したファイルを開くには、「File(ファイル)」メニューから「Open(開く)」を選択
guiflowの起動と操作_5_1

下記ファイルを開くダイアログが表示されるので、ファイル名を指定し「開く」ボタンを押下
guiflowの起動と操作_5_2

以下の画面が起動することが確認できる
guiflowの起動と操作_5_3

6) 右側のプレビューをクリップボードにコピーするには、右側の下矢印ボタンを押下
guiflowの起動と操作_6_1

コピーが終わった旨のダイアログが表示されるので、「OK」ボタンを押下
guiflowの起動と操作_6_2

キーボードの「Ctrl 」+「V」を押下することで、以下のプレビュー画面のキャプチャーが表示される
guiflowの起動と操作_6_3

7) 終了するには、右上の「×」ボタンを押下
guiflowの起動と操作_7



フリーランスエンジニアのエージェントは就業中でも無料で登録できるITエンジニアには、フリーランスという働き方がある。フリーランスとは、会社や団体などに所属せず、仕事に応じて自由に契約する人のこ...

今回作成する画面遷移図の処理内容

今回作成する画面遷移図の処理内容は、以下のサイトの「完成した画面イメージの共有」に記載した画面の遷移となる。

Spring BootのWEB画面上でnull許可項目のDB更新機能を追加してみた(完成イメージと前提条件)これまで本ブログで、Spring BootのWEB画面で、MyBatisによるDB更新機能を何度か取り上げてきたが、DB更新はNull更...

作成した画面遷移図

作成した画面遷移図と、guiflowのコード内容は以下の通り。
画面遷移図

また、これをguiflowの画面上で表示したイメージは以下の通り。
guiflow_画面上の表示

要点まとめ

  • 画面遷移図とは、Webサイトやアプリケーションの画面間の相互関係を1つの図にまとめたものをいう。
  • guiflowというツールを利用すると、コードベースで画面遷移図を作成できる。