Bubbleテクニック論 あなたはどっち派?「フォロー機能の作り方」

みなさんこんにちは!Ryoです。

ざっくりと自己紹介をさせていただくと、現在高専の3年生でNoCode学生会という学生限定のNoCodeオンラインサロンの代表をしながら国内最大のNoCodeオンラインサロン「NoCodeCamp」にて公認Bubbleエキスパートをしており、NoCode関連の事業開発支援や受託開発、技術顧問等をしております。

今回は、最近さまざまな人から質問を受けるBubbleでSNSサイトを作成するときのフォローフォロワー機能の実装方法について紹介していこうかと思います。

BubbleでSNSサイトを作る際にできる限り参考になるように、
・フォロー
・フォロー解除
・フォローフォロワー数表示
・フォローフォロワー一覧表示
の実際の実装方法を画像多めでお届けできたらなと思います。

また、Bubblerの中で一種の対立戦争のようになっている
list肯定派  vs  アンチlist派
の対立が起きないよう、今回はlistを使った方法とlistを使わない方法どちらもご説明させていただきます!

それぞれのメリットデメリットなども書いてありますので、実際個人開発などでSNSを制作する際データベース構造を考える段階からこの記事を読んでいただけると、今後のサービス構築が捗ると思いますので是非ともご活用ください。

ではそろそろ本編に参りましょう!

下準備

まずはSNSに欠かせないプロフィール画面にいくまでの流れを作っておきましょう!

スクリーンショット 2021-02-22 20.11.12

今回下地として使用するデータベースはこんな感じです!
今回は実際にSNSを制作するわけではないのでデータベースは初期のUserのみでやっていきます!(まぁ後でもう一つデータベース作りますが…)

一応でもデータとしてわかりやすくするために名前とプロフィールアイコンを格納するフィールドを作成しておきました。
ここはご自分のSNSサービスによって工夫してみてください!

スクリーンショット 2021-02-22 20.18.09

テスト用にこんな感じで3人のユーザーを登録しておきます!

そうしましたらまずはユーザー一覧ページを作っていきましょう!

スクリーンショット 2021-02-22 20.19.56

一応事前に簡単なヘッダーは作っておきました。
参考までにページの横幅は760pxです。

まず、ユーザー一覧を表示するためにRepeating Groupを設置します。

スクリーンショット 2021-02-22 20.25.49

Repeating Groupがわかりやすいように少し色をつけておきました。

設置ができたらType of contentをUserに、Layout styleをExt. vertical scrolling に設定してください。

Data sourceの部分は[Do a Search for]→Type[User]でOKです!

これでUserのデータベースからユーザーの情報を引っ張って来れたので各ユーザーの名前とアイコンを表示するように設定します。

Repeating Groupの1番上の一コマにGroupを作成します

スクリーンショット 2021-02-22 20.32.13

Type of contentをUserに、Data sourceをCurrent cell’s Userにします。

その後このGroupの中にImageとTextを一つずつ設置します。

スクリーンショット 2021-02-22 20.35.56

textの設定は[Parent group’s User’s name]にしましょう。

スクリーンショット 2021-02-22 20.38.45

Imageの設定も同様に[Parent group’s User’s profile-icon]にしておきます。

これでひとまずユーザー一覧画面は完成です!

プレビューを見てみると…

スクリーンショット 2021-02-22 20.40.59

ユーザー一覧としてはいい感じですね

しかし、悪くはないのですがプロフィールアイコンがそれぞれサイズがバラバラなのが少々気になります…
ちょっと手直ししておきましょう

スクリーンショット 2021-02-22 20.42.47

Imageの設定から[More]を選択し、[:processed with Imgix]を選択します。

スクリーンショット 2021-02-22 20.44.12

そうすると上図のようにBubbleデフォルト機能の画像編集機能が使えるので
[Resize to fit the dimensions by cropping]と[Apply a circle/ellipse mask]にチェックをつけます。

スクリーンショット 2021-02-22 20.46.51

これでいい感じになりましたね!
それでは各ユーザーの詳細ページに行けるようにしましょう!

まずはユーザー詳細ページを作成します

スクリーンショット 2021-02-22 20.50.09

ページ選択から[Add a new page…]をクリックして新規ページを作ります。

今回はページ名を[profile]にしておきました。

スクリーンショット 2021-02-22 20.52.59

新しく作成したprofileページのType of contentをUserにしておきます。

スクリーンショット 2021-02-22 21.00.37

