ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。Chatbot の運用実験は終了しました。ご協力いただいたみなさん、ありがとうございました。

Bubble開発の小技集!便利な機能3つ

f:id:yksmt:20200417125025p:plain

今回は、これから Bubbleで開発したい!もしくは、Bubble開発を始めたばかり!という方に、Bubble の小技集として、知っておくと便利な機能3つをご紹介したいと思います。

その1:セーブポイントを利用しよう!

Bubble には、便利なオートセーブ機能が付いていますが、試行錯誤して開発していると「やっぱり元の状態に戻したい」という時、ありませんか?そんな時に便利なのが「Create save point」機能です。セーブポイントを記録しておけば、履歴から自分の戻りたいポイントに戻ることが可能です。

セーブポイントは、右上の「Development」をクリックして「Create save point」から作成できます。

f:id:yksmt:20191004140117p:plain

セーブポイント名を入力して「Save」ボタンをクリックすれば登録完了です。

f:id:yksmt:20191004140250p:plain

セーブポイントを利用したい場合は「History」から「Revert to this time」で戻りたいポイントを選択しましょう。

f:id:yksmt:20191004140349p:plain

ただし、Freeプランでセーブポイントを利用する場合は、過去12時間以内という制限がありますので、ご注意くださいね。プランについては以下のURLから「Compare plans」をご参考ください。

bubble.io

その2:レイアウトには Arrange メニュー

Bubble でボタンやテキストボックスなどのエレメントを配置して、レイアウトを整えたい場合に便利なのが「Arrange」メニューです。「レイヤーを前に持ってきたい」や「中央に配置させたい」といった場合に使えます。先ほどの「Create save point」と同様、メニューはBubble の右上にあります。

f:id:yksmt:20191004141426p:plain

エレメントを選択した状態でメニューをクリックすると、レイアウトを整えることが可能です。

menu 詳細
Bring to front 前に持ってくる
Send to back 後ろに送る
Center horizontally 水平に中央揃え
Center vertically 垂直に中央揃え
Align left 左揃え
Align top 上揃え
Align bottom 下揃え
Align right 右揃え
Distribute horizontally 水平方向に配布する
Distribute vertically 垂直方向に配布する
Group elements in a Group グループ要素に含める
Ungroup these elements グループ解除

その3:プロパティウィンドウを固定する方法

Bubble では、エレメントを配置してプロパティを設定する際に、プロパティウィンドウを固定することが可能です。新たにエレメントを配置する度に、プロパティウィンドウが邪魔でズラして表示させるといった、煩わしさを解消してくれるので、知っておくと便利な機能です。

プロパティウィンドウを固定したいときは、「Grid & borders」で「Lock Property Editor」にチェックをすれば可能です。

f:id:yksmt:20191004143034p:plain

まとめ

いかがでしたか?今回は、Bubble の便利な機能についてご紹介しました。どれも基本的な操作の部分ですが、これから Bubble を始めよう!と考え中の方は、是非活用してみてくださいね。では、次回もどうぞお楽しみに!

参考URL

Bubble を始めたばかりという方には、以下の記事もおすすめです!

blog.nocodelab.jp