bubble.ioの汎用性を高める

No code系のツールについては、エンジニアの方からは、汎用性が低いといった意見が聞かれることがあります。たしかにそういった一面もありますが、私は意外と汎用性が高いのではないか、と思っています。少なくとも、bubble.ioについては色々なことができそうです。

例えば、汎用性が問題となりそうな部分としては、WorkflowのActionの部分があると思います。そこで、「●●なとき××な動作をさせたいのに、××がActionの選択肢に無い!」というときにどうすればよいかという点について解説します。
※この記事はbubbleのForumのこのスレッドで私が学んだことを参考に書いております。

Connective Cloudで部分的にJavascriptでアクションを指定

WorkflowのActionに、求めている動作が無い場合、Pluginを使うことになります。Pluginの中でも、汎用性が高いのがConnective Cloudです。(かつては、plug bubbleと呼ばれていたみたいです。)
Connective Cloudは、ActionをJavascriptで書くことができるPluginです。
これが意外と簡単なんです。

例えば、ある条件のときにbuttonをクリックするというActionを指定したい場合を考えましょう(実際、Actionの中に、buttonをクリックさせるような指示はありません。)

①PluginでConnective Cloudをインストール

画像1

②ElementごとにIDを割り当てられるように設定
SettingsタブのGeneralタブの中の"Expose the option to add an ID attribute to HTML elements"にチェックを入れます。

画像2

③ElementにIDを割り当てる
Actionの指示を出したいElement(今回であればButton)のプロパティを開き、ID Attributeに、テキトーな名前をつけます。

画像3

④WorkflowのActionでRun Javascript / JQueryを選択・設定

画像4

指示したいActionをJavascript / JQueryで記載します。

画像5

今回は、提出ボタンをクリックしたいので、以下のように記載しました。

 document.getElementById("submitbutton").click()

ここで、"submitbutton"とは、私が③でElementに割り当てたID名です。

「Javascriptとか大変そう...」という方にもおススメ

「プログラミングを全くしなくていいのがNoCodeの魅力じゃなかったんかい!」という声が聞こえてきそうですが、私が思うに、コードを書くのはほとんど1行で済みます。なぜなら、Workflowで条件までは設定できますし、どのElementについてかはAttribute IDで設定できるわけなので、本当に関数をひとつ書けばよい、ということが多いと思います。
なので、Javascriptの中で、使いたい関数が何かを調べれば、あとは、
 document.getElementById("●●●●●").▲▲▲(■)
の▲▲▲(■)の部分に関数を見よう見まねで書けばよいわけです。

これは一例でして、他にもPluginを入れれば、汎用性はさらに高まると思います。今日も読んでいただき、ありがとうございました。


この記事が気に入ったらサポートをしてみませんか?