UI部分にはGroup1つ設置してその中にImageとTextを設置し

Image:[Current Page User’s profile-icon :processed with Imgix]
Text:[Current Page User’s name]
に設定します。

スクリーンショット 2021-02-22 21.05.56

そうしましたらこんな感じでText2つとボタン1つを設置します。
profileページに紐付いたUserが自分だった場合はフォローするボタンではなく、プロフィール編集ボタンにしたいので

スクリーンショット 2021-02-22 21.10.12

エディタ画面左上のElement treeよりボタンを目玉アイコンをクリックして一度見えないようにして、もう一つプロフィール編集のボタンを作成します。

スクリーンショット 2021-02-22 21.11.42

こんな感じですね
そうしたらそれぞれのボタンに表示条件をつけていきます。

スクリーンショット 2021-02-22 21.13.32

それぞれのボタンのAppearanceの[This element isn’t clickable]をオフにしておきましょう。

スクリーンショット 2021-02-22 21.15.58

次にConditionalからプロフィール編集ボタンに[Current Page User is Current User](現在のページに紐付いたユーザーデータが自分のものだった場合)という条件をかけて
[This element is visible]にチェックをつけます。

フォローするボタンは逆に
[Current Page User isn’t Current User]の条件で[This element is visible]にチェックです。

これでユーザー詳細ページの初期設定は完了です。

最後にユーザー一覧ページからユーザー詳細ページに行くワークフローを作成しましょう。

スクリーンショット 2021-02-22 21.20.50

ユーザー一覧のページに戻ったら1ユーザーのグループを選択し、
[Start/Edit workflow]からワークフローを作成します。

スクリーンショット 2021-02-22 21.22.16

UserのGroupをクリックしたらという条件においてprofileページに飛びたいので[Navigation]の[Go to page…]を選択します。

スクリーンショット 2021-02-22 21.24.50

Destinationを[profile]に、Data to sendに[Current cell’s User]を設定します。

以上で下準備は終了です。

Listを使ったフォロー機能の実装方法

スクリーンショット 2021-02-22 21.49.29

Listを使ったフォロー機能のデータベースはこちらです

・フォローの実装

profileページのフォローするボタンのワークフローを作成します。

スクリーンショット 2021-02-23 11.35.30

ワークフローのボックスに[Current User’s follow doesn’t contain Current Page User]という条件分岐を追加します。

これは自分がこのページのユーザーをフォローしていなかった時という条件です。

スクリーンショット 2021-02-23 11.38.06

次にアクション部分を作成します。

[Data(Things)]から[Make changes to thing…]を選択します。
この時[Make changes to list of things…]と間違えないように気をつけてください

Thing to changeを[Current User]に設定し、
Change another fieldに[follow add Current Page User]を追加します。

これでフォロー機能は完成です。

・フォロー解除の実装

スクリーンショット 2021-02-23 11.44.23

フォロー解除機能の実装はまず、先ほど作成したフォロー機能のワークフローを複製します。
ボックスの上でコピーペーストをすると複製できます。

ボックスに追加していた条件分岐の[Current User’s follow doesn’t contain Current Page User]の[doesn’t contain]の部分を[contains]に変更してください。

スクリーンショット 2021-02-23 11.47.30

中身のアクションの部分もChange another fieldの[follow add Current Page User]を[follow remove Current Page User]に変更します。

これでフォロー解除機能も完成です。

スクリーンショット 2021-02-23 17.36.15

自分が現在のページのユーザーをフォローしている時にフォローするボタンがフォロー中に変わるように上図のようにConditionalを追加しておきましょう!

Whenに[Current User’s follow contains Current Page User]
Select a property to change when trueよりTextを選択し、フォローするをフォロー中に変更しましょう!

・フォローフォロワー数の表示

それではprofileページでフォローフォロワーの人数がわかるようにしましょう!

まずフォロー数の表示です。

スクリーンショット 2021-02-23 11.52.07

下準備で作成していたフォロ:のTextに[Current Page User’s follow:count]を追加します。

これでこのページに紐付いているユーザーのfollowのフィールドに入っているユーザーの数を表示してくれます。

スクリーンショット 2021-02-23 11.55.26

フォロー数が1000人以上の場合に(~K)みたいな感じで表示したい場合はこんな感じでConditionalを追加してみると対応可能です!

続いてフォロワー数の表示です。

スクリーンショット 2021-02-23 11.57.36

フォロワー数を表示する場合はこちらです。

