【厳選】Bubbleのプラグイン15選を初心者向けに徹底解説！
「Bubbleで必須のプラグインが知りたい」「専門家のおすすめが知りたい」
そんな悩みを持つ方も多いのではないでしょうか。
本記事では、初心者におすすめのBubbleプラグインを15個に厳選してご紹介します。
ノーコードの正規代理店として国内トップクラスの技術力を誇るノクステックならではの情報を踏まえて詳しく解説します。
「ノクステック」では、1ヶ月以内(50~100万円)でのノーコードMVP開発を得意としております。
システム開発でお困りではありませんか？
下記のようなお悩みをお持ちではありませんか？
✅1ヶ月以内にリリースしたい
✅コミュニティ内で使用する学習システムを作りたい
✅マッチングサイトを作りたい
上記のようなお悩みがありましたら、お気軽にノクステックにご相談ください。
世界中でわずか数百人しか取得していないBubble認定資格を持つエキスパートが、直接サポートいたします。
本記事のまとめ
Bubbleでの開発時に必須のプラグインはAPI Connector、Toolbox、Classify、Stripe、Reload on updateです。そのほかにもBubbleには実装・デザインの幅を広げてくれるプラグインが数多く存在しています。
プラグイン使用時の注意点は、更新時期を確認することやプラグインを追加し過ぎないことがあります。
目次
Bubble初心者におすすめのプラグイン15選
必ず入れておきたいプラグイン5選
Bubbleで開発を行う場合、必ず入れておきたいプラグインは以下の5つです。
それぞれ詳しく解説します。
必須プラグイン1.API Connector
1つ目の必須プラグインは、API Connectorです。
API Connectorは、 Bubble以外のアプリケーションをAPIを使用することで連携できるプラグインです。
X(Twitter)やGoogleを使ったソーシャルログイン機能、決済機能の実装等で使用することが多いです。
初心者には少し難しい機能なので、以下の動画を参考にすると良いでしょう。
必須プラグイン2.Toolbox
2つ目の必須プラグインは、Toolboxです。
Toolboxは、JavaScriptのコードをbubbleで利用できるようになるプラグインです。
以下の4つのエレメントがまとめて提供されています。
- List of Numbers
- Expression
- List Item Expression
- Javascript to Bubble
また、カスタムされたJavaScriptを作成し、ワークフローとして利用することも可能です。
Toolboxを使用することで、bubble単体では難しい実装を可能にします。
必須プラグイン3.Classify
3つ目の必須プラグインは、Classifyです。
Classifyは、任意の要素にCSSのClass名を指定できるようになるプラグインです。
特定のページで同じ色のスタイルを複数個所で使用する場合、Bubbleに標準で搭載されているID AttrbuteのID名ではClassを指定することができないため、Classifyを使用します。
必須プラグイン4.Stripe
4つ目の必須プラグインは、Stripeです。
Stripeは、オンライン決済機能がbubbleで実装できるプラグインです。
以下のようなことを実現することができます。
- クレジットカードのオンライン決済
- サブスクリプションの設定
- クーポンやプロモーションコードでの割引 参考文章
Bubble内で使用する場合、Stripe側のアカウントを作成し、API Keyを取得する必要があります。
Bubble初心者には簡単ではないものの、セキュリティの観点からもStripeを使用して決済を実装することでリスクを抑えることができます。
必須プラグイン5.Reload on update
5つ目の必須プラグインは、Reload on updateです。
Reload on updateは、エディターでページを更新すると、クリックするまで待たずにプレビュー ページが自動的に再読み込みをするプラグインです。
要素を移動させるなどの修正を加えるとプレビューモードのリロード（再読み込み）が必要になりますが、変更が行われたときにプレビュー画面のリロードを自動で行います。
使用方法は、ページ更新時のリロードされるようにワークフローの「Click here to add an event…」からGeneral＞＞Page is loadedを選択してください。Page is loadedをクリックして「Click here to add an action…」をタップしてPlugins＞＞Auto reload page on updateを選択してください。
これでアプリの編集が行われたときに自動でプレビューのリロードが行われます。
ページ単位の設定のため1つのページに設定しても他のページには適応しないため注意が必要です。
実装の幅を広げてくれるプラグイン5選
Bubble実装の幅を広げてくれるプラグインは以下の5つです。
それぞれ詳しく解説します。
実装プラグイン1.Air Alert
1つ目の実装プラグインは、Air Alertです。
Air Alertは、手軽にシンプルかつオシャレなアラートを実装することができるプラグインです。
通知の種類は以下の通りです。
- 警告
- 成功
- エラー
- 情報
ワークフロータブから使用することができます。
実装プラグイン2.Reveal&Hide Password
2つ目の実装プラグインは、Reveal&Hide Passwordです。
Reveal&Hide Passwordは、パスワードの表示・非表示ができるプラグインです。
使用手順は以下の通りです。
- インストールをしてパスワードページにドラッグ＆ドロップで配置します
- インプットパスワードのID Attrbuteに例)pwdと入力
- インプットパスワードと表示と非表示のiconを同じグループに置く
- 表示と非表示のiconは、コンデイショナルで変更するように設定
- パスワード表示と非表示のiconをクリック→ワークフロー「Click here to add an action…」をタップしてElement Actions＞＞Toggle a RevealにID 例)pwdを入力
パスワード機能をリッチにすることができるため、興味がある方はご活用ください。
実装プラグイン3.Progress Bar
3つ目の実装プラグインは、Progress Barです。
Progress Barは、タスクの進行状況を示す単純な進行状況バーです。
使用方法はインストールして使用するページでドラッグ＆ドロップで配置して値と紐づけを行います。
シンプルであるものの、設定自体は容易と言えるでしょう。
実装プラグイン4.Chart Element
4つ目の実装プラグインは、Chart Elementです。
Chart Elementは、基本的なチャート(図表)が表現できるプラグインです。
機能数が少なく決して使い勝手が良いとは言えないものの、設定項目が少ないため初心者におすすめのプラグインです。
使用方法は、データベースに図表にする値を作成し、表示するエディターページのエレメント一覧の中に「Line/Bar Chart」を画面に配置します。
実装プラグイン5.AddToAny Share Buttons
5つ目の実装プラグインは、AddToAny Share Buttonsです。
AddToAny Share Buttonsは、SNS共有ができるプラグインです。
インストールしてエディターページに設置して共有したい箇所にチェックを入れることで、ソーシャルシェア機能を実装することができます。
デメリットは、サイズの変更ができないことです。
デザイン性を向上させるプラグイン5選
Bubbleでのデザイン性を向上させるプラグインは以下の5つです。
それぞれ詳しく解説します。
デザインプラグイン1.Ionic Element
1つ目のデザインプラグインは、Ionic Elementです。
Ionic Elementは、おしゃれなアイコンが使用できるプラグインです。
使用方法は簡単でインストールしてエディターページで、Visual ElementからIonic Elementをドラッグ＆ドロップで配置し、Icomを変更するだけです。
デザインプラグイン2.Slick Slideshow
2つ目のデザインプラグインは、Slick Slideshowです。
Slick Slideshowは、複数の画像をカルーセルスライドショーを表示するプラグインです。
使用方法は、インストールして表示するエディターページのVisual ElementからSlideshowをドラッグ＆ドロップで配置します。
スライドを自動と手動で切り替えたり、矢印ボタン・ナビゲーションドットを表示＆非表示することが可能です。
デザインプラグイン3.Rich Text Editer
3つ目のデザインプラグインは、Rich Text Editerです。
Rich Text Editorは、文字の色、大きさ、フォントを変えたり、画像を挿入したりと 文字に装飾できるエディターです。
使用方法は、インストールして実装するページに設置するだけです。
WordPressのCMSのような、入力画面を簡単に作ることができます。
デザインプラグイン4.Canvas UI Element
4つ目のデザインプラグインは、Canvas UI Elementです。
Canvas UI Elementsは、CheckboxやToggleなどを簡単に使用することができるプラグインです。
高いデザイン性を実現できるため、デザイン作成にかかる時間を短縮することが可能です。
Elementから画面上に配置し、データ設定をすることで使用することができます。
デザインプラグイン5.Lottie Animations Maintained
5つ目のデザインプラグインは、Lottie Animations Maintainedです。
Lottie Animations Maintainedは、アプリケーションに Lottie アニメーションを追加できるプラグインです。
ローディングアニメーションに良く使われており、豊富な種類から選べるのも魅力です。
使用方法は、インストールして表示したいページのVisual Elementsから”Lottie”をドラッグ＆ドロップで配置し、Lottie側からの表示したいアニメーションを選んで、リンクを設置するエディターページに貼るだけです。
プラグインを使用する際の注意点3選
プラグインを使用する際の注意点は以下の通りです。
それぞれ詳しく解説します。
注意点1.プラグインが更新されているかを確認する
1つ目の注意点は、プラグインが更新されているかを確認することです。
Bubbleにある「Plugins」タブを開き、インストール済みのプラグイン一覧が表示します。
各プラグインの右側に「Update」ボタンが表示されている場合、更新可能な状態であるため、更新を行う必要があります。
注意点2.プラグイン開発者やコミュニティ情報を確認する
2つ目の注意点は、プラグイン開発者やコミュニティ情報を確認することです。
プラグインを使用する際はプラグイン開発者やコミュニティ情報を確認することが大切です。
プラグインによっては、更新されていなかったり、情報が少ない場合もあるため注意が必要です。
注意点3.プラグインを追加し過ぎるとアプリが重くなる
3つ目の注意点は、プラグインを追加し過ぎるとアプリが重たくなることです。
プラグインは、それぞれ独自の処理を行います。プラグインが増えるほど、アプリ全体で処理すべき内容が増え、サーバーへの負荷が高まります。
またプラグインによっては、外部のAPIと連携したり、大量のデータを処理したりする場合があります。
これらがアプリの動作を遅らせる要因となります。
複数のプラグインが同じ要素を操作しようとしたり、互いに干渉し合うことで、予期せぬ動作を引き起こし、パフォーマンス低下に繋がる可能性があります。
アプリ開発のご相談はノクステックまで
本記事では、Bubbleのプラグイン15選の紹介と注意点を紹介しました。
プラグインを活用することで、実装の幅を大きく広げることが可能です。
その反面、プラグインの追加には注意点も複数存在します。
ノクステックは、国内有数のBubble正規代理店ですので自社での開発に限界を感じている方はぜひ一度弊社にご相談ください。
執筆者
古川大暉
ノーコード専門メディア「ノクステック」運営。Bubble事業の責任者を務める。Bubble公式の認定試験に日本で4番目に合格したノーコードスペシャリスト。