BubbleでRepeating Groupを横スクロール可能にする方法

今回は、BubbleのRepeating Groupを使ってアイテムを横スクロール表示する方法について解説します。この手法を使えば、製品一覧や画像ギャラリーなど、横方向のナビゲーションを含むデザインを実現できます。

ゴールイメージ

以下は商品の一覧を横スクロールしているイメージです

ステップ1: Repeating Groupの基本設定

1. Repeating Groupを配置
   • デザインタブで新しいRepeating Groupをキャンバスに追加します。
   • Repeating Groupの名前を例として「RepeatingGroup Item」とします。

2. 表示するデータの設定

• Appearanceタブで以下を設定します。
  • Type of content: 表示するデータの型（例: 商品や画像など）。
  • Data source: データのソースを指定（例: Search for Items）。
  • WidthとHeightはFixedにしておきます。（例：Width 200px, Height 110px)

ステップ2: レイアウト設定

ここが一番重要です。むしろ、ここだけで十分です。

1. Repeating Groupのサイズ調整
   • レイアウトタブで以下を設定します。
     • Width: 必要な幅を指定。Fixedで指定します。（例: 600px）。
     • Fit height to content: チェックを有効化。
     • Set fixed number of rowsを：1に設定

ステップ4: プレビューで動作確認

1. プレビュー実行
   • プレビューを実行し、Repeating Groupが横スクロール可能であることを確認します。
2. 調整
   • 各列の幅など、必要に応じて調整します。

応用例

• 製品一覧
  • 商品カードを横スクロール表示して、ユーザーが簡単にアイテムを比較できるようにする。
• 画像ギャラリー
  • 写真や画像をスライド形式で表示。
• ニュースフィード
  • 記事のサムネイルを横スクロール表示。

このようにRepeating Groupの設定を工夫することで、よりダイナミックなUIデザインを実現可能です。ぜひ試してみてください！