Option Seetsの【基礎編】をまだ読んでいない方は先にそちらをどうぞ↓
Attribute(属性)のデータ保存の方法
Option Sets【基礎編】で少しだけ説明したAttribute
今回は使い方を詳しく解説します。
Attributeとは?日本語訳だと「属性」で合ってるんでしょうか?
英語圏の人だときっと意味がすーっと入ってくるんだろうなと思うと羨ましすぎます…
が、そこは諦めて
ざっくりイメージとしては、みなさんがよく使うData typeの「field」のようなものです。
Data Typesの場合もOption Setsも、同じようにデータの登録ができます。
設定する要領が違うのでBubble初心者は混乱すると思いますが、、まずは比べてみましょう。
例として、保育園各クラスの「名前」「クラスの動物アイコン」「クラスのカラー」を考えてみます。
<Data Typesの場合>
例)保育園のクラス割(クラスの名前/クラスの動物/クラスカラー)
ステップ1)New typeで「class」を作成
ステップ2)Create a new field でフィールド(name、icon、color)を追加
ステップ3)App dataタブに行き、New entryでデータを追加
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.20.18.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.18.03-1024x669.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.19.06-1024x302.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.19.22-1024x279.png)
Data Typeについては慣れていると思います。
では次に、これをOption Setsで作ります。
<Option setsの場合>
例)保育園のクラス割(クラスの名前/クラスの動物/クラスカラー)
ステップ1)New option setに「class」を作成
ステップ2)New optionでに「ぺんぎんクラス」や「らいおんクラス」を入力してOptionを作成
ステップ3)Create a new attributeのボタンから、attribute(iconとcolorそれぞれ)を追加
ここでは、Data typesのフィールドのようなものを作っていると思ってください。
「クラスの名前」に付属情報を連ねて保存したい、ときにattributeを追加します。
追加したい付属情報は、クラスの動物アイコンとクラスの色です。
ここで完了とおもいきや
ステップ4)各attributeの中身は、「Modify attributes」のリンクを押して登録します
Modify attributesのリンクは、グレーが薄くてこれまたわかりづらいんですけどね…
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.46.51.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.32.53.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-02-1024x744.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.11.53.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.12.12.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-03-1024x786.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-21.16.27-1024x287.png)
そして最後にもう一つ、わかりづらいのが
Modify attributes からアイコンやクラスの色を保存したのに、この画面からはそれが見えない(Data typesのように表の表示がない)ことです。保存した内容を見るには毎回「Modify attribute」のリンクを押して中身を表示させないといけません。
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-04-1024x786.png)
AttributeはData typeでいうFieldのような扱いをします。
設定する要領がData typesとは異なるので、慣れるまで少しかかるかもしれません。
慣れ、あるのみです!
Attribute(属性)の使い方
前のチャプターでは、Attributeの保存の仕方を説明しました。
では次にどんなふうに扱うのか?
これは簡単で、Data TypesのFieldsの扱い方と同じです。
例えばRepeating Groupでもこのように
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.25.35-1024x641.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.26.54-1024x762.png)
するとこのように 保存したアイコンの一覧が表示されます。
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.27.20.png)
Attributeに保存したデータも、Data typeのFieldsのように扱うことができます。
普段Data typesを使いこなしているBubblerさんには馴染みがありますね。
便利小ネタ①:Opsion Setsは表示順を変更できます
ここからは小ネタが3つ、続きます。
知っておくと便利だよ〜というもの3連発を、どうぞ!
一つ目は
Opsion Setsは表示順を変更できる
こと
例えば曜日
月曜日〜日曜日まで以下の順番で保存すると、ドロップダウンの表示順番もこのように月曜日〜日曜日順になります
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.43.25-875x1024.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.44.17.png)
しかし、作成した後に「やっぱり日曜日を先頭に表示させたい」となった場合 、どうしますか?
…
簡単です。
この「move up」や「move down」を押して順番を変更すればこの通り!
無事に「日曜日」スタートの表示ができあがります。
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-05.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-22.49.49.png)
便利小ネタ②:Opsion Setsはコピー&ペーストができます
次に2つ目の小ネタです!
Option Setsはコピーして✅
全く別のアプリのOption Setsにそのままペースト使用ができます。
つまり
ぶっちゃけ都道府県とか、全世界 19●カ国などの Option Setsって登録するの、かなり面倒なので
誰かさんが作ったOption Setsをいただければ OKなのです〜(笑)
コピー&ペーストの方法は簡単で
①誰かさんの(自分の別アプリも)コピーしたいOption Sets を右クリックし「Copy」します。
例として、今回は「都道府県」
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-06-1024x522.png)
②そして他のアプリのOption Setsで 「Paste」すればOKです
気をつけるポイントは、Pasteする際に既に何かのOption Setsがある状態でないと「Paste」できないことです(笑)
Option Setsが何もない場合は一旦適当に一つ作ってからPasteするようにしてください。
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-07-1024x525.png)
そしてPasteする際も「既存の何かの Option Sets」上で右クリックしてください。
少しでも外れると、やはり「Paste」が表示されないんですよね。つまりPasteできない。
既存のOption Sets上でPasteして、問題ありません。
既存のOption Setsは消えたり上書きは、されません。
Pasteしたものが無事に追加されます。
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-08.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-23-23.26.04.png)
Option Setsのプレゼント
ということで、ここまで読んでくださっている皆さんにOption Setsのプレゼントです!
✔︎ 曜日
✔︎ 都道府県(地味にめんどくさいです)
リンクから↓ Option Setsに行き「Copy」して好きに使ってくださいませ🐭
https://bubble.io/page?name=index&id=obatrip-os&tab=tabs-3&subtab=Option+Sets
練習にOption Setsのコピー&ペーストを試してみる!のも良いです。
便利小ネタ③:Opsion Setsの名前の付け方
3つ目の小ネタは、ぶっちゃけ個人の好みですが
最近私はOption Setsの名前を付ける際は、はじめに「OS- 」を付けるようにしています。
Option Setsの 単語の頭文字を使っています。
*ブログ記事では、簡素化&わかりやすくするために付けていませんが、実際の案件では付けています。
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-09-1-1024x345.png)
![](https://obatrip.jp/wp-content/uploads/2022/09/os2-10-1-1024x355.png)
なぜか?
プロパティエディタで選択する際に、とても見やすい分かりやすいからです!
私は過去何度も、Data typeなのか、Option Setsなのか?どちらがどちらか?わからなくなったことがあります。
OS- を先頭に付けたことでこれはOption Setsだ!と選択する際に迷わなくなり、指定が早くなりました。
![](https://obatrip.jp/wp-content/uploads/2022/09/スクリーンショット-2022-09-24-0.15.26-624x1024.png)
Option Setsの名前付け、ちょっとしたことで効率がUPします。
私と同じように選択の際に探したり、迷ったことのある方は、ぜひ試してみてください。
まとめ:Option Sets(応用編1)
Option SetsのAttributeはData TypeのFieldのように扱うことができました。
一つの情報に対して他にも付属情報を付けたい時に使用します。
また、便利小ネタとして、
Option Setsの順番の並び替えや、コピーして他のアプリに利用できること。
それから、Option Sets名の付け方についても、私が普段使っている方法をお伝えしました。
ここまで読んでいただき、ありがとうございます。
参考になった、などあればTwitterでコメントいただけると嬉しいです^^
次回はOption Sets最終【応用編2】です。
Repeating Groupの並べ替えをする際にOption Setsを使うと、とても便利です!
方法をレクチャーします。
次回もお楽しみに!
Option Sets【基礎編】をまだ読んでいない方は、先によんでおいてください↓
Option Sets最終回【応用編2】はこちら
Bubbleの設定でお困りの方へ
思った動きを設定できない
こんな設定できるのか?
など、ご相談や代行も承っております。
案件の受託も可能です。お気軽にご連絡ください。
お問い合わせはこちら