ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble で作る4択クイズアプリ(新レスポンシブ版)3:ワークフローの設定と Custom states の使い方

この記事は 【 Bubble で作る4択クイズアプリ(新レスポンシブ版) 】の第3回です。 本シリーズが初めての方は、以下の記事でコンテンツの説明をしていますので、ご確認いただければと思います。

blog.nocodelab.jp

前回の記事では、フロントエンド側となるアプリ画面を作成しました。今回は、アプリのプログラム部分となるワークフローの設定と Bubble で何かと利用することが多い Custom states の使い方についてです!

1. Custom states とは

Bubble の「Custom states」とは、自分の目的に応じた状態を保存できる「変数」のようなものです。 例えば4択クイズアプリでは、問題をクリア後に成績表(以下画面イメージの一番右側)を表示しますが、クイズ中解答者がどの問題に正解したか、スコアは何点かといった情報を保存しておく必要があります。そこで、状態や値を一時的に保存するのに便利なのが「Custom states」です。

なお、Custom states はページがリフレッシュされたタイミングで、保存した内容は一旦クリアされてしまいますので、持続して保存しておきたい場合はデータベースに登録してしまうなど、別の方法が必要となります。

2. Custom states の作成方法

Custom state を作成するには、「Workflow」タブで「Set state」から作成する方法と、「Design」タブのプロパティウィンドウにある「inspector」から作成する方法があります。

2.1.「Workflow」タブから作成する

「Click here to add an event...」をクリックし、Custom state を設定したいイベントを作成します。

「Click here to add an action...」をクリックし、「Element Actions」から「All elements」の「Set state」を選択します。

「Set state」の設定画面で、「Custom state」を選択すると、すでに作成されている Custom state がある場合は、ドロップダウンで一覧が表示されます。「Create a new custom state...」を選択すると、新しい Custom state を作成することができます。

ただし、この方法の場合、Custom state の Default value を設定することができないため、デフォルト値を設定したい場合は、次項の「inspector」から作成するようにします。

2.2.「inspector」から作成する

inspector」とは、エレメントに設定されている Custom states や、その他イベント、アクションなどの情報をまとめて確認することができる機能です。「inspector」は、エレメントのプロパティ画面右上にある 「iマーク」アイコンから表示させることができます。

追加したいエレメントを選択し(ここでは index ページを選択しています)、「Add a new custom state」をクリックすることでも、Custom state を追加することができます。 また、Custom state 名の編集や、型(Type)や Default value などもここで設定することが可能です。

2.3. Custom state の作成とデフォルト値の設定

では、実際に4択クイズアプリで使用する Custom states の作成していきます。4択クイズアプリでは、以下の4つの Custom states を使用しています。

No 名前 詳細 デフォルト値
1 Correct Answer 正解した問題数を保持する number 0
2 Current Judgment 正解の場合は yes、不正解の場合は no yes/no なし
3 Current Quiz 現在参照中の問題 Quiz なし
4 Total Point 正解した問題の合計得点を保持する number 0

項2.2 にあるように「inspector」を使用して、上記の Custom state を Page エレメントである「index 」に作成し、デフォルト値も合わせて設定しておきましょう。

Custom states は画面に配置している Text や Button などにも設定できますが、探しにくくなるため、特別な理由がない場合は特に、どこに設定したか迷子にならないよう、できるだけ自分が分かりやすい場所にまとめて設定しておくことをおすすめします。

2.4. Custom states の値を画面に反映

では、次に作成した Custom states の値を画面に反映させておきましょう。Custom states を呼び出すときは「設定したエレメント's Custom state」とするので、例えば Correct Answer を呼び出す場合は「index's Correct Answer」という風に指定することになります。

まずは、正誤判定の 〇× アイコンです。

2.4.1. 正誤判定ポップアップ

正誤判定は Custom states の「Current Judgment」に「yes/no」型で保存します。〇× アイコンは非表示設定にしていますので、 Conditional を使って条件に一致した場合のみ表示させる設定を行います。

「〇」アイコンを選択し「+Define another condition」ボタンをクリックして、When に「index's Current Judgment is "yes"」と設定します。「Select a property to change when true」から「This element is visible」を選択して、チェックを「オン」にします。これで、Current Judgment が yes の場合は、「〇」アイコンが表示されるようになりました。

