はじめに
みなさんこんにちは。
突然ですがみなさんはお料理をする際にレシピが覚えられず、以前参考にしたレシピを探し回るのに手間がかかるなーと思ったことはありますでしょうか？
そんな自身の悩みを解決すべく、ローコードを用いたレシピ管理webアプリの作成にチャレンジしてみたいと思います！！
今回の記事では、webアプリ作成の準備段階として以下の流れで システム設計書 を作成していきます。
- 要件定義
- 基本設計
- 詳細設計
ローコード開発でのシステム設計の参考になれば幸いです。
開発環境
今回はSPIRAL®ver2を用いてアプリの作成を行います。
SPIRAL®ver2を使用する際の参考にしていただければ幸いです。
SPIRALについて▷https://qiita.com/SPIRAL_internship/items/2b78efb2c25a027c84d6
SPIRAL SPIRAL®ver2について▷ https://spiral.pi-pe.co.jp/
▼お試しはこちら
要件定義
webアプリへの要望
今回のwebアプリでは，登録したレシピを一覧表形式で表示し，各レシピを表示できるようにしたいと考えています。
また、まずは私(個人)だけが使用することとして設計をおこないます。
それぞれに欲しい具体的な機能としては以下のようになります。
-
レシピの登録
レシピを登録する際に欲しい情報としては、料理名・材料や調理工程はもちろん調理時間やカテゴリー分け、何人前の分量なのかなどの情報があると嬉しいですね！ -
一覧表
たくさんレシピが増えることを想定して，レシピ名や調理時間からの検索やカテゴリーごとの一覧を表示できると嬉しいです！ -
各レシピの表示
各レシピの表示は一覧表から遷移できるようにしレシピ変更や削除などもできると便利です！ -
+α
＋αとして、webアプリへ入るためのログインも必要になるかなと思います。
今回は個人で使えればいいので簡単なログインにし、念のためパスワード変更も行えるようにしておきます。
基本設計
次にSPIRAL®ver2の機能と要件定義をもとに基本設計を行います。
今回使用する主な機能は DB、 フォーム、 一覧表・詳細ページ、 認証エリア になります。
各機能ずつ必要になるものを上げていきます。
DB
今回のwebアプリケーションでは
- ログインDB：ログインするための情報を格納するDB
- レシピDB：登録したレシピを表示するためのDB
の2つのDBが必要になります。
フォーム
フォームはそれぞれ以下の際に必要になります。
- ログイン
- ログイン登録
- ID・パスワード変更
- レシピ登録
- レシピ変更
- レシピ削除
SPIRAL®ver2ではフォームにそれぞれ種類があるため、以下4つの種類のフォームからの作成が必要になります。
- ログインフォーム：ログインフォーム
- 登録フォーム：ログイン登録フォーム、レシピ登録フォーム
- 更新フォーム：レシピ変更フォーム、ID・パスワード変更フォーム
- 削除フォーム：レシピ削除フォーム
レコードリスト・レコードアイテム
レシピDBに登録したレシピをレシピ一覧に、各レシピの詳細を詳細ページに表示させます。
- レシピ一覧(レコードリスト)
- レシピ詳細(レコードアイテム)
加えてレコード検索とレシピカテゴリーごとの一覧表(詳細設計にて後述)の作成を行います。
またレシピ一覧にはレシピ登録フォームと ID・パスワード変更フォーム、レシピ詳細にはレシピ変更・削除フォームを設置します。
認証エリア
認証エリアを作成します。
・レシピ管理マイエリア
認証エリア以下の機能が範囲内とします。
- 各レシピ一覧とレシピ詳細
- レシピ登録・変更・削除フォーム
- ID・パスワード変更フォーム
詳細設計
次に基本設計で考えたそれぞれの機能とその中身を具体的にしていきます！
DB
各DBに対して、必要になるフィールドと設計を書きだします。
1. ログインDB
| フィールドタイプ | フィールド名 | 識別名 | 設定 | 用途 |
|---|---|---|---|---|
| テキスト | 氏名 | name | 必須制約・ユニーク制約 | 認証エリアのためのIDとして使用します |
| パスワード | パスワード | passward | 必須制約・ユニーク制約 | 認証エリアのためのパスワードとして使用します |
2. レシピDB
| フィールドタイプ | フィールド名 | 識別名 | 設定 | 用途 |
|---|---|---|---|---|
| テキスト | レシピ名 | recipe | 必須制約・インデックス | レシピ名の登録 |
| テキスト | 調理時間(分) | time | 必須制約・インデックス・入力制限(数字) | 調理時間の登録 |
| テキスト | 何人前 | num | 必須制約・インデックス・入力制限(数字) | 何人前かの登録 |
| セレクト | カテゴリー | category | 必須制約・インデックス・セレクト項目(メイン・(メイン・おかず・デザート) | レシピのカテゴリー登録 |
| テキストエリア | 材料 | igredient | 材料の登録 | |
| テキストエリア | 調味料 | seasoning | 調味料 | |
| テキストエリア | 工程1 | process1 | 工程1の登録 | |
| テキストエリア | 工程2 | process2 | 工程2の登録 | |
| テキストエリア | 工程3 | process3 | 工程3の登録 | |
| テキストエリア | 工程4 | process4 | 工程4の登録 | |
| テキストエリア | 工程5 | process5 | 工程5の登録 | |
| テキストエリア | 工程6 | process6 | 工程6の登録 | |
| テキストエリア | 工程7 | process7 | 工程7の登録 | |
| テキストエリア | 工程8 | process8 | 工程8の登録 | |
| テキストエリア | 工程9 | process9 | 工程9の登録 | |
| テキストエリア | 工程8 | process10 | 工程10の登録 |
一旦工程は10つ分登録しておきます(足りるかな。。。)
フォーム
各フォームに対して各DBから登録した必要となるフィールドを書きだします！
1. ログイン
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| ログインフォーム | 認証エリアログインフォーム | レシピ管理マイエリア | ログインDB | 氏名・パスワード |
2. ログイン登録
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| 登録フォーム | ログイン登録フォーム | なし | ログインDB | 氏名・パスワード |
3. ID・パスワード変更
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| 更新フォーム | ID・パスワード変更 | レシピ管理マイエリア | ログインDB | 氏名・パスワード |
※氏名はあらかじめ登録した内容を引継ぎ表示しておきます。
4. レシピ登録
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| 登録フォーム | レシピ登録フォーム | レシピ管理マイエリア | レシピDB | レシピ名・調理時間(分)・何人前・カテゴリー・材料・調味料・工程1～10(省略) |
5. レシピ変更
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| 更新フォーム | レシピ変更フォーム | レシピ管理マイエリア | レシピDB | レシピ名・調理時間(分)・何人前・カテゴリー・材料・調味料・工程1～10(省略) |
※すべてのフィールドに対してあらかじめ登録した内容を引継ぎ表示しておきます。
6. レシピ削除
| フォームタイプ | 表示名 | 認証エリア | 認証DB | フィールド |
|---|---|---|---|---|
| 削除フォーム | レシピ削除フォーム | レシピ管理マイエリア | レシピDB | レシピ名・調理時間(分)・何人前・カテゴリー・材料・調味料・工程1～10(省略) |
レコードリスト・レコードアイテム
1. レシピ一覧
| 表示名 | 認証エリア | 認証DB | データフィールド選択 | 抽出方法 | 用途 |
|---|---|---|---|---|---|
| レシピ一覧表 | レシピ管理マイエリア | レシピDB | レシピ名・調理時間・何人前・カテゴリー | なし | 登録されたレシピすべての一覧表 |
| メインレシピ一覧表 | レシピ管理マイエリア | レシピDB | レシピ名・調理時間・何人前・カテゴリー | 抽出条件(カテゴリーがメインと等しい) | カテゴリーがメインで登録されたレシピの一覧表 |
| おかずレシピ一覧表 | レシピ管理マイエリア | レシピDB | レシピ名・調理時間・何人前・カテゴリー | 抽出条件(カテゴリーがおかずと等しい) | カテゴリーがおかずで登録されたレシピの一覧表 |
| デザートレシピ一覧表 | レシピ管理マイエリア | レシピDB | レシピ名・調理時間・何人前・カテゴリー | 抽出条件(カテゴリーがデザートと等しい) | カテゴリーがデザートで登録されたレシピの一覧表 |
※各レシピ名にレシピ詳細へのリンク設定
2. レシピ詳細
| 表示名 | 認証エリア | 認証DB | データフィールド選択 |
|---|---|---|---|
| レシピ詳細 | レシピ管理マイエリア | レシピDB | レシピ名・調理時間(分)・何人前・カテゴリー・材料・調味料・工程1～10(省略) |
3. レコード検索
| 表示名 | 認証DB | 検索対象レコードリスト |
|---|---|---|
| レシピ検索 | レシピDB | レシピ一覧表 |
| メインレシピ検索 | レシピDB | メインレシピ一覧表 |
| おかずレシピ検索 | レシピDB | おかずレシピ一覧表 |
| デザートレシピ検索 | レシピDB | デザートレシピ一覧表 |
認証エリア
| 表示名 | 識別名 | 認証DB | IDフィールド | 認証フィールド | |
|---|---|---|---|---|---|
| レシピ管理マイエリア | recipearea | レシピ管理DB | 氏名 | パスワードを使用する |
認証エリアにはフォーム、レコードリストなど(ブロック)を **ページ ** に 設定します。
各ページ設定は以下のようにします。
- ページ設定
※認証エリア作成時にログインフォームが自動的に設定されます。
| 表示名 | 識別名 | 認証 | クリックログイン | 設定ブロック | 用途 |
|---|---|---|---|---|---|
| レシピ管理ページ | recipepage | あり | なし | レシピ一覧タイトル・レシピ一覧検索・レシピ一覧表 | レシピ一覧画面(topページ) |
| レシピ詳細ページ | recip_detail | あり | あり | レシピ詳細タイトル・レシピ詳細 | レシピの詳細ページ |
| メインレシピ一覧ページ | recip_main | あり | あり | メインレシピ一覧タイトル・メインレシピ検索・メインレシピ一覧表 | メインレシピ一覧画面 |
| おかずレシピ一覧ページ | recip_okazu | あり | あり | おかずレシピ一覧タイトル・おかずレシピ検索・おかずレシピ一覧表 | おかずレシピ一覧画面 |
| デザートレシピ一覧ページ | recip_desert | あり | あり | デザートレシピ一覧タイトル・デザートレシピ検索・デザートレシピ一覧表 | デザートレシピ一覧画面 |
リンクテキストを張り付けたり、ページのタイトルを作成したりと自由にコンテンツを作成することができる ** フローコンテンツ **を使用します。
| 表示名 | 内容 | 設置場所 |
|---|---|---|
| レシピ一覧タイトル | レシピ一覧のタイトル作成・テキストリンク(ID・パスワード変更フォーム・ログインフォーム・レシピ登録フォーム・カテゴリー別一覧表(省略)I)の挿入 | レシピ管理ページ |
| レシピ詳細タイトル | レシピの名前を認証レコード値から引っ張り記載・テキストリンク(レシピ更新フォーム・レシピ削除フォーム) | レシピ一詳細ページ |
| メインレシピ一覧タイトル | テキストリンク(TOPページ・おかずとデザートレシピ一覧) | レシピ一詳細ページ |
| おかずレシピ一覧タイトル | テキストリンク(TOPページ・メインとデザートレシピ一覧) | レシピ一詳細ページ |
| デザート一覧タイトル | テキストリンク(TOPページ・メインとおかずレシピ一覧) | レシピ一詳細ページ |
以上が詳細設定になります！
最後に
非常に長くなりましたが詳細設計まで書くことができました！！
ローコードでのシステム設計なので、視覚化しやすく自分の設計したいシステムを想像しやすかったですが、いちから設計書を書いたことは(多分)ないのでとても難しく、てこずりました。(設計漏れがありそう。。。)
この設計をもとに実際にSPIRAL®ver2を用いて実際に作成していきたいと思います。
かなり設定することがあるように思えますが、次回は組んでみた際の設計図との相違点や作成にかかった時間、難易度・使用感などの感想も報告できたらと思います！！
私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1のトライアルアカウントを無償提供しています。このアカウントの記事でも紹介するように、たくさんの機能ございます。
▶︎ フォーム
▶︎ 認証エリア
▶︎ ログイン
▶︎ メール送信
▶︎ カスタムプログラム
などの作成できますので、ぜひ試してみてください!!
そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。SPIRAL ver.1にご興味のある方、ぜひこちらもご覧ください👇