Bubble で作る４択クイズアプリ（新レスポンシブ版）１：データベースと Option sets の作成

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

blog.nocodelab.jp

では、早速はじめていきましょう！前回の記事で、アプリの枠組みが準備できているかと思いますので、今回はデータベースを作成するところから始めたいと思います。

1. Bubble の Data タブについて
2. データベースの作成
- 2.1. テーブル（Data types）の構成
  - Quiz Type （クイズ問題テーブル）
  - Answer Type （解答テーブル）
- 2.2. テーブル（Data types）の作成手順
3. Option sets の作成
4. クイズデータの登録
- 4.1. Quiz type
- 4.1. Answer type
次回
コンテンツ

1. Bubble の Data タブについて

まずは、はじめて Bubble を触るという方向けに、改めて Bubble の「Data」タブについて簡単にまとめておきます。既知の方は、次項に読み飛ばししてください。

1.1. Data types タブ

Bubble ではデータベースの作成、登録されたデータの確認、その他アップロードしたファイルなどについては「Data」タブで管理します。そして、この「Data」タブ内にある「Data types」タブが、所謂データベースのテーブルを定義する場所で、アプリ作成時には「User」テーブル（User type）がデフォルトで作成された状態となっています。

1.2. Privacy タブ

「Data types」の次にある「Privacy」タブは、各テーブル（Data types）のデータに対して、誰が見れるのか？といったルールを設定する場所です。Bubble ではルールが設定されていないデータに関しては、基本的に誰でも閲覧可能なデータとして取り扱われますので、必要に合わせて「Privacy」ルールを設定するようにしましょう。

Privacy については、過去にも取り上げた記事がありますので、併せてご参考ください。

blog.nocodelab.jp

1.3. App data タブ

「App data」タブは、各テーブルに登録されている、実際のデータの中身を確認することができます。

「New view」ボタンから表示するフィールドデータを選択したり、条件を絞り込んだビューを作成することができます。ただし、ここで言うビューとは単なる開発者が視認性を高めるだけのものであって、SQL でいうところの VIEW とは異なりますので、SQL に馴染みのある方はご注意ください。

また同様に「Primary fields」ボタンから、各 Data types の表示する識別フィールドを変更することができます。例えば、User type では email フィールドがデフォルトの Primary fields として登録されています。User type 以外は通常 unique id というフィールドがデフォルトとなります。こちらも SQL でいうところの PK（Primary kye）のことではなく、あくまで表示上のフィールドとなっていますのでご注意ください。

1.4. Option sets タブ

「Option sets」タブでは、アプリ全体で使える静的なリストを登録することができます。Option sets については、項「3. Option sets の作成」で詳しく解説します。

1.5. File manager タブ

「File manager」タブはアップロードされたファイルを一覧で確認できます。「Upload」ボタンから、直接アップロードすることが可能になり、使い勝手も改善されてきました。

今回は、この内の「Data types」と「Option sets」を設定していきます！

2. データベースの作成

2.1. テーブル（Data types）の構成

今回の４択クイズアプリでは、クイズの問題や選択肢、解答をデータベースに登録して使用します。具体的には「Quiz」と「Answer」いう名前の、２つのテーブル（Data type）を作成していきます。定義するフィールドは以下の通りです。

Quiz Type （クイズ問題テーブル）

項目No	フィールド名	型	詳細
1	No	number	問題番号
2	Question	text	問題
3	ChoicesA	text	選択肢A
4	ChoicesB	text	選択肢B
5	ChoicesC	text	選択肢C
6	ChoicesD	text	選択肢D
7	Explanation	text	説明
8	Points	number	得点

Answer Type （解答テーブル）

項目No	フィールド名	型	詳細
1	Quiz	Quiz	出題された Quiz type
2	Answer	Choices	解答（選択された Option sets の値）

なお、クイズ問題と解答を別のテーブルに分けているのは、Bubble のデバッグモードを使用した場合の対応です。簡単に解答が見えてしまう状態を避けるために分割しています。

また、デバッグモードについては、以下の記事で解説していますので、よろしければこちらも併せてご参考ください。

blog.nocodelab.jp

2.2. テーブル（Data types）の作成手順

では、データベースを作成してきましょう。「Data types」タブにある「New type」欄に作成するテーブル名（ここでは Quiz）を入力し、「Make this data type private by default」のチェックをオフにして「Create」ボタンをクリックします。

今回は誰でも閲覧可能なデータとするため、Quiz type に対して Privacy ルールは設定しませんが、閲覧権限を付与したい場合は、「Make this data type private by default」のチェックをオンにしておき「Privacy」タブで権限を編集していくようにします。

「Custom data types」で「Quiz」を選択し、「Create a new field」ボタンをクリックして、上の表にある８つのフィールドを登録していきます。

以上で、１つめのテーブル「Quiz」が作成できました。「Answer」については、次項の Option sets を作成後に設定します。

3. Option sets の作成

では Option sets を作成していきましょう。

3.1. Option sets とは？

Option sets はアプリ内で使用できる静的なリストを作成することができます。すでに値が決まっているような場合などに最適で、複数の属性を保持することができるため、例えば下図のサンプルのように、色の名前（ex.オレンジ）と一緒にカラーコード（ex. #ffa500）もオプションの属性として管理するといったことができます。

また、Option sets を使用するメリットとしては、値が固定されるため、データ登録時などに誤入力を防止する効果があったり、後でオプションの数が増えるといった変更にも柔軟に対応することができます。