次に「×」アイコンです。Conditional はコピーすることができるので、こちらは「〇」アイコンの Conditional をコピーして条件を修正します。Conditional 上で右クリックでメニューを表示し「Copy condition」を選択します。

次に「×」アイコンの Conditional に「Paste condition」して、条件を「index's Current Judgment is "no"」に修正しておきます。

次に仮に登録していた「答え」テキストに、Custom state の「Current Quiz」に保存している Quiz type の Explanation を表示させます。「答え」を削除して Insert dynamic data で「index's Current Quiz's Explanation」とします。

2.4.2. スコア表

次にスコアを表示するポップアップを設定してきます。

まずは、仮に「100点」と入力しておいたテキストを、得点を保存している Custom state である「Total Point」に「点」という文字列を加えて設定したいので「index's Total Point 点」とします。

正解の問題数は「index's Correct Answer 問」とします。

不正解の問題数は、全問題数から正解の問題数を引いた数になるので「RepeatingGroup Quiz's List of Quizs:count - index's Correct Answer 問」とします。

以上で、Custom states の準備ができました。では、次に Bubble のプログラム部分にあたるワークフローを作成していきましょう。

3. Bubble の Workflow タブについて

まずは Bubble の初学者の方向けに「Workflow」タブについて、簡単にまとめておきますので、ご参考ください。

4. ワークフローの設定

4.1. アプリの流れ

では、4択クイズアプリの一連の動作を改めて確認しておきたいと思います。

アプリをロードしたら、

①1問目の問題と4つの選択肢ボタン、残りの問題数が表示される
② ユーザーは4つの選択肢のうち、どれか答えを1つ選んでボタンクリックで解答する
③ 解答が正解の場合は「〇」を、不正解の場合は「×」がポップアップで表示される
④「次の問題へ」ボタンをクリックしたらポップアップを閉じて次の問題に進む
⑤ 全問解答後「結果発表!」ボタンをクリックしたらスコアがポップアップで表示される
⑥「はじめから」ボタンをクリックしたら、スコアを閉じて1問目に戻る

以上がアプリの流れになります。 ①にある部分は、前回までの設定でできていますので、ここでは②にある「選択肢ボタンを選んでクリックする」ワークフローから作成していきたいと思います。

4.2. 選択肢ボタンクリック

クリックのイベントは、Button のプロパティウィンドウにある「Start/Edit workflow」からも作成できますし、もしくは、直接「Workflow」タブの「Click here to add an event...」から「Elements」の「An element is clicked」でも作成できます。

なお、ここでは、分かりやすいように Button エレメントの名前をそれぞれ選択肢の解答に合わせて「Button A」から「Button B」「Button C」「Button D」に変更しています。

②にあたる「Button A」のクリックイベントを作成できました。

次に Button A がクリックされたら、Custom state の Current Quiz を、現在参照中の Quiz でセットします。「Click here to add an action...」から「Element Actions」で「Set state」を選択し、Element で「index」、Custom state で「Current Quiz」を選択して、Value を「Parent group's Quiz」とします。

なお Value に設定した「Parent group's Quiz」の Parent とは、現在ワークフローを設定しているエレメント(Button A)の親という意味なので、Group Choices のことを指しています。

次に、③の選択した解答が正解か不正解かを判定して、その結果を Custom state の「Current Judgment」にセットしていきます。Step2 に「Set state」アクションを追加し、Element を「index」、Custom state を「Current Judgment」とします。Value には Do a search for で「Answer」Type を「Quiz = index's Current Quiz」で検索した1件目の Choices フィールドを参照したいので、「:first item's Choices 」として、これが「is A」であるかどうかという設定をします。

「Current Judgment」は yes / no で格納されるので、「Search for Answer's:first item's Choices is A」だった場合は、 yes(つまりは正解)が、no の場合は不正解という判定を格納することができるようになりました。

次に Step3 で「Click here to add an action...」から「Element Actions」で「Animate」を選択し、Element を「Popup Judgment」、Animation を「Transition FadeIn」にします。

次に Step4 で、正解だった場合は Custom state の「Correct Answer」と「Total Point」を加算しておきましょう。「Set state」アクションを追加して Only when に「index's Current Judgment is "yes"」と条件を登録し、「Correct Answer」の Value を「index's Correct Answer + 1」とします。「+Set another state」で「Total Point」を追加して、Value を「index's Total Point + index's Current Quiz's Points」としておきます。

