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

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

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

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

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

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次
日本最大級のノーコード開発実績!

①日本最大級の開発実績
②最安30万円。通常の1/10~の低コスト開発
③最短2週間。圧倒的な開発スピード
④高難易度の開発もスムーズ
⑤複数のノーコードツールに対応

EPICsは上記5つの強みを武器に受託開発を行っています。
まずはご相談ください。

実装イメージ

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

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

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

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

Bubble横スクロールメニューの実装手順

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

  1. 横スクロールメニューの項目をOption setで作る
  2. RepeatingGroupに、作成したOption setをセットする
  3. RepeatingGroupのMax widthなどを設定する
  4. RepeatingGroup内にTextエレメントを固定幅で設置する

横スクロールメニューの項目をOption setで作る

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

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

RepeatingGroupに、作成したOption setをセットする

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

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

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

RepeatingGroupのMax widthなどを設定する

例ではメニュー最大幅を425pxに設定

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

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

RepeatingGroup内にTextエレメントを固定幅で設置する

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

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

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

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