2022.10.21 2023.02.10

URLをコピーしました！

bubbleでタブを設定するには？

2023 2/10

こんにちは！ファンリピートの加藤です。

ファンリピートでインターンをさせていただいており、開発の現場やお客さまとの打合せに入るなど様々な経験をさせていただいています。

私自身、bubbleを学習してから間もないですが、学習した内容について共有出来ればと思います。参考にしていただけるとありがたいです。

＼年末までに限った無料特典／
貴社のシステム開発・アプリ開発を爆速で進めるための
【毎月先着２社限定】デモアプリ構築・無料依頼フォーム

【当社では、こんなデモアプリがすぐに作れます】

貴社で「まずつくってみたい」試作品アプリの構築を毎月先着２社限定で無料で承っております
社内の管理システムからtoB, toCのWebサービスまで幅広くご支援可能です
ご興味のある方は下記のフォームよりお申し込みください

bubbleとは？

bubbleとはノーコードツールの名前のことでですが、有名で老舗なツールと認識されている方も多いかもしれません。

一般的にウェブアプリケーションを作成しようとするとサーバーサイドとフロントサイドに関する知識やhtml、CSS、Java scriptなどの多数の言語の習得が必要となります。ただでさえ工数も多く必要になり、追加機能を付ける度にデータ構造の見直しなどさらに多くの手間がかかってしまいます。

しかし、ノーコードツールを利用すれば多少の知識は必要になるものの多数の言語習得の必要がなく、工数の大幅な削減が期待できます。

タブとは？

タブとは

タブとは、Webサイトやアプリケーション内で複数の画面を切り替えるための画面上の見出しのことです。多くの場合、同じページにとどまりながら異なる表示に切り替えるために用いられ、一度に全ての情報を表示するよりも利用者にとって使いやすくなります。

実際の利用例

https://www.mhlw.go.jp/index.html

厚生労働省のホームページ（2022月10月19日参照）を例に見てみると、「新着一覧」、「報道発表」、「審議会等」、「その他」の項目でタブが利用されています。ここで掲載されている内容は全てWebページやその内容の更新についてですが、内容によってタブを切り替えることによってより簡単に知りたい情報を収集することが可能になります。

https://www.apple.com/jp/trade-in/

こちらはAppleのホームページ（2022月10月19日参照）です。ここでは各Apple製品で適用される下取り料金を掲載しています。ここでのタブは「iPhone」、「iPad」、「Mac」、「Apple Watch」、「その他のデバイス」という文字とともにアイコンも表示されており、一目見て何が表示されているか想像しやすく、見たい情報にすぐたどり着くことが出来ます。

今回は2例挙げましたが至る所でタブは活用されており、その利用法も様々です。自分の作りたい、見せたいサイトによって工夫することで他のサイトとの違いが作り出せるかもしれません。

bubbleで実際にタブを設定してみる！

それでは実際にタブを設定していきましょう！

タブを作成する(UIの調整)

こちらがスマートフォンの画面で見た時の完成例です。求人サイトなどのタブ機能を想定し、「投稿一覧」、「応募」、「お気に入り」の項目で本機能を作成していきます。

今回はスマートフォンで利用すること想定しているため、画面は小さくなっていますがご了承ください。分かりやすくするためにグループに色を付けています。

画面左のContainer中の「Group」（以下、「Group」とする）からドラッグ&ドロップを2回し、それぞれの名前を「Group Tab」、「Group Body」としてください。

Group Tab（青いグループ）とGroup Body（赤いグループ）をBody（全体）によってグループ化してください。

二つのエレメントを「Ctrlキー」もしくは「Shiftキー」を押しながら選択し、右クリックから「Group element in a Column container」を選択するとグループ化が出来ます。その後、グループの名前をBodyとします。

Layoutは以下の項目を参考にし、他の項目は含めたい内容によって随時変更してください。

<Body>
Container Layout : Column
Min width : 320px ,Max width : 600px

<Group Tab>
Container Layout : Row
Min width : 100%
Min height : 80px

<Group Body>
Min width : 100%

ここで画面左のVisual elements中の「Icon」（以下、「Icon」とする）をGroup Tab中にドラッグ&ドロップします。Iconの形を変更したい時は、画面右の「Choose an icon」をクリックして形を選択できます。

同様に画面左のVisual elements中の「Text」（以下、「Text」とする）と「Group」をGroup Tab中にドラッグ&ドロップしますし、それぞれ「Text Postlist」、「Group Tabber」と名前を変更します。

その後に「Group Tabber」に色を付けますが、その際にStyleから新たなStyleを追加するか、既存のSyleを「Edit Style」から編集することができます。

以上の3つをグループ化し、「Group Postlist Tab」と名前を変更します。
「Group Postlist Tab」のContainer layoutをColumnに設定します。

これをコピー&ペーストを2回し、それぞれの名前を上記Elements treeにしたがって変更します。

「Group Applist Tabbar」と「Group Favlist Tabbar 」のLayoutから「This elemnet is visible on the page load」のチェックを外します。これは画面表示時にエレメントを表示させないためです。

次に「Group Tab」の「Apply gap spacing between elements」にチェックをいれ、Column gapを30とします。これにより各グループの間に30pxの間隔が開きます。

各グループのエレメントの幅を統一したいので、「Group Postlist Tab」,「Group Applist Tab」、「Group Favlist Tab」のMin widthを80px、Max widthを200pxにします。ここでは最も幅の大きい「Group Favlist Tab」を基準として最小幅としています。