ノーコード

【初心者向け】Bubbleの絶対に押さえておくべきプラグイン10選

nocode-bubble-plugins

「プラグインが沢山あってどれを使えばいいか分からない」「みんなどんなプラグインを使っているの?」このようなに思われているBubblerの方も多いのではないでしょうか?

そこで本記事ではbubbleでアプリ開発する際に利用頻度が高く個人的に押さえておくべきだと思うプラグインを独断と偏見で厳選し10個紹介していきたいと思います(^^)

用途に合わせてプラグインを導入することでbubbleによる開発の幅が格段に広がるはずです!
たろう
たろう
本記事で紹介するbubbleのプラグインについては最低限押さえておきましょう♪
nocode-side-job
【土日で稼ぐ】ノーコードの副業におすすめの求人サイト3選ノーコードの副業におすすめの求人サイトは?本記事では土日を有効活用して自身のノーコードのスキルを用いて副業収入を得たいと考えている方向けにおすすめの求人サイトを紹介しております。...
nocode-freelance-agent
【決定版】ノーコードエンジニアにおすすめのフリーランスエージェント5選ノーコードのスキルを身につけたが営業は苦手だし独立後に案件を獲得できるか不安。そんなノーコードエンジニア向けに本記事ではおすすめのフリーランスエージェントを厳選して紹介しております。...

【Bubble】絶対に押さえておくべきプラグイン10選

programming-job

早速、本章でbubbleの押さえておくべきプラグインを紹介していきたいと思います。

①Ionic Elements

Ionic Elements

Ionic Elementsは、端的にいうとオシャレなアイコン素材がまとめて提供されているプラグインです。bubbleのデフォルトで利用できるアイコンは線が太くてイけていないと思う方はインストールしてみてください。

使い方は非常に簡単で、プラグインをインストール後にDesignタブ上に「Ionic icon」エレメントが表示されるのでドラッグ&ドロップ。表示させたいアイコンを選択。以上です。

Ionic Elementsプラグインを導入することで今風なおしゃれアイコンを利用できるようになる。

 

②API Connector

API Connector

API Connectorは、Bubbleから外部APIに接続するためのプラグインになります。

Bubbleに限らずですが、Webアプリ開発を行う際に外部のAPIを利用できるようになると開発の幅が一気に広がることでしょう。

世の中で多くの人に利用されているサービスのほとんどはAPIを利用しているはずです。

【はじめの一歩】BubbleでAPI Connectorを使用して外部APIに接続してみようBubbleに限らずですが、Webアプリ開発を行う際に外部のAPIを利用できるようになると開発の幅が一気に広がります。 世の中で多...

なお、API Connectorプラグインを使用した外部APIへの接続方法については上の記事で解説しているため併せて確認してみてください。

本格的にBubbleでアプリを開発するのであれば、習得必至のプラグインかと思います。

API Connectorプラグインを導入することで外部APIに接続することができるようになる。

 

③Box

Box

Boxプラグインを利用することで、外部ストレージサービスであるBoxと連携させてファイルを直接Boxにアップロードさせることができます。

Bubbleのストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので容量に不安を抱える方も多いはずです。参照:bubble料金プラン

そのため、本番運用を行うのであればBoxと連携させてストレージ容量を拡張させておくことを強くおすすめしておきます。

bubble-box
【完全解説】Boxプラグインを用いてBubbleのストレージ容量を拡張する方法ノーコードツール「Bubble」のストレージ容量はFreeプランで0.5GB、Personalプランで10GBと、お世辞にも多くないので...

なお、Boxと連携してbubbleのストレージ容量を拡張させる方法については上の記事で詳しく解説しているので併せて確認してみてください。

Boxプラグインを利用することでbubbleの少ないストレージ容量を拡張することができる。

 

④Stripe

Stripe

Stripeプラグインを用いることでクレジットカードによる決済機能を簡単に導入可能です。

