[BUBBLE]グループの高さを画面サイズに合わせて動的に設定する方法

みなさんこんにちは! Ryoです!

普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。

今回は以下のように、グループの高さを画面幅に合わせて動的に設定する方法ついて解説していきたいと思います。

Bubbleは基本的に横幅のレスポンシブを整える方法はいくつかあるのですが、縦幅を整える方法があまりありませんでした。
なので今回の記事を読むことによって、縦幅のレスポンシブもBubbleで扱えるようになります。

では、いきましょう。


プラグインをインストール

まず、Pluginsタブのところから[Toolbox]と検索します。

すると、以下の画像のようなプラグインが出てくるのでインストールします。

ToolboxをインストールすることによってBubbleの内部でJavaScriptを扱うことができるようになります。

JavaScriptと言っても、こちらでコードは用意しているのでご安心ください。


エレメントの設定

次に、Groupエレメントを設置していきます。
以下の画像のように真ん中上部に設置しましょう。

そして、動的な変化を分かりやすくするためにBackground colorに色を指定して背景に色をつけます。
色はなんでも大丈夫です。

今回の方法ではFloating Groupには対応していないので、普通のGroupを使用してください。

次に、HTMLエレメントを指定し先程設置したGroupの中に設置します。
Groupの中であればサイズも場所も適当で大丈夫です。

そして、HTMLの部分に

<div id="anchor"></div>

と上記のコードを入力します。


ワークフローの設定

次にワークフローを設定していきます。

Workflowタブに移動して、

[Click here to add an event…]→[General]→[Page is loaded]

と選択します。そして、

[Click here to add an action…]→[Plugins]→[Run JavaScript]

と選択します。

Run JavaScriptの部分には、以下のコードを入力します。

$(document).ready(function(){ $("#anchor").parents("div.bubble-element.Group").css("height","50vh"); $(".main-page").css("height","100vh") });

今回はGroupエレメントのvhGを50%にしているため、常に画面の大きさの半分の縦幅でGroupエレメントの高さが保たれるようになっています。

パーセンテージを20%にしたい場合は、[50vh]の部分を[20vh]にすれば大丈夫です。

ちなみにvhとは[Viewport Height]の略でこれを利用すると、現在のディスプレイの画面の高さを取得しその高さの割合でエレメントの高さを調整することができます。

これで完成です。

では、プレビューしてみましょう。

上手くいっていれば以下の動画のようになっているはずです。

20%で設定した場合は、以下のようになっているはずです。


あとがき

いかがだったでしょうか?

今回はJavaScriptを使いましたが意外と簡単だったのではないでしょうか?

NoCodeでYescodeを使うとなるとネガティブな印象を持つ人が多いと思います。しかし、今後コピペするだけでいいような記事をどんどん出していくのでぜひJavaScriptも進んで使ってみてほしいと思います。

今後もこんなプラグインの使い方や応用方法、Bubbleの知っておくと便利な情報などを発信していますのでぜひ他の記事も読んでみてください。
ためになった方はTwitterやFacebookなどで拡散お願いいたします。

それではまた次回の記事でお会いしましょう!!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次