こちらも先ほど下準備で設置したフォロワー数:のTextに[Do a Search for]→User Typeの[follow contains Current Page User]を条件追加して[:count]です。

これはUserのデータベースの中でこのページのユーザーをフォローしているユーザーの数を表示するという設定になります。

1000人以上で~Kに変えたい場合はフォロー数表示で説明したやり方と同様なので確認しながらチャレンジしてみてください!

・フォローフォロワー一覧の表示

最後にフォローフォロワー一覧の表示です!

まずはフォロー一覧の表示から挑戦してみましょう!

スクリーンショット 2021-02-23 12.05.22

まずはこんな感じでフォロー一覧を表示するためのPopupを設置します。

スクリーンショット 2021-02-23 12.08.24

次にRepeating Groupを設置してType of contentをUserに
Data sourceを[Current Page User’s follow]に設定します。

Repeating Groupの中にImageとTextも忘れずに入れておいてくださいね!
ImageとTextの設定は下準備のユーザー一覧の設定と同じです!

これでフォロー一覧の表示は完成です
フォロワー一覧の表示に参りましょう!

スクリーンショット 2021-02-23 12.12.32

はい。フォロワー一覧の場合はこちらです。
ぱっと見てお分かりの通りフォロー一覧と変わっているのはRepeating Groupの設定の部分ですね

Repeating GroupのData sourceを[Do a Search for]→TypeをUserにconstraintを[follow contains Current Page User]に設定する。
これだけです。

最後に忘れずにフォローフォロワー数表示のTextをクリックした時に今回作った2つのPopupが表示されるようにワークフローを作っておきましょう!

スクリーンショット 2021-02-23 12.17.37

フォロー数表示、フォロワー数表示それぞれのTextを押した場合のワークフローを作成したらアクションで[Element Actions]からAll elementsのShowを選択し、それぞれ表示させたいPopupを選択しておいてください。

これでListを使ったフォロー機能の実装は完了です!

実装テストをする際はユーザーログインをしていないとうまく機能してくれないのでログイン機能をつけておくか、Userのデータベースから[Run as]を選択してテストするようにしてくださいね。

・Listを使ったフォロー機能のメリットデメリット

メリット

・データベースが増えない

Listを使ったフォロー機能はデータベースが新しく増えることがないのでユーザー情報の管理が非常に簡単です

特定のユーザーが誰をフォローしているのか管理画面で容易に確認することができますしね。

デメリット

・バズると大変!?

Listの特徴として10,000件以上のデータは無効になるというものがあります。つまり、Bubbleで制作したSNSのフォロー機能を実装している場合、万が一そのSNSが流行してユーザー数が爆発的に伸びた際に1万以上のフォローは全て無効として処理されるため、フォローできないという現象が起こります。

これはBubbleで製品版としてSNSをリリースしようと考えている方には大きな問題でしょうね。

Listを使わないフォロー機能の実装方法

スクリーンショット 2021-02-23 12.24.40

Listを使わない場合のフォロー機能の実装方法はこんな感じです
新しくFollowというデータベースを作成し、User型のfieldを2つ作っておきます。

本当はto-userのfieldだけでも実装可能なのですが(from-userはCreatorと同じ値が入るため)今回はわかりやすくするために2つのfieldでやっていきます。

・フォローの実装

スクリーンショット 2021-02-23 12.48.30

まずはフォロするボタンをクリックした時のワークフローを作成していきます。

フォローボタンを押した時に自分が現在のページのユーザーをフォローしていなければフォローするという処理を実行したいので、

ボックスに[Do a Search for]→Typeをfollowにconstraintを[from-user = Current User]に設定し、to-user doesn’t contain Current Page Userと続けます。

スクリーンショット 2021-02-23 12.49.09

ここに一つアクションを追加し、[Data(Things)]の[Create a new thing…]を選択します。

その後Typeをfollow、Set another fieldより
from-user = Current User
to-user = Current Page User
とそれぞれ設定しましょう!

これでフォロー機能は完成です


・フォロー解除の実装

スクリーンショット 2021-02-23 12.49.46

フォロー解除機能を実装する際はまず、先ほど作成したフォロー機能のワークフローを複製します。
複製についてはワークフローのボックスでコピーペーストを行えばできます。

次にOnly whenの[Search for follow’s to-user doesn’t contain Current Page User]の[doesn’t contain]を[contains]に変更します。

スクリーンショット 2021-02-23 12.51.05

