ファンリピート社のブログFR note

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

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

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

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

目次

「システム開発のお悩み」が一瞬で解決するかも
システム開発に時間とコストがかかる、ITリソースが不足している、システム導入、業務改善が進まない...そんな悩みをお持ちではありませんか?
ファンリピートのローコード開発支援サービスなら...
✓ 開発期間を最大70%短縮
✓ コストを従来の1/3に削減
✓ IT人材不足を解消
業界トップクラスの実績で、貴社のDX推進を加速します。
詳しくは、以下のリンクから無料相談か、こちらのリンクから資料請求をお申し込みください。専門のスタッフが貴社の課題に合わせた最適なソリューションをご提案いたします。
今すぐ無料相談を申し込む(所要時間30秒)

bubbleとは?

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

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

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

タブとは?

タブとは

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

実際の利用例

図1 厚生労働省のホームページ例

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

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

図2 Appleのホームページ例

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

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

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

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

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

  • タブを作成する(UIの調整)
図3 スマホ画面での完成例

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

図4 グループの配置

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

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

図5 グループの中身

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

図6 グループ化の方法

二つのエレメントを「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%

図7 アイコンの配置と選択

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

図8 テキストとグループの配置

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

図9 GroupのStyle編集

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

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

図10 各グループの関係

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

図11 バーを非表示に設定

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

図12 グループ内の間隔の設定

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

図13 グループの最小幅と最大幅の設定

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

図14 掲載内容をコピー&ペースト

次に各タブに対応する掲載内容について設定します。

既にある「Group Post Body」を「Body」内に2回コピー&ペーストし、それぞれ追加してグループの名前を「Group App Body」と「Group Fav Body」に変更します。

追加したグループも上記と同様にLayoutから「This elemnet is visible on the page load」のチェックを外します。

以上でUIの設定は完了です!

  • タブを作成する(Workflowの設定)

Workflowで設定すべきは2点です。

・タブが選択されている時にバーを表示し、選択されていないタブのバーを表示しない

・タブが選択されている時に対応する掲載内容を表示し、選択されていないタブの掲載内容を表示しない

図15 workflowへ遷移

「Group Postlist Tab」の「Start/Edit workflow」を選択することで、対象のエレメントが押下されたときのworkflowが設定できる。

図16 エレメントを表示する設定

ここで「Element Actions」から「Show」を選択します。

図17 表示させたいエレメントを選択

その後、Elementを「Group Postlist Tabbar」にします。ここではElementで選択されたものを画面に表示させることができます。

図18 エレメントを非表示にする設定

次に「Element Actions」から「Hide」を選択します。Elementを「Group Applist Tabbar」にすると、選択された画面を非表示にすることができます。

図19 表示、非表示させる設定例

赤い枠は表示、青い枠は非表示に関しての設定です。同様の操作を以下の様に各エレメントに適用させていきます。

表示:「Group Applist Tabbar」、「Group App Body」

非表示:「Group Postlist Tabbar」、「Group Favlist Tabbar」、「Group Post Body」、「Group Fav Body」

「Group Applist Tab」と「Group Favlist Tab」を押下する時にも同様の設定をします。以下を参考にして設定してくみてください。

図20 「Group Applist Tab」の設定例
図21 「Group Favlist Tab」の設定例

以上でworkflowの設定が完了です!

https://blogcontent202210.bubbleapps.io/version-test/home?debug_mode=true

こちらが私の作った画面のプレビュー画面なので、参考にしていただけると嬉しいです。

bubbleでタブの設定は可能!

以上でタブの設定が完了しました。

作成方法は簡単だったと思いますが、使い方によってはシステムの使いやすさが大きく変わります。また、その活用場面は多岐にわたります。

実際に手を動かして確認してもらえると更に理解が深まると思うので、ぜひお試しください。

メンバーを募集中!

当社ではお客様に向き合い、お客様の事業成功にコミットをできる仲間を募集しています。

正社員、インターンから副業まで、幅広く採用活動を進めております。プロジェクトマネージャーやシステムエンジニアとして当社のシステム開発業務に携わってみませんか?

当社と共に、業界トップを目指して挑戦したい方は未経験者から経験者まで広く募集しているので、ぜひエントリーをお待ちしています。

システム開発のよくある悩み事「時間」と「コスト」で諦めていませんか…?

システム開発の見積もりで、高額な費用や長期の開発期間に驚いた経験はありませんか?ファンリピートのローコード開発なら、従来の開発では実現できなかった低コスト・高品質・高速開発を同時に実現します。

ファンリピートなら、複雑なシステムも最短4週間で開発!

ファンリピートは、100社以上の開発実績を持つローコード開発のエキスパートです。新規サービス開発からDX推進まで、幅広い分野でお客様のビジネスを加速させます。

\どんなプロジェクトでもまずはご相談ください/
システム開発の無料相談はこちらから

  • URLをコピーしました!

この記事を書いた人

株式会社ファンリピートのアバター

株式会社ファンリピート

FRnoteは株式会社ファンリピートのメンバーによって運営されている社内ブログです。ノーコード・ローコードの技術ブログを始めとして、最新のIT技術、業務で役立つノウハウなど様々なトピックをまとめています。


目次
閉じる