【Bubble】ToolboxのServer scriptを使ってみる

今回はbuubleのプラグインToolboxのServer scriptを紹介します。

最近しっかりと調べるとbubbleでもできることは多いと感じています。
もちろんコードを書くよりは自由度は低いです。

しかし下のサイトがbubbleでできていると知って、やればできるのかと感じております。
ぜひのぞいてほしいです。

https://hackerhouse.world/

hackerhouse.world

日本でもWebサイト全体をbubbleで制作するというわけではありませんが、お問い合わせ画面や予約の一連の流れにおける画面でbubbleが使われるなど、簡単な機能の一部を置き換えるなどの流れがあるように感じます。簡単な機能をノーコードで開発することは、開発と修正の負担も小さくなるので賛成です。

今回はbuubleのプラグインToolboxのServer scriptを紹介します。

bubbleとは

https://bubble.io

bubble.io

ノーコード開発ツールの１つです。
通常アプリ開発をするには、フロントエンド言語（HTML、CSS,Javascriptなど）、バックエンド言語（PHP、Python、Rubyなど）、データベース設計、アーキテクチャなどの知識が必要となります。

ノーコード開発は上にあげた知識を完全に網羅しなくてもアプリ開発を行えることを目的としたツールです。Bubbleの他にも「Adalo」「Glide」などが挙げられます。

メリットは、１からコードを書いて開発するよりも短い時間で開発することができます。
デメリットとしては、自由自在に扱うにはある程度の知識が必要です。
また、Bubble開発で行き詰まった際に日本語で調べてもただのBubbleを紹介するサイトしかでてこない場合が多いです。

Bubble開発で行き詰まった際は英語で公式フォーラムを調べることをお勧めします。

Toolboxとは

Bubble Plugins | Build and extend apps without writing code

Browse and install plugins for to add functionality to your Bubble app like AI, charts, payment processing, integrations, and more without writing code.

bubble.io

Toolboxプラグインは、リストやスクリプトを簡単に使えるようになる便利なエレメントをまとめて追加できるプラグインです。追加できる機能を下に記します。
・List of Numbers
・Javascript to Bubble
・Expression
・List item Expression
・Run Javascript
・Server script

Javascript to BubbleとRun Javascriptの組み合わせの紹介などはよくありますが、このうちServer scriptの紹介が検索しても出てこなかったので、今回はServer scriptについて紹介します。

Server scriptとは

名前の通りサーバー側のスクリプト（Node.js）を書くことができます。Server scriptの使うメリットは、スクリプトを書くことでデータを操作できる点です。

もちろんBubbleはノーコードツールなのでワークフローやDo a search forのconstraintでコードを書かずにデータを操作することは可能です。

しかし複雑なことをしようとすると、なかなか難しくなるのがBubble。

今回は実際のケースと一緒に紹介します。

今回やりたかったこと

会員制のサイトをBubbleで構築しているのですが、salesforceとデータの連携をしたいという要件がでてきました。今回はsalesforceの詳細な説明は省きます。

会員登録時にsalesforceにも顧客を作成したいという要件で、まずは会員登録があるたびにsalesforceにAPIを使ってデータを投げていました。しかし、以下の2点の問題がありました。

①APIコール数制限
②APIコール時のユーザー側の待機時間

①に関して、これから顧客数が多くなったり、他にもデータ連携したい点などがあるときに問題になります。②の問題が深刻ですぐに対応する必要がありました。

上の問題に対して、深夜に1日のデータをまとめてAPIコールすることにしました。salesforceのREST APIでまとめてデータを送る際のフォーマットは以下です。

このフォーマットを簡単にbubbleで作成できたらいいのですが、”referenceId”の部分がデータの数に応じてref1、ref2….となっている部分が問題でした。

こんな時に「スクリプトかければ簡単に作成できるのにな….」と思っていしまいます。

この問題をToolboxプラグインのServer scriptを使用して解決します。

Server scriptの使い方

ワークフロー内で「Plugin」→「Server script」を選択すると以下の入力画面が出てきます。

