【Bubble】Bubbleでの超重要な機能「Workflow」について
こんにちは。NoCode Ninjaです。
今回は、Bubbleで非常に大事な機能「Workflow」について紹介します。
Bubbleは基本的には感覚的に作れる為、最初の感じを覚えるとわりとサクサク作れるようになり「いけるじゃ～ん♪」と進められるのですが、Workflowの部分に差し掛かった時に「・・・・。」となる可能性が非常に高いと見ています。
（以前の記事で触れましたが、筆者がそうでした・・笑）
そのWorkflowに、今回から少しずつ触れていきたいと思います。
Workflowとは
「動き」を「指示」
エンジニア界隈で言うと、htmlで骨組みを作り、cssで装飾をし、javascriptなどで動きをつけたり指示やコントロールをするというところになると思います。
Bubbleでは色々と感覚的にものを作って空のページに置いていきデザインするという作業を一通りすると思いますが、それらが動くように指示を与えるというのがこの「Workflow」になるというところでしょうか。
その指示は簡単なものから複雑にまで設定可能であり、情報量も非常に多いのでなかなか全てを説明するのはボリューミーなのですが、今回は基本かつシンプルな部分に絞って紹介します。
実装例
「ページへアクセス」という指示をする
例えばWebサイトで何かをクリックすると、別のページに飛んだりします。
これはボタンを置いて、「別のページに飛ぶ」という動きをつけることで成立します。
ボタンを置いて、これにWorkflowを設定してみましょう。
まずMy AppでAppを選び、左側のElementから「Button」を選択。
右側の任意の場所にボタンを設置します。
右側Edit画面に「Start/Edit workflow」がありますので、クリック。
すると、このページへ飛びます。
Workflowへ移りました。「When Button 別ページへ is clicked」という設定がされています。
その名の通り、「ボタン【別ページへ】をクリックした時に～をする」という設定です。
今見ている画面はこちらとほぼ同じものが出ていることと思います。
「Click here to add an action」をクリックし・・
「Button （別ページへ）をクリックすると、～ページへ飛ぶ」という意味になります。
この赤く囲まれた「Destination」は「行き先」です。ここでは今のApp内の別ページを意味しますので、まだ用意していない場合は作ってください。
このブログでは、前々回記事の
【Bubble】Slick Slideshowプラグインを使ってスライドショーを設置してみよう
の時に作ったページへ飛ぶように指定します。
行き先を指定したら、Previewで実際にページに飛ぶか確認しましょう。
きちんと飛びましたね。
このように、何をするのかの指示を与えるというのが「Workflow」です。
これは順番に重ねられますので、増やしていくことで色々な複雑な動きも可能になります。
例えばこうすると
「今のページを更新」してから「別ページに飛ぶ」という動作になります。
動作自体に全く意味はありませんが（笑）指示通りに動きます。
step～というように、必ず指定した順番通りになります。
「一つ一つを重ねていく」感じになるので、複数指示がある場合は順番もしっかり考えましょう。
念のためここまでの設定をした実際のページを用意しておくので、確認してみてください。
注意点
ここでの注意点ですが、「Go to page」に関してはこれ以降の指示は与えられません。エラーが出ます。
というのは、「別ページに飛んだ時点で、以降の指示はその飛んだ先のWorkflowでの指示」ということになりますよね。
飛んだ先での「When Page is loaded～」以降でのWorkflowで指示してあげましょう。
まとめ
以上、簡単な動作でしたがWorkflowの説明でした。
この手順でやってみると意外といけると感じてもらえたのではないでしょうか。
基本はこの繰り返しです。
ただ複雑になると意外と思った動きをしなかったり、指示が多すぎて重くなったり、そもそもの指示の仕方が良くなかったり・・やってみたら出てくる意外な問題というのもあったりするものです。
そこは数をこなして経験を積んでいきましょう。
筆者も日々精進です。
次回以降も、様々なWorkflow系の記事は続けていく予定です。
お楽しみに♪
それでは、また！