セキュリティ観点から、クレジットカード情報などはbubbleのデータベースに格納するのではなく、必ずStripeなどの信頼できるSaaSを利用して実装するようにしましょう。

stripe
【Bubble】Stripeプラグインを用いたクレカ決済の実装手順Bubbleで開発したWebアプリにStripeによる決済処理を導入するには?本記事ではStripeを活用した通常課金・返金処理、仮売上と請求確定、サブスクリプション処理とその解約処理の実装方法について解説しております。...

Stripeプラグインを用いた決済機能の実装手順については上の記事で解説しているため併せて確認してみてください。サブスクリプション決済の実装方法も解説しております(^^)

決済機能はStripeに任せるべし。Stripeプラグインを利用することで、簡単にbubbleで開発したアプリに決済機能を組み込むことができる。

 

⑤SendGrid

SendGrid

SendGridプラグインを利用することでクラウドベースのメール配信サービスSendGridと簡単に連携させることができます。

bubbleではデフォルトでメール送信機能が提供されてますが、残念ながらメール到達率が低かったり配信上限があったりと本番運用を想定した場合だと力不足だったりします。

メールが届かないことが原因でビジネスチャンスを逃さないようSendGridプラグインは導入しておくことを強くお勧めいたします。

sendgrid-bubble
【完全解説】BubbleとSendGridの連携によるメール送信Bubbleの「Send email」を使用していますか?使っている人の中にはメールが受信箱に到達せず迷惑メールに入ったりしてしまう点に...

プラグインを用いたbubbleとSendGridとの連携方法については上の記事で詳しく解説しているので併せて確認してみてください。

メールが届かないことが原因でビジネスチャンスを逃さないようSendGridプラグインは導入しておくべし。

 

⑥Google

Google

Googleによるソーシャルログイン機能を実装する上で必要になるプラグインです。

ソーシャルログインとは、ユーザーが使い慣れた既存のSNSアカウントを利用して、Webサイトやサービスにログインできる機能です。利用ユーザーの利便性を高めるためにも実装を検討しておきましょう。

bubble-google-auth
【5分でわかる】BubbleアプリにおけるGoogleソーシャルログイン機能の実装方法ソーシャルログインとは、ユーザーが使い慣れた既存のSNSアカウントを利用して、Webサイトやサービスにログインできる機能です。 利...

なお、Googleによるソーシャルログイン機能をbubbleアプリに組み込む手順は上の記事で解説しているので併せて確認してみてください。

ユーザーの利便性を高めるためにもGoogleをはじめとしたソーシャルログイン機能は実装しておくべし。

 

⑦reCAPTCHA

reCAPTCHA

reCAPTCHAとは、Googleが無料で提供しているBotと人間を判別するためのサービスで、「私はロボットではありません」という表示を一度は目にした経験があるでしょう。

BubbleではreCAPTCHAプラグインを用いることで、簡単にアプリに導入することができます。スパム対策として導入しておきましょう。

recaptcha-pic
【Bubble】reCAPTCHAプラグインにて「私はロボットではありません」を設置する方法reCAPTCHAプラグインを用いてBubbleで開発するアプリに「私はロボットではありません」を表示させる方法から使い方、メリットやデメリットについて解説しております。...

なお、bubbleで開発したアプリにreCAPTCHAを導入する手順、使い方については上の記事で解説しているので併せて確認してみてください。

reCAPTCHAを導入してスパム対策を行いましょう。ただし、ユーザビリティは損なわれる。

 

⑧Toolbox

Toolbox

Toolboxプラグインを用いることでJavaScriptのコードをbubbleで利用することができるようになります。つまり、Toolboxはbubbleをローコード化させるプラグインです。

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

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

bubble-toolbox
【Bubble】Toolboxプラグインの使い方をわかりやすく解説bubbleのプラグインの中でも特に人気の高いToolboxですが、できることが多い反面、難易度が高いプラグインといえます。本記事ではそんなToolboxプラグインの使い方について初学者向けに分かりやすく解説しております。...

