【現場で使える Bubble #9】Option setsの使い方と注意点

こんにちは！エンジニアのほんちゃんです。

さっそくですが、あなたは Option sets を使いこなせていますか？

・・・固定値のリストを作れる機能でしょ？ですって？

あたり！！！！だけどそこで終わらせてしまうと非常にもったいない！

Option sets って実はなかなかに便利な機能なんです。使いこなせるようになれば、メンテナンスのしやすい（保守性のある）システムに1歩前進できる！

今回は、東北6県の県名＆県庁所在地の表を実際に作りながら、Option sets の使い方を深堀りしていきます！

目次

1. Option sets は 静的データのリストが作れる！
2. Option setsを使ったサンプル例
3. Option sets にデータを追加する①【Option sets作成編】
4. Option sets にデータを追加する②【Options作成編】
5. Option sets にデータを追加する③【Attributes作成編】
6. UIを実装＆プレビューで見てみる
7. Option sets と Data typesの違い【Option setsに機密情報はNG】
8. まとめ

1. Option sets は 静的データのリストが作れる！

実装に移る前に、まずは Option sets とは何かについて見ていきましょう。

Option sets とは Bubble.io で扱えるデータの一種です。

ざっくり言ってしまうと、「静的データのリストを作る機能」です。

たとえば、都道府県や性別、曜日や国といった “ほとんど変わることのない” データを保持する場合に向いています。

プログラミングに慣れている方であれば、“定数” や “オブジェクト型の配列（静的データver.）” というと、よりイメージが湧きやすいかもしれません。

const Statuses = [
   { key: "Active", description: "This status is active.", icon: "✅" },
   { key: "Inactive", description: "This status is inactive.", icon: "❌" },
   { key: "Archived", description: "This status is archived.", icon: "📦" }
];

こういったものが直感的にパパッと用意できるのが Option sets です。

この機能を駆使することで、データの一貫性を保つことができるだけでなく、メンテナンスのしやすい状況も作ることができます。

（余談）Bubble.io では動的データと静的データの両方を保持することができます。

• 動的データ：Data Types
• 静的データ：Option sets

が該当します。

動的データについての詳細は 【Bubble 入門 #5】はじめてのデータベース！Bubble ではどう使う？ を見てみてくださいね！

2. Option setsを使ったサンプル例

Option sets についてサクッと説明をしたので、ここからは実際にサンプルを作りながら、Option sets の作成や設置方法についてご紹介します。

今回は、東北6県（青森、岩手、宮城、秋田、山形、福島）の県名と県庁所在地のリストを作成しようと思います。

それだけだと味気ないので、県のシルエットも一緒に表示させてみます。

↓に表示させているデータはすべて、1つの Option sets で賄う想定です！

（小学生の教科書に出てきそうな表だなぁ）

3. Option sets にデータを追加する①【Option sets作成編】

まずはエディタのサイドバーから Data をクリックします。

画面上部にあるタブから “Option sets” をクリックします。

まだ何も作っていない状況だと、公式のチュートリアル動画が表示されています。

“New option set” の入力欄に新規作成したい option set 名を入力し、“Create” ボタンをクリックします。

今回は以下のOption setsを作成します。

• 都道府県：prefecture

option set 名を入力して、”Create”ボタンを押すと・・・

はい！option set ができました！（先頭が大文字になるのは Bubble の仕様です）

4. Option sets にデータを追加する②【Options作成編】

続いて、今作成した各 option set それぞれに option（選択肢）を追加していきます。

今回必要な選択肢は以下

• 都道府県（prefecture）
  • 青森県
  • 岩手県
  • 宮城県
  • 秋田県
  • 山形県
  • 福島県

“New option” の入力欄に「青森県」と入力し、”Create”ボタンをクリックすると・・・

はい！Options のところに「青森県」が追加されました！これが選択肢として使える部分になります。

ではこの調子で残りの選択肢も追加していきます。

ちなみに、選択肢の順番を変更したい場合は、各option横にある

• ”move up”
• “move down”

で変更可能です。（Optionsが複数になったら表示されます）

フロント側で表示したときも同じ順番になります。

optionを削除したい場合は、各optionの一番右側にあるゴミ箱アイコンをクリックすればOK！

※ クリックした瞬間にすぐ削除されるので、消す場合はご注意を！！！

削除した option を元に戻したい場合は、

1. （show deleted）をクリック
2. 復活させたい option の右にある "Restore" をクリック

すれば大丈夫です！（show deleted は option を削除した時に初めて表示されますよ）

ゴミ箱アイコンの左にある、吹き出しアイコンはメモ機能です。

作成した attribute や option に対して、説明や補足情報を書くことができます。

5. Option sets にデータを追加する③【Attributes作成編】

さて今度は、各 option それぞれに attribute（属性）を追加していきます。

attribute とはいわゆる追加情報です。先ほど作成した各 option に対し、追加で情報を持たせることができます。

今回は県名の他に

• 県庁所在地
• 県のシルエット画像

