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