bubble camp 生徒の方々からいただいた Bubble に関する質問集 part.3

f:id:yksmt:20200814171719p:plain

皆さん、こんにちは！ノーコードラボの bubble camp 内で、生徒さんからいただいた質問まとめの第3回目です！今回も Bubble 開発におけるテクニックやアイデアなども含め、色々ご紹介していきたいと思いますので、どうぞお付き合いください！

1. Field type の date をフォーマットしたい
2. 複数選択できるドロップダウンリスト
- Multiselect Dropdown プラグインの使い方
- Bubble の List について
3. アプリを他の人に譲渡する方法
- 2020/12/17 追記
4. Bubble でページ内リンクを実現する方法
- Scroll to を使う
- HTML タグを使う
5. Repeating Group で表見出しをつけたい
まとめ
シリーズのリンク

1. Field type の date をフォーマットしたい

Bubble での日付の取り扱いについてご紹介します。

まずは、基本となる現在時刻の取得です。JavaScript や PHP でいう date関数、Excel でいう TODAY や NOW にあたる部分ですが、Bubble で現在時刻を取得する場合は、「Current date/time」で取得することが可能です。

f:id:yksmt:20200807152322p:plain

更にフォーマットしたい場合は、more をクリックして「:formatted as」から Format type を選択していきます。日本で馴染みのあるフォーマットは「yyyy/mm/dd HH:MM:ss」辺りが一般的かと思いますが、「Custom」を選択して表示形式をフォーマットすることができ、その他にも「yyyy 年 mm 月 dd 日」などにもすることが可能です。

f:id:yksmt:20200807152439p:plain

f:id:yksmt:20200807152932p:plain

また、データベースで登録する場合は、time の部分を「00:00:00」などにして登録したいことがあると思います。そういった場合は、「change hours to」などで「0」をセットして変換することができます。

f:id:yksmt:20200807153703p:plain

その他、3日加算や減算したいといった場合は「+(days):3」や「+(days):-3」などして算出することができます。

f:id:yksmt:20200807154031p:plain

前月末といった日付を取得したい場合も、「change ～」と「+(days):」などをうまく組み合わせることによって取得することができます。

f:id:yksmt:20200807154409p:plain

あとは、よくある「今週の日曜日」や「今週の月曜日」を取得したいといった場合はプラグインなどを利用するのも良いですね。以下は「1 Thing - Day of Week」というプラグインを使用して取得していますが、非常に簡単に取得することができました。

f:id:yksmt:20200807154948p:plain

f:id:yksmt:20200807155007p:plain

その他、現在時刻を1秒ごとに表示更新したいといった場合は、イベントで「Do every 5 seconds」の Interval を 1秒毎にして、Custom state を利用して表示させれば実現できます。

f:id:yksmt:20200814140154p:plain

f:id:yksmt:20200814140328p:plain

f:id:yksmt:20200814140915p:plain

f:id:yksmt:20200814140953p:plain

サンプルURL： https://bubble-camp-qa.bubbleapps.io/version-test/part3-1

2. 複数選択できるドロップダウンリスト

通常のドロップダウンリストは単一選択ですが、Bubble 純正の複数選択ができるドロップダウンリストがプラグインであるのをご存知ですか？過去にご紹介した Bubble で人気のプラグイン記事でもランクインしていたので、既知の方も多いかもしれませんね。

プラグインをインストールするだけで、簡単に利用することができますが、Bubble の List の概念とあわせて、使い方のご紹介をしておきたいと思います。

Plugins タブで「Multiselect Dropdown」を検索してインストールします。

f:id:yksmt:20200814141435p:plain

Design タブの Input forms から「Multi dropdown」を配置します。今回はデータベースから値を取得したいので、Choices style を「Dynamic choices」にして、Type of choices で取得元の Type（データベーステーブル）を指定し、Choices source で「Do a search for」を使ってデータを取得します。ここでは、Food という Data Type を使用しています。 Option caption を「Current option's name」として、Food Type の name フィールドを表示させることにしました。

f:id:yksmt:20200814143311p:plain

f:id:yksmt:20200814141937p:plain

次に、この Multiselect で指定した値を Custom state の list に代入して表示させてみましょう。

作成する Custom state の Type は、Multiselect の Type と一致させておく必要がありますので、このサンプルでは Food を指定しています。

f:id:yksmt:20200814142803p:plain

Workflow タブで、Multiselect の値が変更された場合に、作成した Custom state を更新するアクションを追加しておきます。

f:id:yksmt:20200814143456p:plain

f:id:yksmt:20200814143629p:plain

Repeating Group の Data source に Custom state を設定して、リストの中身を表示させてみましょう。

f:id:yksmt:20200814143928p:plain

f:id:yksmt:20200814143844p:plain

f:id:yksmt:20200814144205p:plain

Bubble の List について

Bubble では、Data Type に定義する Field や、Custom state 、その他 Option sets に定義する Attribute においてなど、度々「List」という属性を選択することができるようになっています。

これは「List」という名前の通り、定義する一つの Field や Attribute に対して、複数の値を保持することができるという意味で、要素は順番に並んだデータ構造をしています。また、Bubble では、この「List」をうまく利用することで、Data Type において、親子関係のリレーションを表現することができるようなります。

初めて List を使う場合は、なんだか使い辛いと感じるかもしれませんが、慣れると Bubble でアプリを作成する上では、非常に重要な概念であり機能なので、是非使いこなしてくださいね。

サンプルURL： https://bubble-camp-qa.bubbleapps.io/version-test/part3-2

3. アプリを他の人に譲渡する方法

Bubble では、無料プランである「Hobby」を使用していても、「Transfer」という機能を利用して、アプリを丸ごと別の Bubble ユーザーに転送することが可能です。

転送は Settings タブの Collaboration から行います。Invite a user(email) の欄に、転送する人のメールアドレスを入力し「Transfer」をクリックするだけで完了です。Transfer はアプリを丸ごと転送してしまうため、転送後は自分の My apps ページにも表示されなくなりますので、ご注意くださいね。

なお、複数人やチームでアプリを開発したいといった場合に使える、アプリに別のユーザーを招待する「Invite」はプランのアップグレードが必要です。

f:id:yksmt:20200814155152p:plain