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をインストール
②ElementごとにIDを割り当てられるように設定
SettingsタブのGeneralタブの中の"Expose the option to add an ID attribute to HTML elements"にチェックを入れます。
③ElementにIDを割り当てる
Actionの指示を出したいElement(今回であればButton)のプロパティを開き、ID Attributeに、テキトーな名前をつけます。
④WorkflowのActionでRun Javascript / JQueryを選択・設定
指示したいActionをJavascript / JQueryで記載します。
今回は、提出ボタンをクリックしたいので、以下のように記載しました。
document.getElementById("submitbutton").click()
ここで、"submitbutton"とは、私が③でElementに割り当てたID名です。
「Javascriptとか大変そう...」という方にもおススメ
「プログラミングを全くしなくていいのがNoCodeの魅力じゃなかったんかい!」という声が聞こえてきそうですが、私が思うに、コードを書くのはほとんど1行で済みます。なぜなら、Workflowで条件までは設定できますし、どのElementについてかはAttribute IDで設定できるわけなので、本当に関数をひとつ書けばよい、ということが多いと思います。
なので、Javascriptの中で、使いたい関数が何かを調べれば、あとは、
document.getElementById("●●●●●").▲▲▲(■)
の▲▲▲(■)の部分に関数を見よう見まねで書けばよいわけです。
これは一例でして、他にもPluginを入れれば、汎用性はさらに高まると思います。今日も読んでいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?