Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【Bubble】Workflowの基本設定方法

More than 1 year has passed since last update.

NoCodeツール、BubbleでのWorkflow。
プロダクトを作る上で欠かせない重要項目なので紹介&記録しておきます。

概要

Bubbleでは、あらかじめ用意されたElement(textやimage、inputなど)をページに直接ドラッグ&ドロップして見た目を作っていきます。
そこから動きをつけていきますが、これらがWorkflowの設定によるものです。
基本的な動きさえ把握出来れば、応用を重ねていくだけになります。
今回は実例も交えつつ掲載しておきます。

 1、Elementを設置

左側のElementから「Button」を選択。

右側の任意の場所にドラッグ&ドロップでボタンを設置。

image.png

ボタンを置いただけでは当然動かないので、これにWorkflowを設定。

 2、Workflowを設定

Edit画面「Start/Edit workflow」をクリック。

image.png

「When Button 別ページへ is clicked」→「Click here to add an action」をクリック。

image.png

「Navigation」→「Go to page」

image.png

Destination(赤)で、ページ指定(例:indexなど)
これで、「Buttonクリックによりindexページへジャンプ」するWorkflow設定完了です。

 3、その他のWorkflow

Element Actions

image.png

Elementを出したり消したり、動きをつけます。
いくつかあるのでご紹介。

Show

普段はこちらが使用頻度高め。
純粋な「表示させる、動かす」です。
image.png

Hide

「Hideする(終了させる)」です。inputやPopupなどはある意味ShowとHideがセットになります。
image.png

Toggle

「見えているものを隠し、隠しているものを見えるようにする」です。
image.png

Animate

「動きをつける」Showに置き換えて使うことが多いです。
image.png

こちらもまた種類が多いので以下に記載します。

 「Callout」シリーズ

BounceやFlashなど各種動きが用意されていますので是非直接確認してみてください。
image.png

 「Transition」シリーズ

こちらも是非直接確認してみてください。
image.png
image.png
image.png
image.png
image.png

試しに4種類ほど用意。

4つをGroup化し、Groupの「This page is visible on page load」のチェックを外す
When Page is loaded→Animate Group A「Transition Fadein」→「Define a custom duration」をチェック→3000ms
Button「動きます1」clicked→Animate「Callout Shake」
Button「動きます2」clicked→Animate「FlipYOut」
Button「動きます3」clicked→Animate「Transition BounceOutIn」
Button「動きます4」clicked→Animate「Transition Perspective LeftIn」

このように設定してみました。
https://nocodebank.bubbleapps.io/version-test/element

Scroll to

「スクロールダウンの設定」です。

Offsetで値を設定できますが、スクロールアップは出来ないようです。(マイナス-も不可でした)
image.png

上記のURLと同じですが5つ目のButtonを設置していますので、どうぞご覧ください。
https://nocodebank.bubbleapps.io/version-test/element

以上、Element Actionsの説明でした。

アカウント関連

image.png

データベース関連

image.png

これらは別記事にて。
その他Email関連、決済など。
プラグインも増やせるのでバリエーションはまだまだ多数。
勿論複数重ねることも可能です。

まとめ

エンジニアの方なら触ればすぐに慣れると思います。
直感的に選んでいけば徐々に便利さを実感出来るのでは。
と同時に、Bubble作法のところでイメージ通りに動かせない歯がゆさも感じるかもです。
とはいえ、それを踏まえてもNoCodeのメリットを上手に使うことは価値があるかと。
慣れれば早い。本当に早いです。

NoCodeNinja
No Code情報を発信中。NoCodeの紹介&求人サイト「NoCodeBank」運営。 Youtube(https://www.youtube.com/channel/UCZg4yOkPIfbSc3f6FVS1x_g) はてなブログ(https://nocodejp.hatenablog.com/) note(https://note.com/nocodeninja)
https://nocodebank.bubbleapps.io/
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away