も持たせたいと思っています。これらを attribute を使って追加していきます！

それでは、”Create a new attribute” ボタンをクリックします。

するとポップアップが表示されます。

Attribute name には属性名を入力します。今回の場合「県庁所在地」や「県のシルエット画像」ですね。

Attribute type には、属性の型を指定します。その値が文字列なのか数字なのか、はたまた画像なのか、を予め設定してあげる作業です。

ドロップダウンをクリックすると、以下のように選択肢が出てくるので、その中から適当な型を選択します。

選択できる型は以下の9種類です。作成済みの Option sets を選択することもできます。

• Option sets
• text：文字列
• number：数字
• date：日時
• date interval：期間（例：7日間、3ヶ月、1年）
• yes / no：はい / いいえ のどちらかを選択できる
• file：ファイル
• image：画像
• geographic address：住所

Attribute type の下にある “This attribute is a list (multiple entries)” にチェックを入れると、リスト型のデータを持たせることもできます。

今回は1つの値が保持できればいいので、チェックはつけません。

では “Create” ボタンを押して Attribute を作成しましょう！

じゃーん！text型の「県庁所在地」ができました！

これで各県の県庁所在地を格納する場所ができたので、お次は実際にデータを入れていきます。

データを入れる場合は、各 option のすぐ右にある “Modify attributes” をクリックします。

すると下のようなポップアップが表示されます。「県庁所在地」の入力欄がありますね！

入力したら “Save” ボタンを押して完了です！保存せずに戻りたい場合は、右下にある “Cancel” ボタンを押せばOK

保存した値を確認したい場合は、もう一度該当の option の “Modify attributes” をクリックして見てみてくださいね。

ではこの調子で、残りの県庁所在地と、県のシルエット画像を保存していきたいと思います。

・・・

こんな感じで作成完了です！

作った Option sets を出力させてみたいので、Design 画面に戻って UI を作っていこうと思います！

6. UIを実装＆プレビューで見てみる

今回は Repeating Group 要素を使って、作成した Option sets の一覧を作ってみます。

Repeating Groupの使い方については【Bubble 入門 #6】Repeating Group でデータベースの中身を繰り返し表示しよう！を見てみてください！

Type of content をクリックすると、先ほど作成した Option sets（prefecture）が表示されていますね。こちらをセットしてあげます。

Data source を開くと、先頭に ”All prefecture” がありますね！prefecture の全選択肢をセットする、という意味です。（Repeating Group なので、リスト形式のデータを入れる必要があるためですね）

これでデータ自体の設定は完了です！あとは text要素 とかを設置してあげて、プレビューを開いてみると・・・

はい！こんな感じで表示できました！

エディタ側を少しだけお見せすると、このように、先ほど作成した Attribute が選択できるようになっています。ここで、県名（’s Display）や県庁所在地を設定していました。

7. Option sets と Data typesの違い【Option setsに機密情報はNG】

一通り Option sets について解説したところで、Data types との違いについてもお話ししたいと思います。

これだけ覚えて帰ってください！

• Data types
  • システムを触るユーザー自身に変更してもらいたいデータ
  • 個人情報のような、全員には見られたくないデータ
    
• Option sets
  • めったに変更することがないデータ
  • 全員に見られても大丈夫なデータ

Option sets は作成方法でお見せしていた設定画面でのみ、更新や削除ができます。

つまり、開発者しか触れません。

Data types はユーザー自身が操作できるよう、 ”Create a new thing…” や “Make changes to thing…” といったアクションが Workflow に用意されています。

そしてもう1つ重要なのが、Option sets は安全ではない ということ！

システムのソースコードの一部として読み込まれるので、どんな Option sets が存在しているのかを、調べようと思えば調べられちゃうのです・・・

だから絶対に、絶対に！！個人情報等のプライベートな内容は Option sets に入れちゃダメですよ！！！

そこを守れば、Option sets は「表示速度よし！メンテナンスよし！」な強い味方となってくれます！

8. まとめ

Option sets の使い方とData types との違い、注意点についてお話ししてきました。

ここ！！！ここだけ覚えて帰ってもらったら最高です！あなたも Bubbler に1歩前進です！

• Data types
  • システムを触るユーザー自身に変更してもらいたいデータ（動的なデータ）
  • 個人情報のような、全員には見られたくないデータ
    
• Option sets
  • めったに変更することがないデータ（静的なデータ）
  • 全員に見られても大丈夫なデータ

適切に使えば、システムのパフォーマンス向上はもちろん、静的なデータを一元管理できるのでメンテナンス向上にも役立ちます。

（弊社は開発して終わりではなく、開発後からが本番なので、メンテナンスのしやすさもパフォーマンスと同じくらい重要視しています）

メンテナンス性もパフォーマンスも考慮しながらのシステム開発や、Bubbleについてもっと知りたくなった場合は、ぜひ Biz Freak にご連絡ください！（インターンも募集中！）

【オフィス環境や募集内容はこちらから】