はじめに

みなさんこんにちは！
突然ですがみなさんはお料理をする際にレシピが覚えられず、以前参考にしたレシピを探し回るのに手間がかかるなーと思ったことはありますでしょうか？
そんな自身の悩みを解決すべく、ローコードを用いたレシピ管理webアプリの作成にチャレンジしてみたいと思います！！

前回の記事ではシステム設計を行いました。
今回はシステム設計書を踏まえて、実際に作成していきます！！

前回のおさらい

前回作成したシステム設計が下記図になります。

前回記事の詳細が知りたいかたはこちらから☟
▷ レシピ管理webアプリを作成してみた　～システム設計編～

レシピ管理アプリの構築

開発環境

今回はSPIRAL®ver2を用いてアプリの作成を行います。
SPIRAL®ver2を使用する際の参考にしていただければ幸いです。
SPIRALについて▷https://qiita.com/SPIRAL_internship/items/2b78efb2c25a027c84d6
SPIRAL SPIRAL®ver2について▷ https://spiral.pi-pe.co.jp/

DBの作成

アプリ画面からアプリを作成し、初めにDB作成をおこないます。

レシピDBとログインDBを作成し、それぞれのDBに必要なフィールドを作成しました！

DBはこれで完了です！！

認証エリア作成

フォームを作成する際に認証エリアを選択しなければならないので認証エリアを先に作成しますが。。。。。
作成の前にサイト管理から、サイトを作る必要がありました！
SPIRAL®ver2ではアプリ管理からDBの作成、サイト管理からページやブロック、認証エリアの作成をおこないます！(サイト作成をシステム設計書に記載するの忘れてた。。。)
気を取り直してサイト作成をおこないました！

認証エリアからレシピ管理マイエリアを作成しました！
作成するとなんと！認証エリアログインフォーム(login)とID・パスワード変更フォーム(update)、ログイン情報削除フォーム(delate)が自動的に作成されていました！ログイン情報削除フォームはシステム設計時には作成していませんでしたが、せっかくなので使ってみたいと思います！
※認証エリアに設置するページ設定は最後におこないます。

フォーム作成

ブロック作成から各フォームを作成していきます。
認証エリア作成時に認証エリアログインフォームとID・パスワード変更フォーム、ログイン情報削除フォームが自動作成されていたので、これらのフォームは表示名のみ変更しました！

▽SPIRAL ver1のトライアルはこちら！

レコードリスト・レコードアイテム作成

次にページに張り付ける一覧表や詳細ページ、レコード検索を作成します！
ブロック作成のレコードリストから一覧表を、レコードアイテムからリストの詳細ページ、レコード検索からレコードの検索ページを作成することができます。

検索ページを作成しようと思ったのですが、検索ページは検索ページ結果を表示させる「ページ」を先に作成する必要がありました。なので、該当ページ作成後に作成します。
※該当ページ作成後↓

フリーコンテンツ

フリーコンテンツを作成していきます。

レシピ一覧タイトルを例に、フリーコンテンツでは文字・絵文字の記入やフォームやページのリンクを挿入することができます。下記図の左側のようにマークアップ言語を習得していなくても、好みのレイアウトで記入することでWEBページで右側のように出力することができます！

ページ作成

最後に認証エリアに設置するページを作成します。
ページに作成したフォームや一覧表を設定することで、レシピ管理サイトの画面を作っていきます！
詳細設計時ではレシピ管理ページ、レシピ詳細ページ、メイン・おかず・デザートレシピ一覧のみを記載していましたが、フォームをページ内で使用する際は各フォーム専用のページが必要でした！したがって、下記画像ではフォーム分のページが追加されています。

作成したページ内に作成した、ブロックやページを設置していきます。
レシピ管理ページを例に、レシピ管理ページに作成したレシピ一覧タイトル、レシピ検索、レシピ一覧表を設置します。設置することでWEBページ上では下記図の右側のように表示することができます！

全てのページへの設定が完了すれば、完成です！
実際に動かしてみたいと思います！

動作検証

本当はURLから皆さんにも触っていただきたいのですが、URLに個人情報が載ってしまっているため触っていただくことができず。。。
なので、一部動作例を画像で紹介します。
〇topページ遷移
ログインページからログインすることでTOPページに遷移します。

Topページでは、レシピ登録や登録したレシピの詳細、また検索ができます！

〇レシピ登録
「レシピ登録はこちら」からレシピ登録フォームに遷移し、レシピを登録します。
※kewpieの帆手とサラダの基本レシピを参考に登録させていただきました。
▷ https://www.kewpie.co.jp/recipes/basicsalad/salad01/

今回登録したポテトサラダのレシピは、一覧に表示されるのでIDをクリックするとレシピ詳細を閲覧できます！

〇カテゴリ別の一覧表
TOPページの「デザートレシピ一覧表」をクリックするとカテゴリーがデザートで登録されているレシピのみの一覧表を表示できます。

このようにすべてのリンクとフォームが期待する動作をしてくれています！

最後に

今回はSPIRAL®ver2を用いたローコード開発でレシピ管理アプリを作成しました！
カテゴリごとに分けられるようにしたことや調理時間、人数の入力により、見やすく検索しやすいレシピ管理webアプリになったと思います！
一部システム設計書とは異なる部分がありましたが、基本的な設計は設計通りに開発できたと思います。開発時間は約6時間ぐらいかかり、ローコードでの開発により視覚的に作成することができたので、非常に簡単かつ比較的短時間でレシピ管理webアプリを作成することができました！はじめてのwebアプリ開発やすこしさわってみたいなど興味がある方はSPIRAL®でぜひ作成してみてください！
今後は時間があるときに、今回作成したレシピ管理アプリの拡張ができればいいなと考えております。
今回は使用しなかった、登録したDBのレコード処理を行うことができるトリガやメール配信などほかにもたくさんの機能があるため、webアプリ開発を通して実際に使っていけたらなと思っております。

私がインターンしているスパイラル株式会社は、ローコードプラットフォーム、SPIRAL ver.1のトライアルアカウントを無償提供しています。このアカウントの記事でも紹介するように、たくさんの機能がございます。
▶︎ フォーム
▶︎ 認証エリア
▶︎ ログイン
▶︎ メール送信
▶︎ カスタムプログラム
などの作成ができますので、ぜひ試してみてください!!

そして、今チームでトライアル登録者向けに、オンボーディングコンテンツを作成しています。SPIRAL ver.1にご興味のある方、ぜひこちらもご覧ください👇