ノーコード PR

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

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

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

とはいえ、Toolboxを使いこなせるようになれば、Bubbleでの開発の幅が広がること間違いなしなので習得必至のプラグインです。

Toolboxプラグインを使いこなせるようになればBubbleでの開発の幅が広がること間違いなし。

本記事ではそんなToolboxプラグインの使い方について解説していきたいと思います。

javascript-learning
【初心者向け】JavaScriptの効率的な学習方法について解説JavaScriptの効率的な学習方法を知りたい・・・。そんなWebエンジニアを目指されている方向けに本記事ではJavaScriptの効率的な学習方法をわかりやすくご紹介しております。...

※なお、Toolboxプラグインを使いこなす上でJavaScriptの知識は必要不可欠です。知識に不安のある方は上の記事を参考にJSの基礎を身につけておくと良いでしょう。

たろう
たろう
それではToolboxプラグインの使い方について解説していきたいと思います♪
nocode-sidejob
【土日で稼ぐ】ノーコードの副業におすすめの求人サイト7選ノーコードの副業におすすめの求人サイトは?本記事では土日を有効活用して自身のノーコードのスキルを用いて副業収入を得たいと考えている方向けにおすすめの求人サイトを紹介しております。...
nocode-freelance-agent
【2023年版】ノーコードエンジニアにおすすめのフリーランスエージェント20選ノーコードのスキルを身につけたが営業は苦手だし独立後に案件を獲得できるか不安。そんなノーコードエンジニア向けに本記事ではおすすめのフリーランスエージェントを厳選して紹介しております。...

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について解説しているので、気になる記事がないか確認いただけると幸いです。

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-sidejob
【土日で稼ぐ】ノーコードの副業におすすめの求人サイト7選ノーコードの副業におすすめの求人サイトは?本記事では土日を有効活用して自身のノーコードのスキルを用いて副業収入を得たいと考えている方向けにおすすめの求人サイトを紹介しております。...
nocode-freelance-agent
【2023年版】ノーコードエンジニアにおすすめのフリーランスエージェント20選ノーコードのスキルを身につけたが営業は苦手だし独立後に案件を獲得できるか不安。そんなノーコードエンジニア向けに本記事ではおすすめのフリーランスエージェントを厳選して紹介しております。...
こちらの記事もおすすめ!

COMMENT

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