それぞれの入力欄について紹介します。

ここでスクリプト内でどうやってthing1やThing list 1の値を取得するのか疑問がでてきます。

スクリプト内でデータを操作する

thing1やThing list 1の値は下のようにスクリプトを書くことで取得できます。

thing1 = properties.thing1;
thiglist1 = get_objects_from_ids(properties.thinglist1.get(0,properties.thinglist1.length()).map((x) => {return x.get("_id")}));

thing１はそのまま値が入っています。thinglist1に関しては実際に取得できる値を下に示します。デフォルトのfieldには頭にアンダースコアがあるようようなJSONオブジェクトを取得できます。

[{
  "age_number":23,
  "description_text":"私は日本語得意よ。\n丁寧に教えるよ。",
  "image_image":"//s3.amazonaws.com/appforest_uf/f1626329889371x883244590098766000/brog_profile1.jpg",
  "name_text":"Hanako Taro",
  "typeofuser_text":"teacher",
  "logged_in":true,
  "_id":"1626421739558x987949318325625000",
  "_type":"user"},
 {
  "age_number":34,
  "description_text":"5人くらい教えていました。実績は完璧です。",
  "image_image":"//s3.amazonaws.com/appforest_uf/f1626329889371x883244590098766000/brog_profile1.jpg",
  "name_text":"steph curry",
  "typeofuser_text":"teacher",
  "logged_in":true,
  "_id":"1626421847493x596044283295278400",
  "_type":"user"
 }
]

処理を書いて、最後にreturnする

今回は新規登録者を上で紹介したようなフォーマットにすることが目的です。実際のスクリプトを紹介します。thinglist1にはその1日で登録のあったユーザーのみデータを渡しています。

データの操作はjsonオブジェクトを操作するときと同様です。今回は取得したデータにmapを使って必要な値とインデックスを使って、新しいJSONオブジェクトを定義しています。

let obj = get_objects_from_ids(properties.thinglist1.get(0,properties.thinglist1.length()).map((x) => {return x.get("_id")}));
let result = obj.map(function(data, index){
return {
　"attributes" : {"type" : "Account", "referenceId" : "ref"+index},
　"LastName":data.last_name_text,
　"FirstName":data.first_name_text,
　"Onb_LastNameKana__pc":data.last_name_kana_text,
　"Onb_FirstNameKana__pc":data.first_name_kana_text,
　"PersonEmail":data.email,
　"PersonBirthdate":data.birthday1_date,
　"Onb_Sex__pc":(data.sex_number==1)?"男":(data.sex_number==2)?"女":"無回答",
　"Phone":data.phone_number_text,
　"PersonMailingPostalCode":data.postal_code_text,
　"PersonMailingState":data.prefecture_text,
　"PersonMailingCity":data.city_text,
　"PersonMailingStreet":data.street_text,
　"RecordTypeId":"012O0000000ZABqIAO",
　};
});
JSON.stringify(result);

最後にreturnするのを忘れないでください.
「return｛returnしたい値｝」でなはく「｛returnしたい値｝;」の形で入力して下さい。
またReturn typeで指定した型と一致するようにしてください。Server scriptが動かない場合はReturn typeで指定した型と一致していないことが多いです。今回はReturn typeをtextとしているので、JSON.stringifyを使って一致させています。

大切なことなのでもう1度かきます。

・「return｛returnしたい値｝」でなはく「｛returnしたい値｝;」の形で入力
・Return typeで指定した型と一致するようにする

Server scriptが動かない場合

Server scriptが動かない場合はエラーが起きています。エラーの確認は「Logs」→「Server logs」から確認できます。

まとめ

今回はbuubleのプラグインToolboxのServer scriptを紹介しました。スクリプトを書くようにデータを操作できるので、bubbleのデメリットである複雑なことをしようとすると、なかなか難しくなる点も少しは解消されるのではないでしょうか。

よくわからない点、相談があればFollow @halkumlmanにお願いします。