ただし、Option sets は Data types のように Privacy（ルール）を設定することができないため、機密情報などのデータは登録しないようにしましょう。重要な機密データを保存する必要がある場合は、Data types で管理することを検討してください。

なお、今回のアプリは４択クイズですので「Choices」という名前の Option sets で、A から D までの４つ選択肢を固定で持たせるようにします。この Option sets は、正解の解答がどれであるかと、ユーザーによってどの選択肢が選ばれたかを判断する際に使用します。

3.2. Option sets の作成手順

では実際に Option sets を作成していきましょう。「Option sets」タブにある「New option set」欄に作成するオプション（ここでは Choices）を入力して「Create」ボタンをクリックします。

次に「New option」に作成したいオプションの値（ここでは A、B、C、D の４つ）を入力して、それぞれで「Create」ボタンをクリックして作成していきます。なお、ここでは登録しませんが、もし初期属性値（Built-in attribute）である「Display」以外の属性を新たに追加したい場合は、「Create a new attribute」ボタンから作成することができます。

これで４つのオプションを持った「Choices」という名前の Option sets が作成できました。この「Choices」は、Data types の Field type としても使用することができます。

3.3. Option sets をフィールドの型として使う

作成した Option sets は、Data types（テーブル）のフィールドの型（Field type）としても使用することができます。また、Field type として使用できるものでいえば、Option sets に限らず Data types も同様です。つまりは、Option sets や Data types 自体が「型」として取り扱われるという意味を持っています。

例えば、アプリを作成した際に自動で作成される User type（User テーブル）も、テーブルの Field type として指定することができます。User type ど同じく、今回作成した Quiz type もしかりです。これは、Bubble でとても意味を持つ概念となっています。

では実際に設定していきましょう。「Data types」タブに戻り、「New type」に「Answer」と入力して「Create」ボタンをクリックします。

次に、「Create a new field」ボタンをクリックして、「Field name」を Choices として「Field type」には、先ほど作成した Option sets の「Choices」が表示されるようになっているので「Choices」を選択します。

これで、Option sets の「Choices」を Field type とした「Choices」フィールドを作成することができました。同様に、Field type を「Quiz」とした「Quiz」フィールドを作成します。

4. クイズデータの登録

4.1. Quiz type

では、次に「Quiz」テーブルの中身を作成していきます。もし Bubble で有料プランをご利用されている場合は、CSVをアップロードすることができますが、Free プランを使用している場合は、以下の手順で手入力していきます。

「App data」タブを選択して、「New entry」ボタンをクリックします。

「Create a new existing database entry」で登録したいクイズデータを入力して「CREATE」ボタンをクリックします。

ここでは、サンプルとして以下10件のデータを登録していますが、動作確認程度であれば、登録件数は２件以上あれば問題ありません。できれば３問以上あった方が、動作確認がしやすいかなといった感じです。

ChoicesA,ChoicesB,ChoicesC,ChoicesD,Explanation,No,Points,Question
ホットケーキ,チーズケーキ,ショートケーキ,モンブラン,A.ホットケーキ,10,10,食べると安心するケーキはなに？
バナナ,リンゴ,モモ,ナシ,A.ナシ,9,10,お店にあるのにないと言われる果物はなに？
手首,あくび,足首,おへそ,A.あくび,8,10,口から出るクビってどんなクビ？
シマウマ,キリン,ウシ,トラ,A.ウシ,7,10,帽子の中に隠れている動物はなに？
本,消しゴム,えんぴつ,黒板,A.本,6,10,よんでも返事をしないものはなに？
玉入れ,徒競走,リレー,綱引き,A.綱引き,5,10,強いと後ろに下がる競技はなに？
メロン,イチゴ,パパイヤ,ブドウ,A.パパイヤ,4,10,お父さんが嫌いな果物はなに？
くじら,いるか,ぱんだ,にわとり,A.いるか,3,10,逆さまになると軽くなる動物はなに？
フライパン,フォーク,おなべ,おはし,A.フライパン,2,10,固くて食べられないパンはなに？
ねこ,いぬ,ぞう,うさぎ,A.ぞう,1,10,冷蔵庫にかくれている動物はなに？

下図は登録が完了した Quiz type の状態です。

Data types の表示フィールドを調整したい場合は、画面右に見える「additional fields」もしくは、画面左側に表示されている「鉛筆マーク」をクリックして、どのフィールドを表示させるかといった Database view を保存することができます。

4.1. Answer type

では、最後に「Answer」テーブルの中身を登録していきます。

その前に、データ登録の作業を分かりやすくするために「Primary Fields」の設定を行います。Primary Fields は App data のタブでデータを閲覧する際に、どのフィールドデータを目印にするかを設定するものです。通常は、unique id（自動採番される英数字の文字列）がデフォルトですが、これだと Quiz type の場合、どの問題のデータの事を指しているか分かりにくいため、ここでは「No」の問題番号を Primary Fields として指定しておきます。これで、どのクイズ問題のデータか、問題番号で識別できるようになりました。

では、「Answer」を登録していきましょう。Answer type には、先程登録した Quiz type と同じ件数のデータを登録する必要があります。「New entry」ボタンをクリックして、まずは１問目の答えを登録します。先ほど Primary Fields を No で登録しているので、Quiz type の１問目は、No フィールドが「1」となります。「1」と入力すると、該当するデータを一覧に表示してくれるので、もし複数該当する場合は一覧の中から選択するようにします。

入力できたら「CREATE」で登録します。