ドロップダウンを使った入力フォームの作り方が分からないので誰か教えて!

ドロップダウンを使った入力フォームの作り方が分からないので誰か教えてもらえませんでしょうか?

当方はアプリ製作に関しまして知識が乏しくつまづいております。

ドロップダウンで選択した条件を入力フォームで反映し、その条件に合った先に進行することができる様な設定です。

ナンバリングで設定を構築できたらと考えていますが、どんな入力フォームを製作すれば良いのか困っています。

超簡単な事例でサンプルを作りました。これでドロップダウンを使った入力フォームの説明をします。

(アプリの内容)
ハンバーガーの注文アプリで、ドロップダウンが2つあり、ハンバーガーとドリンクをそれぞれ選びます。注文ボタンを押すと注文内容と合計金額がリストで出てくるという内容です。

ドロップダウンの使い方と数字との組み合わせ、合計値を計算するという内容が理解出来ると思います。

スクリーンショットを使った細かい説明は後でやります。アプリをとりあえず使ってみて下さい。機能が不足している部分がありますが、最初からそれを入れてしまうと複雑になり、理解が難しくなるのであえて簡単な内容にしてあります。これが理解出来たら次のステップに進もうと考えています。

1.開発画面(ホーム画面)

2.プレビュー画面
ハンバーガー02b

(アプリ)

ちょっと使いずらい箇所が何点か有るのですが、どこが使いづらいですか?どこをどうすればもっとよくなりますか?

1 Like

ハンバーガー注文アプリの作り方を画像を使って説明します。まずドロップダウンで表示する選択肢のデータベースを作ります。「ハンバーガー」と「ドリンク」という2つのデータベースを作りました。

1.「ハンバーガー」データベースを作る
DBの中身は「ハンバーガー種類」(テキスト型)と「ハンバーガー価格」(数字型)の2つの項目で構成されます。価格は後で計算するとき使うので必ず数字型でデータベースを作って下さい。

2.「ドリンク」データベースを作る
ハンバーガーDBと同様にドリンクDBも作ります。ドリンク種類(1~3)と計算用に「ドリンク価格」(1~3)で構成されています。

3.「合計」データベースを作る
選択されたハンバーガーとドリンクは「合計」DBにデータが転送されます。ここにはハンバーガー、ドリンクの種類、価格さらに合計金額のデータが保管されます。

4.ホーム画面を作る
ハンバーガーとドリンクを選択するドロップダウンをそれぞれ配置します。
ハンバーガー06

5.ハンバーガーを選択するドロップダウンの設定
ドロップダウンをマウスで選択すると青枠で囲まれ、右側に設定画面が表示されます。このドロップダウンと「ハンバーガー」データベースを紐づけます。

また、下方にある「ラベル」は「ハンバーガー種類」を選択して下さい。(ドロップダウンで表示したときの内容です。「ハンバーガー価格」を選択すると価格の数字が表示されるようになります)

6.ドリンクを選択するドロップダウンの設定
「データベースの選択」の中で「ドリンク」データベースを選んで紐づけて下さい。また下方のラベル部分は「ドリンク種類」を選択して下さい。(ドリンク価格ではなくて)

7.カスタムリストを配置する
注文内容を表示するためにカスタムリストを配置します。カスタムリストを選択すると青枠で囲まれます。この状態で「合計」データベースと紐づけます。(データベースの選択項目で「合計」を選択します)

8.カスタムリストに表示したい内容の個数分だけTextコンポーネントを配置する。
今回は6個の項目を表示したいのでTextコンポーネントを必要数追加します。(最初はTitleとsubTitleの2個しかないのであと4個追加します)

「ハンバーガー」という項目は選択されたハンバーガーの種類を表示する箇所です。「合計」DBの「ハンバーガー」からデータを引っ張ってきます。(インポートします)

9.「ドリンク」の表示設定
「ドリンク」は「合計」DBの「ドリンク」からデータを引っ張ってきます。

10.「合計」の表示設定
ここはたんなる表示だけなのでテキスト内に「合計」と入れて下さい。(データは引っ張ってきません)

11.「ハンバーガー価格」の設定
「ハンバーガー価格」部分には「合計」DBの「ハンバーガー価格」を引っ張ってきます。数字だけひ引っ張ってくるので分かり易いように「円」という文字を手入力して下さい。
Current 合計 > ハンバーガー価格 円

12.「ドリンク価格」の設定
「ドリンク価格」は「合計」DBの「ドリンク価格」からデータを持って来ます。
Current 合計 > ドリンク価格 円

13.「金額合計」欄の設定
「合計」DBの「合計金額」からデータを持って来ます。
Current 合計 > 合計金額 円

14.ボタンの設定
ボタンを押すとドロップダウンで選択されたハンバーガーとドリンクのデータが「合計」データベースに転送され、合計金額も計算されるように設定を行います。

処理の順序として以下のようになります
①「合計」DBでデータを飛ばす(合計作成)
②データが飛んだら、金額の合計値を「更新」(Update)で行います。
※合計の計算はデータベースに金額データが入った後に行われるので一度に処理をするのではなく、更新で2番目に処理を行うようになります。

15.「合計作成」(Create)の設定中身
ハンバーガーやドリンクの項目はドロップダウンで選択した項目を入力します。価格部分にはドロップダウンで選択した商品に紐づいている価格を入力します。
※ドロップダウンで選択した項目には「Selected」という表示が付いています

16.「合計金額」を「合計更新」(Update)で計算する
「ハンバーガー価格」と「ドリンク価格」を+して合計を求めます。(計算式を入れます)

こんな感じでアプリは出来るのですが、分かって頂けたでしょうか?もし分からない部分があったらその部分の番号を教えて下さい。分かるまで解説します。

