データベース

BubbleのOption Sets【応用編1】- Attribute(属性)の追加と便利小ネタ3点

Option Sets応用、Attribute

さるくん
さるくん
前回のブログでOption Setsの基礎は理解できたと思うので、今回は応用に進みます! Attributeの使い方や知っておくと便利なことをお伝えします!
りすくん
りすくん
はい、今回もよろしくお願いします!

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でデータを追加

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のリンクは、グレーが薄くてこれまたわかりづらいんですけどね…

そして最後にもう一つ、わかりづらいのが

Modify attributes からアイコンやクラスの色を保存したのに、この画面からはそれが見えない(Data typesのように表の表示がない)ことです。保存した内容を見るには毎回「Modify attribute」のリンクを押して中身を表示させないといけません。

AttributeはData typeでいうFieldのような扱いをします。
設定する要領がData typesとは異なるので、慣れるまで少しかかるかもしれません。
慣れ、あるのみです!

Attribute(属性)の使い方

前のチャプターでは、Attributeの保存の仕方を説明しました。
では次にどんなふうに扱うのか?

これは簡単で、Data TypesのFieldsの扱い方と同じです

例えばRepeating Groupでもこのように

Type of contentに Option Sets名
中に配置した Imageに Current cell’s class’s iconを指定

するとこのように 保存したアイコンの一覧が表示されます。

Attributeに保存したデータも、Data typeのFieldsのように扱うことができます。
普段Data typesを使いこなしているBubblerさんには馴染みがありますね。

便利小ネタ①:Opsion Setsは表示順を変更できます

ここからは小ネタが3つ、続きます。
知っておくと便利だよ〜というもの3連発を、どうぞ!

一つ目は

Opsion Setsは表示順を変更できる
こと

例えば曜日
月曜日〜日曜日まで以下の順番で保存すると、ドロップダウンの表示順番もこのように月曜日〜日曜日順になります

しかし、作成した後に「やっぱり日曜日を先頭に表示させたい」となった場合 、どうしますか?

簡単です。
この「move up」や「move down」を押して順番を変更すればこの通り!

無事に「日曜日」スタートの表示ができあがります。

便利小ネタ②:Opsion Setsはコピー&ペーストができます

次に2つ目の小ネタです!

Option Setsはコピーして

全く別のアプリのOption Setsにそのままペースト使用ができます。

つまり
ぶっちゃけ都道府県とか、全世界 19●カ国などの Option Setsって登録するの、かなり面倒なので

誰かさんが作ったOption Setsをいただければ OKなのです〜(笑)

コピー&ペーストの方法は簡単で

①誰かさんの(自分の別アプリも)コピーしたいOption Sets を右クリックし「Copy」します。
例として、今回は「都道府県」

②そして他のアプリのOption Setsで 「Paste」すればOKです

気をつけるポイントは、Pasteする際に既に何かのOption Setsがある状態でないと「Paste」できないことです(笑)
Option Setsが何もない場合は一旦適当に一つ作ってからPasteするようにしてください。

そしてPasteする際も「既存の何かの Option Sets」上で右クリックしてください
少しでも外れると、やはり「Paste」が表示されないんですよね。つまりPasteできない。

既存のOption Sets上でPasteして、問題ありません。
既存のOption Setsは消えたり上書きは、されません。

Pasteしたものが無事に追加されます。

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の 単語の頭文字を使っています。

*ブログ記事では、簡素化&わかりやすくするために付けていませんが、実際の案件では付けています。

なぜか?

プロパティエディタで選択する際に、とても見やすい分かりやすいからです!

私は過去何度も、Data typeなのか、Option Setsなのか?どちらがどちらか?わからなくなったことがあります。

OS- を先頭に付けたことでこれはOption Setsだ!と選択する際に迷わなくなり、指定が早くなりました。

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の設定でお困りの方へ

思った動きを設定できない
こんな設定できるのか?

など、ご相談や代行も承っております。
案件の受託も可能です。お気軽にご連絡ください。

お問い合わせはこちら

ABOUT ME
おばとりっぷ
専業Bubbleエンジニア▷元webデザイナー/ディレクター▷CSSをBubbleに実装するのが得意▷日本国内のトップBubbleエンジニアとしてwebアプリ開発に携わる▷Bubble講師▷フルスクラッチ開発のアプリで起業した経験あり▷スタートアップ・起業家のBubbleアプリ開発の支援を積極的に行う。