なお、細かい部分ですが、Setp1 や Step2 の Set state を Step4 の時のように「+Set another state」で一つにまとめていないのは、Step2 の検索条件に Step1 で Set state した値を使用する為で、同時に Set state してしまうと意図した動作をしない為、明示的に分けて設定しています。

以上で、③の『解答が正解の場合は「〇」を、不正解の場合は「×」がポップアップで表示される』部分のワークフローが作成できました。

4.3.「次の問題へ」ボタンクリック

では次に、正誤判定ポップアップの「次の問題へ」ボタンをクリックした場合のワークフローを作成していきます。

エレメントを選択して「Start/Edit workflow」からクリックイベントを作成します。

Step1 では、先程選択肢ボタンをクリックした際に Set state した Custom state の「Current Quiz」と「Current Judgment」の Value をクリアして Set state しておきます。

Step2 でポップアップを閉じるように「Element Actions」の「Animate」を選択し、Element を「Popup Judgment」、Animation を「Transition FadeOut」にします。

Step3 で次の問題が表示されるように「Element Actions」の「Repeating Group」から「Show next」を選択します。Element では「RepeatingGroup Quiz」を選択しておきましょう。

以上で、④の「次の問題へ」ボタンをクリックしたらポップアップを閉じて次の問題に進むようになりました。必要があれば、一旦 Preview で確認してみましょう。

4.4.「結果発表!」ボタンクリック

では、次に⑤の全問解答後「結果発表!」ボタンをクリックしたらスコアがポップアップで表示される部分を作成していきます。

まずは、最終問題になった場合、「次の問題へ」ボタンが「結果発表!」ボタンに変更されるように、「次の問題へ」ボタンの Conditional を設定します。

「次の問題へ」ボタンを選択し、「+ Define another condition」で Conditional を追加して、When を「RepeatingGroup Quiz is on the last page」とします。次に「Select a property to change when true」で「Text」を選び、値を「結果発表!」としておきます。これで最終問題の場合は「結果発表!」に変更されるように Conditional の設定ができました。

次にワークフローを作成していきます。ワークフローでは、最終問題の場合にのみ Popup Result が表示されるようにするため、呼び出されるイベント自体を別で設定してきます。まずは、すでに作成している「Button Judgment」のクリックイベントを修正します。

クリックイベントを選択して「Only when」に「RepeatingGroup Quiz is on the last page is "no"」として、「最終問題でない場合にのみ」という条件を追加します。

次に「最終問題の場合」のクリックイベントを新たに作成します。条件は「RepeatingGroup Quiz is on the last page is "yes"」となるように設定しましょう。

アクションを追加していきます。Step1 で「Popup Judgment」を「Animate」で「Transition FadeOut」しておきます。

次に Step2 で今度は「Popup Result」を「Animate」で「Transition FadeIn」させておきます。

以上で、⑤のイベントが作成できました。

4.5.「はじめから」ボタンクリック

では、最後のイベントとなる⑥の「はじめから」ボタンをクリックしたら、スコアを閉じて1問目に戻る部分を作成しておきます。

「はじめから」ボタンのクリックイベントを作成します。

次に Step1 でページをリフレッシュされるように「Navigation」の「Refresh the page」を選択します。ページをリフレッシュすることで Custom states の値がすべてクリアされることになります。

今回はここまでです。お疲れさまでした!

現在は選択肢ボタンのクリックについては「Button A」しか設定していない為、「Button B」「Button C」「Button D」については、クリックしてもイベントは発生しません。

これらのボタンは「Button A」の内容をコピーして必要な部分を書き換えて設定することも可能ですが、共通のアクション部分をうまく利用することができますので、次回、その方法についてご紹介したいと思います!

次回

ということで、次回は Custom Event についてです!残りの選択肢ボタンをクリックする部分を Custom Event を使用して設定していきたいと思います。 では、ここまでお読みいただきありがとうございました!

コンテンツ

0:Bubble で作る4択クイズアプリ(新レスポンシブ版)

1:データベースと Option sets の作成

2:ページの作成( エレメントの配置と設定)

3:ワークフローの設定と Custom states の使い方

4:Custom event の使い方

※ コンテンツが追加されるとリンクされるようになります。今しばらくお待ちください😌