このアプリはドロップダウンの解説だけに絞っていますのでまずい部分がいくつもあります。どこを修正したらいいか考えてみて下さい。

(修正が必要な個所の例)
1.ドロップダウンで商品を選ぶときに商品名だけ表示されて価格が分からない
・・・・値段を知らずに注文するのって不安ですよね。

2.誰が注文したのか分からない
・・・・ログイン機構があるのでそこから名前は引っ張ってくることが出来ます。

3.全員のデータが見えてしまう
・・・・自分だけのデータだけ見えるようにするにはカスタムリストにメールアドレスでフィルターをかける設定をします。

1 Like

詳細に解説方法や設定方法をご教授いただきありがとうございます。

こちらを参考に製作してみます。

ありがというございます。

ドロップダウンにて合計数を算出しそれを表示させたり、DBに反映をさせる所までは製作することができました。

7/2に改訂版として詳細に解説していただいた内容で作成をすることができました。

本当にありがとうございます。

その算出した数字を元に、指定したページに移動させる様なボタンの設定方法などはお分かりになりますでしょうか?

もしも良いアイディアがありましたらアドバイスいただきたいです。

数字を発生させ、その数字に関連した画面に遷移するようにするには以下の設定を行います。具体例で示すために以下のような簡単なアプリを考えました。

(アプリの内容)
ホームにあるボタンを押すと乱数1~5が発生し、その乱数がuserデータベースに設けた「乱数」という項目に入ります。(ボタンを押す度に数字は変わります。)
ホーム画面の他に遷移画面を5個用意し、(「画面1」~「画面5」という名前にします。)例えばボタンを押して3という数字が出たら、画面3に遷移します。

(仕組み)
ホーム画面のボタンを押すとまずは「画面1」に遷移するようにLink設定をします。画面1に遷移したら、画面2に遷移するように設定します。画面2に遷移したら画面3に遷移するように設定します。これを延々画面5まで行います。

これをやると画面1から画面5に自動的に遷移する動きが出来ます。但し、画面遷移の設定の時に条件付き設定を行います。つまり発生した乱数がその画面の数字以上だったら次の画面に遷移するという条件です。

乱数が3だったら、画面3で止まって欲しいわけです。前画面2で「乱数が3以上だったら画面3に遷移する」という条件を付けておきます」(画面3では乱数が4以上だったら画面4に遷移するという条件が付いています)こんな感じの条件を各画面に設定します。

(具体的な設定)
全体的な画面配置は以下のようになります。

1.userデータベースに「乱数」という項目を追加

2.ホーム画面にインプットとボタンを配置します
※インプットを設置するのは発生した乱数を表示するためです。

ボタンには「user更新(Update)」と「ページ移動」(画面遷移のLink)を設定します

3.「user更新(Update)」の設定内容
userデータベースの「乱数」にRAND関数で発生させた乱数(1~5の整数)を転送します。

4.「ページ移動」(画面遷移のLink)設定の内容
ボタンを押したら必ず「画面1」に飛ぶように設定します

5.ホーム画面の「インプット」の設定
発生した乱数をここで表示します。Logged in userデータベースの「乱数」からデータを引っ張って来ます。(Logged in user > 乱数)

6.「画面1」の設定
画面1に遷移したら乱数が2以上の場合に画面2に遷移するように設定します。画面の外枠をクリックすると青い枠が出てきます。この状態でClickFlowを設定して下さい。意味合い的には、「この画面に遷移したら、〇〇のアクションを起こす」ということです。

※乱数は必ずLogged in user の「乱数」から持って来て下さい。インプットにも同じ数字が格納されていますが、インプットだと条件設定で「~以上」、「~より大きい」等が選べなくなってしまいます。

7.「画面2」の設定
同じように画面の外枠をクリックして、青くした状態でClickFlowを設定します。
「条件により動作」部分で乱数が3以上だったら画面3に遷移するという内容を設定します。

8.「画面3」の設定
「条件により動作」部分で乱数が4以上だったら画面4に遷移するという内容を設定します。

9.「画面4」の設定
「条件により動作」部分で乱数が5以上だったら画面5に遷移するという内容を設定します。
(乱数が5だったら画面5に遷移するとやった方が自然かも・・・)

10.「画面5」の設定
ここが最終画面なのでここから次の画面に行くという設定は無いです。
但し、ボタンを設けてホーム画面に行けるようにしておいて下さい。

(アプリ例)

こんな感じで発生した数字をもとにその画面に遷移するアプリは作れます。ただ、画面の遷移の仕方は知らないと作れないと思います。

今回は数字を作るのに乱数(RAND関数)を使いましたが、これは説明するための例で使っただけで必ずしも必要なわけではありません。

これ以外にもいろいろ書きたいことありますが、あまり書くと混乱すると思いますのでこの辺で止めておきます。一応これが分かると、アプリの主要な部分の動きは作れると思います。分からない部分があったら遠慮なく質問して下さいね。

1 Like

お忙しい中ご回答いただきましてありがとうございます。

質問がございます。ClickFlowの条件項目の際に、条件設定の2段目を「等しい」とし、事前にこちらで設定した数値をインプットしておき、その数値に合致したら指定するページに移動する

そんな条件を1つのボタンに複数の条件を設定することは可能でしょうか?

ドロップダウンで50種類ほどのパターンが生じるとし、その50種類ほどの条件設定を1つのボタンに設定させることは可能なのでしょうか?

実際に製作をし動作確認をしてみようかと思います。

素晴らしい!!!やってみたら出来るねえ。自分もやってみるまでどうなんだろうと思っていましたが、これで行けるんだったら、こっちの方が素直かも知れませんね。(リンク先の画面の番号が分かっていたら直接行きたいですよね。)勉強になりました。

1 Like