Toolboxプラグインの概要や具体的な使い方については上の記事で解説しているので、気になる方は併せて確認してみてください。

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

 

⑨AddToAny Share Buttons

AddToAny Share Buttons

AddToAny Share Buttonsプラグインを利用することで、bubbleで開発したアプリに簡単にSNS共有ボタンを設置することができます。

開発したアプリをSNSで共有してもらいたい場合はボタンを設置しておくと良いでしょう。

addtoany-share-buttons
【Bubble】AddtoAny Share Buttonsの使い方を徹底解説Bubbleで開発したWebアプリにSNS共有ボタンを設置するなら「AddtoAny Share Buttons」プラグインが便利でおすすめです。本記事ではそんなAddtoAny Share Buttonsの使い方について解説しております。...

なお、AddtoAny Share Buttonsの使い方については上の記事で詳しく解説しているので、気になる方は併せて確認してみてください。

AddtoAny Share Buttonsプラグインを使えば、bubbleで開発したアプリに簡単にSNS共有ボタンを設置することができる。

 

⑩Progress Bar

Progress Bar

Progress Barプラグインを利用することで、タスクの何%が完了したかをユーザーに示すプログレスバーを簡単に表示させることができます。

使い方は非常にシンプルで基本的には「Percentage」と「Progress bar color」パラメータを指定してあげるのみです。

進捗状況をユーザーにわかりやすく伝えるためにも導入を検討してみてください(^^)

Progress Barプラグインを導入することでユーザーに進捗状況を視覚的にわかりやすく伝えることができるようになる。

 

【Bubble】プラグイン導入に際しての注意点

bubble-security

結論、使わないプラグインは本番運用前に必ずアンインストールしておきましょう。

インストールされているプラグインは、使用しているか否かに関わらず読み込みのリクエストが発生するため、(さほど大きくはないでしょうが)パフォーマンスに影響が出ます。

また、プラグインの脆弱性を突く攻撃をなるべく避けるためにも必要以上にプラグインをインストールしておくことはやめましょう。

パフォーマンス・セキュリティ観点から不要なプラグインはアンインストールしておくべし。

 

Bubbleの絶対に押さえておくべきプラグイン|まとめ

nocode-bubble-plugins

ここまでbubbleで開発するなら絶対に押さえておくべきプラグインの紹介とプラグイン導入に際しての注意点について解説してきました。

独断と偏見で選定しているものの、どのプラグインも利用頻度が高いものばかりなので本記事を取っ掛かりに学習していただければと思います。

たろう
たろう
ここまで記事を読んでいただきありがとうございました♪

当ブログでは他にもbubbleをはじめとしたノーコードについて解説した記事があるので、気になる記事がないか確認いただけると幸いです。

bubble-security
【ノーコード】Bubbleのセキュリティは弱い?懸念と5つの対策についてノーコードツール「Bubble」のセキュリティは弱い?本記事ではBubbleのセキュリティに対する懸念と最低限実施すべきセキュリティ対策について解説しております。...
bubble-sample
【Bubble】ノーコードツールの開発事例7選これからノーコードツール"Bubble"について学習される方やツールの導入を検討している企業担当者の中には以下のような疑問や考えを持つ方...
nocode-side-job
【土日で稼ぐ】ノーコードの副業におすすめの求人サイト3選ノーコードの副業におすすめの求人サイトは?本記事では土日を有効活用して自身のノーコードのスキルを用いて副業収入を得たいと考えている方向けにおすすめの求人サイトを紹介しております。...
nocode-freelance-agent
【決定版】ノーコードエンジニアにおすすめのフリーランスエージェント5選ノーコードのスキルを身につけたが営業は苦手だし独立後に案件を獲得できるか不安。そんなノーコードエンジニア向けに本記事ではおすすめのフリーランスエージェントを厳選して紹介しております。...
こちらの記事もおすすめ!

COMMENT

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