ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

BubbleのToolboxプラグインを使ってみよう!〜その① List of Numbers

f:id:Yumi_o:20210610171455p:plain

こんにちは!

今回は、Bubble の人気プラグインのひとつ「Toolbox」プラグインについて紹介します。
Toolbox プラグインはとても便利なプラグインなのですが、機能が多く、覚えるのがちょっと大変なので、 何回かに分けてその機能を紹介していきます。

このプラグインの使い方を覚えると Bubble のスキルが 1ランクアップすること間違いなしですので、ぜひ読んでみてください!

Toolboxとは?

bubble.io

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

追加できる機能は以下の通り。

  • List of Numbers

  • Javascript to Bubble

  • Expression

  • List item Expression

  • Run Javascript

  • Server script

これらがどのような機能なのか、順に見ていきましょう!

事前準備

プラグインインストール

Bubbleで新規アプリを作成し、pluginsタブより「Add plugins」>「Toolbox」を検索します。

f:id:Yumi_o:20210603160538p:plain:h250

f:id:Yumi_o:20210603161951p:plain:w600

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

  • Expression

  • Javascript to Bubble

  • List Item Expression

  • List of Numbers

    f:id:Yumi_o:20210604095943p:plain:h500

List of Numbers

どんな機能?

指定したStart number(最初の数)、Length of list(リストの長さ)、Increment(増加数)のリストを自動生成します。

使ってみよう

Visual ElementsからList of Numbersを選択し、画面に配置します。
画面には表示されないので、場所はどこでも構いません。

f:id:Yumi_o:20210604100625p:plain:w450

次に、配置したエレメントのプロパティ画面から、前述の3つの項目(Start number, Length of list, Increment)を指定します。

f:id:Yumi_o:20210604101300p:plain

直接指定も可能ですが、今回は分かりやすくするために、インプットで指定した数値でリストを生成し、画面に表示するようにしてみます。

まずはInputを3つ用意し、それぞれをStart number, Length of list, Incrementとします。
入力する値は数値なので、Content formatはDecimalです。

f:id:Yumi_o:20210604101905p:plain:w500

Inputが作成できたら、それぞれをList of numbersのプロパティに設定します。

f:id:Yumi_o:20210604102340p:plain

これで、入力した値がList of numersエレメントに渡され、リストが生成されるようになりました。

続いて、生成したリストを表示するRepeating Groupを用意します。
ContainersからRepeating Groupを選択し、適当な場所に配置します。

f:id:Yumi_o:20210604102949p:plain

Data sourceを”ListofNumbers A's list”とします。
今回は、10行のリストを表示するように、Rowを10としています。

Repeating Groupの一行目にTextを用意し、Current cell's numberを表示するようにします。

f:id:Yumi_o:20210604103546p:plain

これで、生成されたリストがRepeating Groupに表示されるようになりました!

それでは、Previewから動作確認をしてみましょう!

Start number:1 Length of list:10 Increment:2

と入力すると、1から始まって、2ずつ加算されるリストが10行生成されました!

f:id:Yumi_o:20210604104033p:plain

ドロップダウンと繋げれば、ドロップダウンのリストとして使用することもできます。

f:id:Yumi_o:20210604104237p:plain

色々な数値を入力して、試してみてくださいね!

活用例

来店予約サイトなどの時刻や人数など、あらかじめ決まった数値をドロップダウンで表示したい時などには、活用できるのではないでしょうか。

下の例では、「時」「分」「人数」をList of Numbersで生成しています。

f:id:Yumi_o:20210610154959p:plain

f:id:Yumi_o:20210610155038p:plain

f:id:Yumi_o:20210610155048p:plain

List of Numbersを使用しない場合、ドロップダウンのプロパティに直接記入するか、Option Setsなどから読み込む必要がありますが、List of Numbersを使用すればそのような手間がかかりません。

みなさんのアプリにも、ぜひ活用してみてくださいね!

まとめ

いかがでしたでしょうか?
組み込み方次第で、色々な利用方法がありそうな機能ではないでしょうか。

ぜひ皆さんも、使ってみてください!

次回は、Toolbox プラグインの最重要機能である Run JavascriptJavascript to Bubbleを使ってみたいと思います。

お楽しみに!