ノーコード ラボ

No Code のツールやアプリについて紹介します

Bubble で作る「4択クイズアプリ」3:Custom state の使い方

今回は「4択クイズアプリ」を通して、Bubble の 「Custom state」について、ご紹介したいと思います。

関連記事

1. Custom state とは

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

f:id:yksmt:20190808154718p:plain

2. Custom state の作成方法

2-1. Custom state を新規作成したい場合は、「Workflow」タブから作成します。

2-2. 「Click here to add an event...」をクリックし、Custom state を設定したいイベントを作成します。ここでは例として「General」から「Page is loaded」イベントを選択します。

f:id:yksmt:20190816104707p:plain

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

f:id:yksmt:20190816105107p:plain

2-4. 「Set state」の設定画面で、「Custom state」から「Create a new custom state...」を選択します。

f:id:yksmt:20190816110209p:plain

2-5. 「Create a new state」で「State name」と「State type」を入力し、「CREATE」ボタンをクリックします。ここでは、名前を「choice button state」、タイプを「yes / no」で選択しました。

f:id:yksmt:20190816110426p:plain

2-6. これで「choice button state」という名前の、「yes」または「no」の値を保持する Custom state ができました。

3. Custom state の使い方

では、実際に4択クイズアプリで Custom state の設定をしていきましょう。4択クイズアプリでは、以下の4つの Custom state を使用しています。

  1. choice button state:選択肢ボタンが有効(クリックできる)か無効(クリックできない)かを保持する
  2. QuestionNo:今、何問目かを保持する
  3. Correct Answer:正解した問題数を保持する
  4. Score:正解した問題の合計得点を保持する

Custom state を設定していく前に、まずは準備として、残りのエレメントである「次の問題へボタン」、「残りn問テキスト」、「成績表」グループを配置します。

3.1準備:残りのエレメント配置

「Group Body」の下の方に Textエレメントを配置し、名前を「残りn問テキスト」とし、その横に Buttonエレメント「次の問題へボタン」を配置します。また最終問題で表示する Buttonエレメントを「次の問題へボタン」と重ねて準備しておきます。名前を「成績表ボタン」とし、テキストを「結果発表!」としておきましょう。

f:id:yksmt:20190816153550p:plain

次に、「成績表」グループを配置していきます。 「Group Score」を作成し、背景色を薄い水色にしておきましょう。ラベルとして表示するTextエレメントを配置していきます。Custom state から取得する必要がある、「スコアテキスト」、「正解問題数テキスト」、「不正解問題数テキスト」もそれぞれ配置しておきましょう。これで、準備が整いました。

f:id:yksmt:20190816153741p:plain

3.2Custom state の設定方法

では、実際に Custom state を設定してみましょう。

1. choice button state

この Custom state は、選択肢ボタンの有効、無効状態を管理します。

クイズアプリがロードされた時は、1問目が表示され、選択肢ボタンもクリックできる有効状態にあります。 4つの選択肢ボタンのいずれかをクリックし、解答を選ぶと正解もしくは、不正解の〇×が表示されます。この〇×が表示され、次の問題へボタンをクリックするまでの間は、選択肢ボタンをクリック出来ないように無効状態とします。 この状態を選択肢ボタンに以下の手順でバインドしていきましょう。

まずは、ページロード時のワークフローを設定します。項番「2. Custom state の作成方法」で追加した「Page is loaded」の「Set state choice button state of index」を利用します。「Set state」の設定画面で、「Element」を「index」を選択、「Custom state」から「choice button state」を選択します。「Value」を「yes」で設定しましょう。

f:id:yksmt:20190816143422p:plain

次に、選択肢ボタンがクリックされた時に無効化したいので、クリック時のワークフローを追加しましょう。「Workflow」タブからも作成できますが、今回は「Design」タブから追加してみましょう。「Design」タブで、選択肢Aボタンを選び、「Appearance」の「Start/Edit workflow」をクリックし、イベントを追加します。

f:id:yksmt:20190816144152p:plain

先ほどと同じ要領で「Click here to add an action...」をクリック、「Element Actions」から「All elements」の「Set state」を選択。「Element」で「index」を選択、「Custom state」から「choice button state」を選択し、無効化したいので、「Value」は「no」を選択します。選択肢BからDボタンにも同様の設定をしてくださいね。

f:id:yksmt:20190816144607p:plain

あとは、次の問題へボタンがクリックされた時に、また有効化に戻しておきましょう。「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」を選択します。

f:id:yksmt:20190816154802p:plain

これで、ページロード時は「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」の状態を選択肢ボタンにバインドできました。

f:id:yksmt:20190816145757p:plain

2. QuestionNo

QuestionNo は、現在何問目かを管理します。

問題が進むにつれ、あと残り何問であるかという情報を取得するために使用します。「2. Custom state の作成方法」を参考に、「QuestionNo」という名前のタイプが「number」である Custom state を作成し、Workflowタブの「When Page is loaded」で 「QuestionNo」の Value を「1」に設定します。 次の問題へボタンがクリックされたワークフローに、「QuestionNo」が 1ずつ加算されるように設定します。

f:id:yksmt:20190819140708p:plain

では、この Custom state を使用して、「残りn問テキスト」の表示をしていきましょう。 残りの問題数は、「クイズのデータ取得件数 - QuestionNo」で計算しますので、「Appearance」で「残り RepeatingGroup Quiz's List of Quizs:count - index's QuestionNo 問」と指定すればOKです。

f:id:yksmt:20190819162245p:plain

3. その他 Custom state

残りの Custom state である「Correct Answer」「Score」もそれぞれ「When Page is loaded」で初期化し、選択肢ボタンがクリックされたタイミングで値を加算していくように設定しましょう。問題に正解した場合に加算されるよう、「Only when」で「Current cell's Quiz's answer is "A"」の条件を指定します。

f:id:yksmt:20190819163957p:plain

では、この Custom state を使用して、成績表にスコアを表示していきましょう。 スコアの「Appearance」では「index's Score 点」、正解の問題数は「index's Correct Answer」 不正解の問題数は「クイズデータの取得件数 - 正解の問題数」で計算するので、「RepeatingGroup Quiz's List of Quizs:count - index's Correct Answer」と設定します。

f:id:yksmt:20190819162903p:plain

まとめ

以上で Custom state の設定ができました。Custom state は Bubble の重要な機能ですので、しっかりと押さえておくと良いですね。では、4択クイズアプリ最終回となる次回は残りのワークフローの設定について解説します。どうぞお楽しみに!