こんにちは！ゆかゆかです。
今日はNoCodeツールのAdaloを使って、
今日はメニューアプリ開発をしてみます！
プロに注文しなくても、
個人でもこんな感じのメニューアプリを簡単に作れちゃいます。
少し慣れてくると、
検索窓をつけたり、画像メインのメニューにできたりもします。
さらには、タップすると詳細をポップアップできたり・・・
たくさん出来ることがありますが、
今日はシンプルなメニューアプリを紹介します。
ご参考になると嬉しいです〜
１．APPを新規作成
Adaloはパソコンに開発ツールをダウンロードする必要はないです。
ログインをすると、とりあえず新しいAppを作る流れになります。
BlankのAppを用意します。
２．メニューデータを用意
Database Collections でメニューデータを入れる場所を設定します。
今回はこんな感じで用意してみました。
「0 Records」をクリックするとデータの一覧・登録ができます。
こんな感じで、色々とメニューを登録してみました。
「+ ADDメニュー」をクリックするとメニューの登録画面が開きます。
データの登録方法はこんな感じで簡単です。
- 名前：メニュー名を入力
- ジャンル："食事"や"ドリンク"を入力
- 写真：商品写真を投稿
- 金額：金額を入力
メニューデータの準備ができたら、メニュー画面を作っていきましょう！
３．画面を用意
Homeの白い画面にメニューを表示する手順です。
- 画面左上の「＋」マークを選択
- 「ADD COMPONENT」を選択
- Simple List をクリックし、Homeに貼り付け
Simple List の表示設定します。
- What is this a list of? に「メニュー」（最初に作ったデータコレクション）を設定
- Custom Filter はお好みで。今回はジャンルがドリンクのメニューでフィルターする設定を入れました。
- Sorting もお好みです。今回は金額が安いメニュから順に並ぶ設定です。
続いて、メニューに表示する内容を設定していきます。
まずは、Title部分です。
ここはメニュー名を表示させています。
「T」をクリックすると、メニューデータの項目を選べます。
Subutitleに表示する項目を指定。
メニュー金額を表示します。
金額は数字で入っているので、「円」を入力し、最後に円が付くようにしました。
最後に、メニューのイメージを設定します。
Left Sectionを設定します。
- TypeをImageと設定
- ImageをCurrent メニュー＞写真 と設定
プレビュー
あっという間に設定ができたので、さっそくプレビューをしてみます。
こんな感じで、ドリンクのメニューができました！
ドリンク以外も表示させるよう、下に「食事」を追加しました。
メニューのフィルターも変更しています。
そうすると、ドリンクの下に食事が並びました。
▽ NoCodeツール Adalo 無料でかなり使えます！
まとめ
簡単にメニューアプリを作成する方法をご紹介しました。
よろしければ、さらに使いやすくする続きの記事もどうぞ
Adaloは無料版ですと、１つのデータは５０件までとなります。
自分で作ってみるととても楽しいので、試してみてください。
▶︎基本操作についてもご紹介しています
