Bubbleで超絶シンプルな横スクロールメニューを作る方法！

ノーコードツール「Bubble」でシンプルな横スクロールメニューを作る実装方法を紹介します。

Option set項目をRepeatingGroupにセットして横スクロールできるシンプルなタブバーを作りたい方は必見の内容です。

Bubble初心者向けに画像多めで解説するのでぜひ手を動かしながら挑戦してみてくださいませ！では！

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

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

実装イメージ

アプリのホーム画面でよく見かける横スクロールメニューの超絶シンプルバージョンの作り方をこの記事では紹介します。

実際使うとしたら現在のページに該当するタブにはアクティブだとパッと見で分かるように、少し太めの下線を付与したりが必要ですが今回はBubbleで横スクロールってこんな感じで実現できるんだぁと知ってもらうことが主題なので応用編はまた次の機会に！

今回作る横スクロールメニューの構造は以下の通りです。

RepeatingGroupとその中にTextエレメントを設置するだけ。

ノーコードツールBubbleでは以下の手順で横スクロールメニューを実装します。

まずは横スクロールメニューに表示させたいメニュー項目をOption setsで作ります。

Option setの名前は「tab」みたいな感じで分かりやすく命名してあげましょう。

画面にRepeatingGroup「Tabs」を設置し、先程作成したOption setをセットします。

Type of contentに、作成したOption setを設定するのと、Data sourceに、Allを指定してあげましょう。

「Set fixed number of rows」にチェックを入れてRowsの値を1にするのと、「Min width of column」の値をよしなに指定してあげるのもポイントです。例では80pxに設定しました。

Appearance設定が完了したら、Layoutタブへ移ります。

今回の肝、RepeatingGroupのMax widthをよしなに設定してあげましょう！

仕上げです。RepeatingGroup内にTextエレメントを固定幅（例では80px）で設置して色を調整したりして完成です！

TextエレメントのWidthは、先程設定したRepeatingGroupの「Min width of column」と同じ値にしましょう。

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！