今回は「4択クイズアプリ」を通して、Bubble の 「Custom state」について、ご紹介したいと思います。
2020/03/23
Bubble の inspector 機能を使用して「Custom state」の作成する方法について追加しました。また、Page Load 時に行っていた「Custom state」の初期設定を、同じく inspector 機能を使用して設定するように 記事を一部修正しました。
1. Custom state とは
Bubble の「Custom state」は 自分の目的に応じた状態を保存できる変数のようなものです。 例えば4択クイズアプリでは、問題をクリア後に成績表（以下画面イメージの一番右側）を表示しますが、クイズ中解答者がどの問題に正解したか、スコアは何点かといった情報を保存しておく必要があります。そこで、状態や値を保存するのに利用するのが「Custom state」です。
2. Custom state の作成方法
Custom state を作成するには、「Workflow」タブから作成する方法と、「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」から「Create a new custom state...」を選択します。
「Create a new state」で「State name」と「State type」を入力し、「CREATE」ボタンをクリックします。ここでは、名前を「choice button state」、タイプを「yes / no」で選択しました。
これで「choice button state」という名前の、「yes」または「no」の値を保持する Custom state ができました。
2.2 「inspector」から作成する（2020/03/23追記）
「inspector」とは、エレメントに設定されている Custom state や、その他イベント、アクションなどの情報をまとめて確認することができる機能です。「inspector」は、エレメントのプロパティ画面右上にある 「iマーク」アイコンから表示させることができます。
追加したいエレメントを選択し（ここでは index ページを選択しています）、「Add a new custom state」をクリックすることでも、Custom state を追加することができます。 また、Custom state 名の編集や、型（Type）やデフォルト値などもここで設定することが可能です。
2.3 Custom state の作成とデフォルト値の設定
では、実際に4択クイズアプリで使用する Custom state の作成していきます。4択クイズアプリでは、以下の4つの Custom state を使用しています。
| No | 名前 | 詳細 | 型 | デフォルト値 |
|---|---|---|---|---|
| 1 | choice button state | 選択肢ボタンが有効（クリックできる）か無効（クリックできない）かを保持する | yes/no | はい |
| 2 | QuestionNo | 今、何問目かを保持する | number | 1 |
| 3 | Correct Answer | 正解した問題数を保持する | number | 0 |
| 4 | Score | 正解した問題の合計得点を保持する | number | 0 |
項2.2 にあるように「inspector」を使用して、上記の Custom state を index に作成し、デフォルト値も合わせて設定しておきましょう。
3. Custom state の使い方
まずは準備として、残りのエレメントである「次の問題へボタン」、「残りｎ問テキスト」、「成績表」グループを配置します。
3.1 準備：残りのエレメント配置
「Group Body」の下の方に Textエレメントを配置し、名前を「残りｎ問テキスト」とし、その横に Buttonエレメント「次の問題へボタン」を配置します。また最終問題で表示する Buttonエレメントを「次の問題へボタン」と重ねて準備しておきます。名前を「成績表ボタン」とし、テキストを「結果発表！」としておきましょう。
次に、「成績表」グループを配置していきます。 「Group Score」を作成し、背景色を薄い水色にしておきましょう。ラベルとして表示するTextエレメントを配置していきます。Custom state から取得する必要がある、「スコアテキスト」、「正解問題数テキスト」、「不正解問題数テキスト」もそれぞれ配置しておきましょう。これで、準備が整いました。
3.2 Custom state の設定方法
では、実際に Custom state を設定してみましょう。
3.2.1. choice button state
この Custom state は、選択肢ボタンの有効、無効状態を管理します。
クイズアプリがロードされた時は、１問目が表示され、選択肢ボタンもクリックできる有効状態にあります。 4つの選択肢ボタンのいずれかをクリックし、解答を選ぶと正解もしくは、不正解の〇×が表示されます。この〇×が表示され、次の問題へボタンをクリックするまでの間は、選択肢ボタンをクリック出来ないように無効状態とします。
デフォルト値を設定しているので、ロード時は有効状態ですが、選択肢ボタンがクリックされた時に無効化したいので、クリック時のワークフローを追加します。「Workflow」タブからも作成できますが、今回は「Design」タブから追加してみましょう。「Design」タブで、選択肢Aボタンを選び、「Appearance」の「Start/Edit workflow」をクリックし、イベントを追加します。
先ほどと同じ要領で「Click here to add an action...」をクリック、「Element Actions」から「All elements」の「Set state」を選択。「Element」で「index」を選択、「Custom state」から「choice button state」を選択し、無効化したいので、「Value」は「no」を選択します。以下、画面キャプチャは選択肢Aボタンのものですが、選択肢BからDボタンにも同様の設定をしてくださいね。
あとは、次の問題へボタンがクリックされた時に、また有効化に戻しておきましょう。「Design」タブで、次の問題へボタンを選び、「Appearance」の「Start/Edit workflow」をクリックし、イベントを追加します。「Click here to add an action...」→「Element Actions」→「All elements」→「Set state」を選択。「Element」で「index」を選択、「Custom state」から「choice button state」を選択し、有効化に戻したいので、「Value」は「yes」を選択します。
これで、ページロード時は「yes」、選択肢ボタンがクリックされた時は「no」、問題が次に進んだ時に「yes」に戻すという状態を保持する「choice button state」が設定できました。
では次に、この状態を選択肢ボタンへバインドしましょう。
「Design」タブで、選択肢ボタンを選び、「Conditional」で「Define another conditon」をクリックし、新しいコンディションを追加します。「When」で「index's choice button state is "no"」とし、「Select a property to change when true」で「This element isn't clickable」を選びチェックを入れます。これで、「choice button state」の状態を選択肢ボタンにバインドできました。
3.2.2. QuestionNo
QuestionNo は、現在何問目かを管理します。
問題が進むにつれ、あと残り何問であるかという情報を取得するために使用します。 次の問題へボタンがクリックされたワークフローに、「QuestionNo」が 1ずつ加算されるように設定します。
では、この Custom state を使用して、「残りｎ問テキスト」の表示をしていきましょう。 残りの問題数は、「クイズのデータ取得件数 － QuestionNo」で計算しますので、「Appearance」で「残り RepeatingGroup Quiz's List of Quizs:count - index's QuestionNo 問」と指定すればOKです。
3.2.3. その他 Custom state
残りの Custom state である「Correct Answer」「Score」も選択肢ボタンがクリックされたタイミングで値を加算していくように設定しましょう。問題に正解した場合に加算されるよう、「Only when」で「Current cell's Quiz's answer is "A"」の条件を指定します。
では、この Custom state を使用して、成績表にスコアを表示していきましょう。 スコアの「Appearance」では「index's Score 点」、正解の問題数は「index's Correct Answer」 不正解の問題数は「クイズデータの取得件数 - 正解の問題数」で計算するので、「RepeatingGroup Quiz's List of Quizs:count - index's Correct Answer」と設定します。
まとめ
以上で Custom state の設定ができました。Custom state は Bubble の重要な機能ですので、しっかりと押さえておくと良いですね。では、4択クイズアプリ最終回となる次回は残りのワークフローの設定について解説します。どうぞお楽しみに！
