ノーコード PR

【Bubble】Toolboxプラグインの使い方をわかりやすく解説

bubble-toolbox
記事内に商品プロモーションを含む場合があります

Bubbleのプラグインの中でも人気上位であるToolboxですが、できることが多い反面、難易度が高いプラグインとも言えるでしょう。

とはいえ、Toolboxを使いこなせるようになれば、Bubbleでの開発の幅が広がること間違いなしなので習得必至のプラグインです。本記事ではそんなToolboxプラグインの使い方について解説していきたいと思います。

今すぐノーコード案件を探す!

【公式HP】https://crowdtech.jp/

  • 90%以上がフルリモート案件
  • 週1〜3日程度の副業向け案件が多い
  • 自身のライフスタイルに合った働き方ができる
  • エージェントによる手厚いサポートを受けることができる
  • 案件提案から契約締結、勤怠管理まで全てオンラインで完結

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

nocode-side-job-start
【ノーコードWeb制作】副業の始め方とおすすめの案件獲得サイト20選ノーコードツールを使ったWeb制作のスキルを活かして副業収入を得たい人向けに本記事では副業の始め方と週1,2日や土日リモートで働ける案件を扱うおすすめのサイトを現役エンジニア目線で厳選して紹介しております。...

Toolboxプラグインの概要

Toolbox

Toolboxプラグインは、リストやスクリプトを簡単に使えるようにする便利なエレメントをまとめて追加できるプラグインになります。追加できる機能は以下の通りです。

  • List of Numbers
  • Expression
  • Javascript to Bubble
  • List Item Expression
  • Run javascript
  • Server script

本記事では上記Toolboxの機能群の中でも特に利用頻度の高い「Javascript to Bubble」「Run javascript」「Expression」に絞って解説していきたいと思います。

【共通】Toolboxプラグインをインストール

Toolbox

Bubbleのエディタを開き、左側メニュー「Plugins」>「+Add plugins」をクリックします。検索窓に「Toolbox」と入力して表示されたプラグインをインストールしましょう。

Design画面のVisual Elementsに以下の項目が追加されていたらインストール完了です。

  • List of Numbers
  • Expression
  • Javascript to Bubble
  • List Item Expression

『Javascript to Bubble』と『Run javascript』の使い方

nocode-difinition

「Javascript to Bubble」は、JavaScriptの実行結果を受け取りBubbleのエレメントで使用できるようにする機能です。

「Run javascript」はWorkflowからJavaScriptを実行させる機能となります。

  • 「Javascript to Bubble」は、JavaScriptの実行結果を受け取りBubbleのエレメントで使用できるようにする機能。
  • 「Run javascript」はWorkflowからJavaScriptのプログラムを実行させる機能。

本章では「Run javascript」でWorkflowを実行し、「Javascript to Bubble」で実行結果を受け取り画面に表示するといった流れでToolboxの機能紹介をしたいと思います。

まずは、Designタブから「Javascript to Bubble」エレメントを配置してみましょう。

JStoBubble

各パラメータの概要は以下の通りです。

bubble_fn_suffix関数名の接尾辞を入力する。例えばaと入力すると、bubble_fn_aという名前の関数が作成されjavascriptを呼び出す準備が整う。
Trigger eventオンにすると関数が呼ばれた時にbubbleイベントが生成される。
Publish valueオンにすると関数の最初の引数が値としてBubbleに公開される。
Value typePublish valueのType。
Value is a listオンにすると関数パラメータが値のリストとして公開される。

今回の例ではJavaScriptで生成した日付をBubbleで受け取りたいので、Publish valueにチェックを入れてvalue typeはdateとします。今回の関数名はbubble_fn_date。

次に、適当なボタンを配置してワークフローを設定していきましょう。以下の画像のようにToolboxプラグインをインストールしていると、Plugins>Run Javascriptが表示されているはずなのでクリックします。

Run JavaScript

現在の日付を取得するスクリプトを記述して、先ほど定義した「bubble_fn_date」に値を渡しましょう。(以下の画像を参照)

Run JavaScript

これでスクリプトの実行結果が「Javascript to Bubble」に渡されたので、受け取った値を表示できます。「エレメント名’s value」としてあげることで表示可能です。

JStoBubble

Previewから画面を表示し、Run javascriptのワークフローを組んだボタンを押下してみましょう。現在時刻が表示されていれば成功です。

今回の例はかなりシンプルなものでしたが応用させることで、Bubbleをローコード化させることができるので試行錯誤しながら色々と試してみると良いかと思います。

Run javascriptでWorkflowからスクリプトを実行させることが可能。その値をJavascript to Bubbleで受け取りエレメントとして使用できる。

『Expression』の使い方

nocode-pic

お次はExpression機能です。Expression(式)は指定した式の値を返す機能となります。

試しにDesignタブからExpressionエレメントを配置してみましょう。(以下の画像参照)

Expression

各パラメータの説明は以下の通りです。

Expression式を記入する
Result type戻り値のタイプを指定する
Result is a list戻り値がリストの場合にチェックする

試しにInputから入力された値を式に当てはめる形で計算結果を出力してみましょう。

Input AとInput Bを用意してExpressionに「Input A’s value + Input B’s value」と入力します。なお、戻り値はExpression名’s valueで出力することができます。

Expression

PreviewからInputに値を入力し足し合わされた結果が表示されたら成功です。

Expression機能を使えば複雑な式をコードで書き、戻り値をBubbleで利用するといった処理が実装できる。

【Bubble】Toolboxプラグインの使い方|まとめ

bubble-toolbox

ここまでToolboxプラグインを利用して各種機能を埋め込むことで、Bubbleをローコード化する手順について解説してきました。

Toolboxを使いこなせるようになればBubbleでの開発の幅が広がること間違いなしなので本記事を取っ掛かりにToolboxを上手く利用していっていただければと思います。

ここまで記事を読んでいただきありがとうございました。当ブログでは他にもBubbleによるWebアプリ開発のTipsについて解説しているので、気になる記事がないか確認いただけると幸いです。

今すぐノーコード案件を探す!

【公式HP】https://crowdtech.jp/

  • 90%以上がフルリモート案件
  • 週1〜3日程度の副業向け案件が多い
  • 自身のライフスタイルに合った働き方ができる
  • エージェントによる手厚いサポートを受けることができる
  • 案件提案から契約締結、勤怠管理まで全てオンラインで完結

\ 最短60秒で登録可能! /
無料会員登録
案件を探す

bubble-box
【完全解説】Boxプラグインを用いてBubbleのストレージ容量を拡張する方法ノーコードツール「Bubble」のストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので...
stripe
【Bubble】Stripeプラグインを用いたクレカ決済の実装手順Bubbleで開発したWebアプリにStripeによる決済処理を導入するには?本記事ではStripeを活用した通常課金・返金処理、仮売上と請求確定、サブスクリプション処理とその解約処理の実装方法について解説しております。...
addtoany-share-buttons
【Bubble】AddtoAny Share Buttonsの使い方を徹底解説Bubbleで開発したWebアプリにSNS共有ボタンを設置するなら「AddtoAny Share Buttons」プラグインが便利でおすすめです。本記事ではそんなAddtoAny Share Buttonsの使い方について解説しております。...
nocode-side-job-start
【ノーコードWeb制作】副業の始め方とおすすめの案件獲得サイト20選ノーコードツールを使ったWeb制作のスキルを活かして副業収入を得たい人向けに本記事では副業の始め方と週1,2日や土日リモートで働ける案件を扱うおすすめのサイトを現役エンジニア目線で厳選して紹介しております。...
こちらの記事もおすすめ!

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です