本イベントの流れ
- このイベントで得られること
- スマホアプリの開発工程
- シーケンス図とは何か?
- シーケンス図の書き方
- 今回のハンズオンで使う例題
- ハンズオン
- 質疑応答
このイベントで得られること
- スマホアプリの開発工程の概要がわかる
- シーケンス図が何かわかる
- シーケンス図書き方が分かる
スマホアプリの開発工程
- 上流工程
企画→デザイン→要件定義→基本設計 - 下流工程
詳細設計→プログラミング→単体テスト→QAテスト - プロモーション→ストアリリース
主なドキュメント
- 企画・・・企画書
- デザイン・・・ワイヤーフレーム、画面遷移図、デザイン指示書など
- 要件定義・・・機能一覧、要件定義所、インフラ構成図など
- 基本設計・・・画面定義書/UI仕様書、単体テスト項目書など
- 詳細設計・・・シーケンス図、IF仕様書/API仕様書など
- QAテスト・・・結合テスト項目書、テスト計画書など
今回はその中でも詳細設計に含まれるシーケンス図作成のハンズオンを行おうと思います。
シーケンス図とは何か?
シーケンス図とは、オブジェクト指向のソフトウェア標準設計手法である「UML（統一モデリング言語）」の１つで、プログラムの処理の概要や流れを設計する際に使われる手法になります。
UMLの中では「相互作用図」の1つに位置づけられています。
わかりやすく言うと、仕様に沿った処理の流れを可視化した図
チームやクライアントに見せながら仕様の確認、処理の流れの確認ができる
シーケンス図の書き方
今回はシーケンス図を書くのに便利なPluntUmlの形式でシーケンス図を書いていきます
PluntUMLではシーケンス図の他に以下の図を記載していくことができます
- シーケンス図
- ユースケース図
- アクティビティ図
- ステート図
- クラス図
使用するサイト
今回はシーケンス図でよく使う記載法を簡単にまとめました！
共通部分
- タイトル(シーケンス図等のタイトル)
title サンプル
- 定義(書いたものの順番に左から並んでいきます)
- actor(この指定をしたものは人の形になります)
- participant(この指定をしたものは箱の形になります)
- database(この指定をしたものはデータベースのような形になります)
actor User
participant API
database DB
よく使う部分
- 区切り線(項目を分けたいときに使えます)
== 区切りのタイトル ==
- シーケンスの線
* UserからAPI(コメント付き)
User -> API: APIアクセス
* APIからユーザー(コメントなし)
API --> User
※注意
->は同期通信(直線になります)
-->は非同期通信(点線になります)
- 省略(省略したいときに使用)
...
- 条件分岐
alt OK case
ここに何か書いていく
else NG
ここに何か書いていく
end
- グループ(視覚的に見やすくするためにグループで区分けをしたりします。)
group
ここになにか書いていく
end
例題使用する例題
前回自分と加藤くんで実施したヘルスケア情報取得アプリを想定して、まずは自分の方でシーケンス図を作成していきます！
内容
身長、体重を入力して調査ボタンを押すと、BMI、適正体重、肥満度を返すアプリです！
APIの詳細は前回のTUB資料を参考にします！
https://qiita.com/MHTcode_hiro/private/082eba5aa982efe14cb9
今回は作りやすいように以下のテンプレートを使用していきます
テンプレート
@startuml
actor User
participant APP
participant API
database DB
title Template
== Section 1 ==
alt successful case
else failure
end
@enduml
ハンズオン(制限時間15分)
アカウント作成のシーケンス図を皆さんに書いてもらいます！
流れ
ユーザーからメールアドレス、パスワードを入力して
アカウントを作成するAPIのシーケンス図を作ってください！
登場人物
- APP(アプリ)
- API(API)
- DB(データベース)
ログインに必要な情報
- メールアドレス
- パスワード
必須事項
- 受け取ったパスワードはAPI側で暗号化したあとにDBの保存をする
- アカウント作成後はAPIからはユーザーのIDを返してもらうこととする
- アドレス、パスワードの入力は必須
その他みなさんが必要だと思う要件を追加していってみてください！
記載が完了したらできたシーケンス図の画像を以下のシートに貼っていってください！
https://docs.google.com/spreadsheets/d/1i2WSANpd5HS-WhKi3sYO0k5g3e2GR5PFUGPc6AERyzM/edit?usp=sharing
質疑応答
##本イベントのアンケートにご協力ください！
Googleフォーム
https://forms.gle/3SuSPVVVGwfUSZpW9