【ノーコード】Bubbleでランキング機能を実装する方法

いつも記事をご覧いただきありがとうございます。
EPICs合同会社の大熊です！

今回はノーコードツールのBubbleで、ユーザーを一定条件のもとランキング別に並び替える方法について解説をしていきます！

こちらを活用及び応用いただくことで様々な条件で情報の並び替えや表示ができるので、とても使い勝手のいい機能だと思います！

動画解説バージョンはこちら！

なお、ノーコードBubbleの概要については以下の記事で解説しています。

【公認代理店が解説】ノーコードツールBubbleとは？使い方やデメリット、料金を解説

実装イメージ

下記が今回の実装機能のイメージです！
今回はユーザごとに来店回数を集計し、来店回数の多い順で上からユーザー名と来店回数が表示されるようになっています。

ランキング機能の事前準備

必要データ

ランキング機能の実装方法

①Repeating　Groupを設置しType of content をUserに設定

②repeatinggroupを指定しdata sourseをDo search for→Typeをnumber of visitに設定

③Data sourseの続きを設定

②が完了したらData sourseに戻り、Group by(どのデータを取るかを指定)を選択→Group byのfield to groupbyをvisit userに設定。下部のaggregationをcountに設定

Data sourseでsortedを選択し、sort byの設定

続いてData sourseでsortedを選択し、sort byをcountに、descendingをyesに設定

上記の設定を行うとrepeatingのType of contentがuserからGroupingに変更されます。

テキストの設置と設定

最後にテキストを二つ設置してcurrent cell’s grouping visituser’s usernameのテキストとcurrent cell’s gruoping countに設定しましょう。

後はデザインを整えたら実装完了です！

ここまで出来たら検証を行ってみましょう！

※ユーザー名の表示などがされない場合はsettinngのPrivacy設定でユーザー名などが表示出来ないようになっていないか確認しましょう

いかがでしたでしょうか？

少しでもBubbleでの開発やまた開発の検討のお役に立てておりましたら幸いです！