BubbleにてConditionalにContainer layoutを指定できない問題の解決方法３つ

来田浩毅

上の画像はBubbleで作成したウェブページのスクショです。
氏名、居住地、自己紹介文はそれぞれtextをColumnのgroup(プロフィールグループ)でまとめています。そして、そのgroupと画像はrowのgroup(口コミグループ)でまとめています。
それらは、columnのgroup(全体グループ)でまとめています。

よくあるレイアウトだと思います。

これを、スマホで見る場合には画像とプロフィール文(口コミグループ)を縦に並べたいとします。
スマホのブレイクポイントは400pxとします。

単純に考えれば、口コミグループのConditionalのWhenにcurrent page width > 400を追加し、Container layoutをcolumnにしようとなりますよね。

ここで大問題です！

そう、現時点(2024年11月)ではbubbleではconditonalにContainer layoutを指定できないのです！！

レスポンシブ対応する際に結構不便ですよね。
実際、Bubbleエンジニアから実装を希望する声は多数あがっていますが、実装されてはいません。

嘆いていても仕方がないので、Container layoutを画面幅によって切り替える方法を考えます。

グループを２つ作り、片方は隠す

最初に紹介する方法は、実装方法は単純で簡単ですが面倒くさいですし管理も大変になるのでお勧めはしません。
内容は全く同じですが、Contaner layoutがrowのグループとcolumnのグループの２つを作成し、両方ともthis element is visible on page loadのチェックを外し、Collapse when hiddenのチェックをつけて、 それぞれのConditionalにwhen current page width > 400とThis element is visibleを追加する方法です。

同一内容のrowとcolumnグループをそれぞれ用意する

こうすることで、ページの幅によって、columnのグループとrowのグループ、それぞれの隠す、見せるが行えます。
実際にはページ幅によってhiddenとvisibleを切り替えているのですが、ユーザーからしたら同じグループのcontainer layoutがページ幅により切り替わっているように見えます。
単純で分かりやすいのですが、同じグループを２個作成しておくと管理がとてもめんどくさくなってしまいます。
もしも変更があった場合、作業量は単純に２倍になりますからね。
例えば、クライアント様より「ブレイクポイントは380に変えてほしい」と言われたら全グループの２倍の数のconditionalを変更しなければなりません。テストの数も２倍に増えてしまいます。

片方の要素を横幅いっぱいにする

２つめの方法はContainer layoutがrowであるグループを縦並びにする方法です。
まず、大前提としてrow（横並び）であるグループは、横幅が埋まってしまうとcolumn(縦並び）になります。
行き場がなくなってしまった要素は縦に並ばせて表示させるという挙動になります。

これを利用してページ幅によって縦並びへと変えます。
つまり、ページ幅によって一つの要素で横幅を埋め尽くしてしまえばよいのです。
今回の例でいうと、

プロフィールグループのmin widthをページ幅が400以下なら100％としています

このConditionalを追加することで、ページ幅が400以下の時に、プロフィールグループの最低横幅が親グループである口コミグループの横幅いっぱい(100%)となります。
横幅のすべてをプロフィールグループが埋め尽くしますので、行き場のなくなった画像を表示するために縦並びになるというわけです。

僕は、これがベストアイデアかなと思っています。
画像のほうにConditionalを設定してもいいのですが、個人的に画像の大きさは固定したいので、プロフィールグループに設定しました。
グループ内のどの要素にConditionalを設定するのがベストであるかはレイアウトによって異なりますので、いろいろ試してみるのがいいでしょう。

CSSで解決する

Bubbleはノーコード開発ツールですが、HTMLエレメントを使用することでコードを書くことができます。
まずはエディタのSettingのGeneralタブにてExpose the option to add an ID attribute to HTML elementsにチェックを入れましょう。最下部にあります

これにチェックをいれることで各エレメントにID attributeを設定できてHTMLで書いたタグを適用させることができるようになります。
ちなみに縦並びにするCSSは以下です。

<style>
#frex {
display: flex;
flex-direction: column;
}
</style>

口コミグループのID attributeにfrexを記入することでこのCSSが適用されて縦並びになります。
ですので、口コミグループのConditonalにページ幅が400以下の時、「ID attributeがfrex」を追加します。

まとめ

今回紹介したのは、３つの方法です。
僕は、この３つの方法しか知らないので、もしも他の方法を知っている人がいたらコメントで教えてください。

以下は、僕の紹介です。
まずはポートフォリオから
https://portforlio-match.bubbleapps.io/version-test
ポートフォリオとしてBubbleでマッチングサイトを作成しました。
デモログインできますし、メールアドレス認証も必要ないので、適当なアドレスで新規登録できます。
こだわりポイントはSPAです。
●いいね機能
●足あと機能
●ユーザー検索機能
●チャット機能
●既読機能
●プロフィール編集機能

ココナラにてBubbleでの開発を販売しています。
個人でウェブサービスを開発したい方や、スタートアップの企業様はぜひご連絡ください。最低１０万円から承っています。

こちらはX。Bubbleの話が多いです。


いいなと思ったら応援しよう！