ノーコード情報満載!

  1. ノーコード
  2. 205 view

Bubbleのプラグインの使い方と作り方|開発の幅が広がり便利に

代表的なノーコード開発ツールであるBubble。デフォルトの状態でも自由度が高いツールですが、プラグインを導入することでさらに使い勝手がよくなります。Bubbleでの開発の幅を広げるために、プラグインの理解は必須です。こちらでは、Bubbleのプラグインに関する概要、多くのユーザーに利用されている代表的なプラグイン、プラグインの利用方法・開発方法などについてご紹介します。

Bubbleのプラグインとは

Bubbleのトップページ
画像:bubble.io

Bubbleの プラグイン とは、もともとはツールに搭載されていない拡張を行うことで、開発アプリに特別な機能を追加できる仕様のことです。これを利用することで、より複雑なアプリを開発できるようになります。

無料・有料のプラグインをそれぞれ利用できます。Bubble純正のプラグインのほか、ユーザー自身でプラグインを開発することも可能です。有料のプラグインについては、Bubbleの有料プランでなければ利用できません。

ヘッダーにバックグラウンドサービスを追加するプラグイン、APIからデータを取得するプラグイン、外部サービスに接続するアクションを追加するプラグインなどがあります。

Bubble自体がノーコード開発のなかでは少し難しいツールとして認識されていますが、拡張性を最大限活かし、優れたアプリを開発するためには、プラグインの理解が求められます。

どんなプラグインがある?

具体的にどのような プラグイン があるのでしょうか。以下では、Bubbleに追加できるプラグインの一例をご紹介します。

Ionic Elements

「Ionic Elements」は、パソコンで確認してもスマホで見ているような外観のページを作るためのプラグインです。「Ionic Toggle」「Ionic Checkbox」「Ionic Range」「Ionic Icon」という4つの要素を利用できます。スマホで利用する Webアプリ を開発する際には必須ともいわれ、Bubbleでは最も多く導入されているプラグインです。

API Connector

「API Connector」は、APIとBubbleを接続するためのプラグインです。汎用性が高く、個別にプラグインが用意されていない場合は、こちらを利用するのが一般的となっています。Bubble純正であることから信頼性が高く、人気のプラグインです。

Google Material Icons

「Google Material Icons」は、Googleが提供しているデザインシステム「Material」のアイコンをBubble上で利用できるプラグインです。良質なアイコンが豊富に提供されています。

Random User Generator

「Random User Generator」は、ランダムなユーザーデータを作成できるプラグインです。氏名、性別、郵便番号、電話番号、Emailアドレス、画像データなどをランダム、かつ高速で作成できます。テスト用に大量のユーザーデータが必要な場合に便利です。

プラグインの使い方

Bubbleでの プラグイン の使い方を簡単にご紹介します。

インストール

まずは、Bubbleにプラグインをインストールする必要があります。プラグインのインストールは、「Plugin」タブから可能です。クリック後に表示される「Add Plugins」では、プラグインの検索が可能です。任意のプラグインを選択し、インストールします。

プラグインの利用

プラグインがどのように機能するかは、インストールするプラグインによって異なります。具体的な使い方については、Webマニュアルやインターネット上の資料を確認してください。

エディターのタブにインストールしたプラグインに応じた項目が追加されるのが一般的です。

プラグインの開発方法

Bubbleでは、ユーザーが独自の プラグイン を開発することも可能です。

プラグインのライセンス

Bubbleのプラグインには以下の3種類のライセンスがあります。

  • Private:非公開のライセンス
  • Open source(MIT):無料のオープンソースライセンス
  • Commercial:有償公開の商用ライセンス

プラグインの開発

プラグイン の開発は「My plugins」の「NEW PLUGIN」をクリックして、起動するプラグインエディターから行います。

まず、プラグイン名を入力し、「CREATE」ボタンをクリックすると、プラグインエディターが起動し、開発の準備が整います。

プラグインエディターでは、以下の7つのタブを駆使し、プラグインを開発していきます。

  • General:名称、説明文などプラグインの基本的な情報を定義する
  • Shared:共通のHTMLヘッダーを定義する
  • API calls:APIの呼び出しを定義する
  • Elements:プラグインで使用するエレメントを作る
  • Actions:プラグイン用のアクションを作成する
  • Settings:ライセンス、バージョン管理を行う
  • Reviews:ユーザーから寄せられるレビューを確認する

いずれも、アプリ開発のエディターとよく似ているため、開発を行っている人であればスムーズに使えるでしょう。

まとめ

上記のような プラグイン により、Bubbleは拡張性に優れ、自由度の高いノーコード開発ツールとして評価されています。Bubbleで複雑な処理を行うアプリの開発をしたい場合、プラグインの理解が求められます。まずは、今回ご紹介したようなスタンダードなプラグインをインストールして使用感を確かめてみてはいかがでしょうか。慣れてきたら、オリジナルのプラグイン開発にも挑戦してみてください。

ノーコードの最近記事

  1. Autifyの概要からテスト自動化への導入事例までを徹底解説

  2. Platioはノーコードで作成できる便利な業務アプリ!機能や特徴を解説

  3. UNIFINITYで業務効率アップ!使い方とメリットやデメリット

  4. WebアプリとWebシステムの開発に役立つ!FastAPPの概要

  5. STORESの使い方を解説!初心者でも分かる基本や応用のまとめ

関連記事

PAGE TOP