Webアプリの設計③~画面遷移図の作成~

はじめに

前々回の記事から、「自己研鑽＋ポートフォリオ+趣味」という位置づけでWebアプリを作り始めました。

「自己研鑽＋ポートフォリオ+趣味」

自分のフェーズに合致したとてもいい記事があったので、こちらの記事を参考に進めています。

キーワード

設計書, 設計, 設計プロセス, 外部設計

目次

1. 全体
2. 外部設計
   1. 画面設計
      1. 画面遷移図
3. おわりに

全体

各フェーズのざっくりとした自分の理解です

1. 企画
   1. どんなものを作るか決める
      1. ユーザーゴール
         1. サービスを使う人のゴール
      2. ビジネスゴール
         1. サービスを作る人のゴール
2. 要件定義
   1. 機能要件
      1. 最低限の機能
   2. 非機能要件
      1. +αの機能
3. 外部設計←イマココ
   1. 方式設計
      1. 使用するサーバー,言語,フレームワーク,DBなどの環境整備を行う
   2. 機能設計
      1. 実装する機能の洗い出し
         1. DB設計, バッチ処理等もここで設計する
   3. 画面設計
      1. 画面遷移図の作成
         1. トリガー, 流れを図示する
4. 内部設計
   1. データ設計
      1. 概念設計
         1. 概念図
      2. 論理設計
         1. ER図
      3. 物理設計
         1. テーブルの図
   2. モジュール設計
      1. モジュールの分割を行う
   3. プログラム設計
      1. 設計内容を具体的に落とし込む
5. 開発
   1. goooooooooooooooooooooo
6. テスト
   1. 単体テスト
      1. モジュール内のテスト
   2. 結合テスト
      1. モジュール間のテスト

画面遷移図

miroを無料で使ったので悪い画質ですが、悪しからず。

あるあるだとは思いますが、画面遷移図を書くうちに、これについて考慮が漏れてたなーとか、この仕様の方が良いのでは、等と思っていくつも修正してあります。以前の記事で作成した仕様や機能設計から大幅に変更されました。

以下に前回より変更した点を記しておきます

• チャレンジ概念の導入

まず、30日チャレンジのためのアプリだというところに立ち返り、そのための概念を導入しました。

「チャレンジにぶら下がって初めて投稿が出来る」仕様に変更しました

また、チャレンジは2個しか作成できず、作成から4日目以降は更新不可能(削除は可能)という仕様にしました。

それに伴い、チャレンジ作成後30日を過ぎると投稿が出来なくなる仕様にしました。

• SNS機能の削除

自前で作るよりも外部SNSと連携できることの方が、技術の学習的にもサービス的にもメリットが多そうだという事に気づきました。

おわりに

今回は全体の画面遷移図を描いたところで力尽きました。
次回は各画面のレイアウト図を描こうと思います。(どんどん筆が重くなっていく…)

ではまた。