次にアクションの[Create a new thing…]を[Delete thing…]に変更し、
To deleteを[Do a Search for]よりTypeをfollow、constraintを[from-user = Current User]に[to-user = Current Page User]に設定しましょう。

これでフォロー解除機能も完了です。

スクリーンショット 2021-02-23 12.52.58

自分がprofileページのユーザーをフォローしている時にフォローするボタンをフォロー中に変わるようにしたいので、フォローするボタンに上図のようなConditionalを追加します

Whenに[Do a Search for]よりTypeをfollowに、constraintを[from-user = Current User]に設定します。

[Select a property to change when true]からTextを選択し、フォロー中に変更します。

これで自分がprofileページのユーザーをフォローしている時はボタンの表記がフォロー中に変わるようになりました。

・フォローフォロワー数の表示

スクリーンショット 2021-02-23 12.54.14

フォローしている人数を表示する際は、下準備で設置したTextのフォロー数:の後に[Do a Search for]よりTypeをfollowにconstraintを[from-user = Current Page User]に設定します。

スクリーンショット 2021-02-23 17.18.13

フォロー数が1000人以上になった時にフォロー数を~Kのように表示させたい場合は上図のようにフォロー数のTextにConditionalを追加してみてください。

これでフォロー数の表示は完了です。

スクリーンショット 2021-02-23 12.54.42

次にフォロワー数の表示を設定していきます。

下準備で作成していたフォロワー数:のTextに[Do a Search for]よりTypeをfollowにconstraintを[to-user = Current Page user]に設定したものを追加します。

これでフォローフォロワー数の表示設定は完了です。

・フォローフォロワー一覧の表示

スクリーンショット 2021-02-23 17.24.30

それでは、最後にフォローフォロワー一覧の表示設定をしていきましょう!

まず、フォロー一覧の設定です。
フォロー一覧を表示するためのPopupを作成し、上図のようにRepeating Groupを設置します。
Popupには特にType of contentなどはつけなくて大丈夫です。

Repeating GroupのType of contentをUserに、Data sourceを[Do a Search for]よりTypeをfollowに、constraintを[from-user = Current Page User]に設定し、to-userをと設定します。

Repeating Groupの中にImageとTextをそれぞれ1つずつ設置して下準備で紹介したユーザー一覧の使い方と同じように設定します。

これでフォロー一覧は完成です。

スクリーンショット 2021-02-23 17.27.00

次にフォロワー一覧の作成です。

フォロワー一覧は先ほどフォロー一覧で作成したPopupを複製し、Repeating Groupの設定を[Do a Search for]よりTypeをfollowに、constraintを[to-user = Current Page User]に、to-userをfrom-userに変更します。

これでフォロワー一覧の作成は完了です。

スクリーンショット 2021-02-23 17.11.07

下準備で設置したフォロー数とフォロワー数のTextをクリックした時にそれぞれのPopupが表示されるようにワークフローを作成しておきましょう。

それぞれのTextでワークフロを作成し、[Element Actions]→[All element]→[Show]を選択し、ElementにそれぞれのPopupを設定します。

これでListを使わないフォロー機能の実装は完了となります。

実装テストをする際はユーザーログインをしていないとうまく機能してくれないのでログイン機能をつけておくか、Userのデータベースから[Run as]を選択してテストするようにしてくださいね。

・Listを使わないフォロー機能のメリットデメリット

メリット

・10000人以上のユーザー数に対応できる

Listを使ったフォロー機能と違い、Listを使わないフォロー機能には制限が特にないのでユーザー数が増えても問題なくフォロー機能を利用することができます。

デメリット

・データベース管理の手間が増えるかも

Listを使わない場合、新しくデータベースを作成することになるため、少々データベース管理が面倒になります。多くのデータベースを使うアプリケーションの場合はデータベースが増えすぎて頭がこんがらがることもあるので、考えものですね。

最後に

今回の教材はいかがだったでしょうか?

今回も少々ボリュームの多い教材となってしまいましたが、最近BubbleでSNSのフォロー機能についてよく質問を受けるのでそれに対応すべく今回の教材を作らせていただきました。

(ただいちいち説明するのが面倒だっただけな気も…)

よろしければいいねやフォローいただけると幸いです。

僕はいつもListを使わないフォロー機能を実装していますが、こっちの方が好きです!とかもっとこんなメリット、デメリットあります!などありましたらコメントに書いてください!

それではまた次の教材でお会いしましょう!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次