Bubble で作る４択クイズアプリ（新レスポンシブ版）３：ワークフローの設定と Custom states の使い方

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

blog.nocodelab.jp

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

1. Custom states とは
2. Custom states の作成方法
3. Bubble の Workflow タブについて
4. ワークフローの設定
次回
コンテンツ

1. Custom states とは

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

では、実際に４択クイズアプリで使用する Custom states の作成していきます。４択クイズアプリでは、以下の４つの 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. アプリの流れ

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

アプリをロードしたら、

①１問目の問題と４つの選択肢ボタン、残りの問題数が表示される
② ユーザーは４つの選択肢のうち、どれか答えを１つ選んでボタンクリックで解答する
③ 解答が正解の場合は「〇」を、不正解の場合は「×」がポップアップで表示される
④「次の問題へ」ボタンをクリックしたらポップアップを閉じて次の問題に進む
⑤ 全問解答後「結果発表！」ボタンをクリックしたらスコアがポップアップで表示される
⑥「はじめから」ボタンをクリックしたら、スコアを閉じて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 の設定ができました。