この記事では、Bubbleの「プラグインエディタ」の使い方をタブごとにご紹介します。
プラグインはBubbleアプリに搭載することでアプリの機能を拡張してくれるものです。Bubbleユーザーなら誰でも自分で作成して他のユーザーに提供することができます。プラグインエディタはプラグインを作成するためのエディタで、Bubbleアプリエディタと同様複数のタブで構成されています。慣れるまでは操作に困ることも多いかと思いますので、プラグインを初めて作成する方、作成に行き詰って困っている方はぜひ本記事をご参考ください。
プラグインエディタの開き方
Bubbleにログインし、画面左のナビゲーションメニュー「Plugins」を開きます。
自分が作成したプラグインの一覧画面が表示されます。
プラグインを新規作成してエディタを確認します。右上の「Create a plugin」をクリックします。プラグインの名前を設定するポップアップが表示されるので、名前を入力して「Create plugin」をクリックします。
作成した「TestPlugin」のエディタが開きました。
プラグインエディタの説明
ナビゲーションメニューから分かるように、プラグインエディタには7つのタブがあります。
ここからは、プラグインエディタの7タブをタブごとに説明していきます。
General
まずはGeneralタブをご紹介します。Generalタブでは、プラグインの名前や説明、カテゴリーなど、主にプラグインページに表示されるプラグインの基本情報を設定します。
Generalタブの詳細
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | Public name | プラグインの利用者向けに表示されるプラグイン名。 |
| 2 | Public logo | Public name同様、利用者向けに表示されるプラグインロゴ。画像をアップロードできます。 |
| 3 | Description | プラグインの説明・概要。プラグインページでは「Details」欄の最上部に表示されます。 |
| 4 | Service URL | プラグインの提供元のサービスURL等。プラグインページでは「Links」欄に表示されます。 |
| 5 | Instructions | プラグインの導入手順・使い方。プラグインページでは「Instructions」欄に表示されます。 |
| 6 | Demo page (run mode Bubble app) | プラグインのデモページのURL。プラグインページでは表示されません。 |
| 7 | Public categories | プラグインのカテゴリー。プラグイン検索時のフィルター結果に影響します。プラグインページでは「Categories」欄に表示されます。 |
見え方の確認：プラグインページ
では、実際のプラグインページでの見え方を確認してみます。下記はノーコードラボが作成・提供しているプラグイン「Simple progress bar」の実際のプラグインページです。
下記の画像中の番号はGeneralタブの詳細紹介画像の番号と対応しています。
Typesの項目はプラグインの内容から自動で設定されるようです。
なお、プラグインページを公開・閲覧するには、プラグインをSettingsタブからPrivate以外で公開し、bubble.io/accountで販売者情報の必須項目を設定する必要があります。
Shared
sharedタブでは、共有HTMLヘッダーやキー、アセットなどの技術的な設定を行います。
Sharedタブの詳細
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | Bubble Plugin API Version | プラグインで使用するBubble APIのバージョンを設定します。バージョン変更に伴いサーバーサイドアクションの修正が必要になる場合があるので、変更には注意が必要です。 |
| 2 | This Plugin uses jQuery 3 | プラグインでjQuery3を使用するかを設定します。チェックするとプラグインでjQuery 3を利用できるようになります。 |
| 3 | HTML Header | プラグインを使用しているアプリで共通して使いたいHTMLヘッダーを設定します。プラグインを使用している全アプリの全ページに挿入されます。<script>、<meta>、<link>タグが有効です。コード中で_*_を使用して動的な値を挿入できるキーを設定でき、設定したキーはヘッダー入力部の下部に表示されます（No. 3'）。キーの値は各ユーザーがPluginsタブで設定します。 |
| 4 | Additional keys | 追加でキーを設定します。このキーはElementやActionで使用される関数に送信されます。新しいキーは「Add key」をクリックして追加できます。キーの値は各ユーザーがPluginsタブで設定します。なお、APIで使用するキーはAPI callsタブでcallごとに設定できます。 |
| 5 | shared assets and resources | 共有アセットとリソース。プラグインの実装に必要な画像、CSSファイル、JSファイルをここでアップロードすることで、BubbleのCDNを通して高速にアクセスすることができます。新しいアセットは「Save asset」をクリックして追加できます。アップロードしたURLをコードで使用することでアセットにアクセスできます。 |
見え方の確認：アプリエディタ>Pluginsタブ
設定した各種キーは、BubbleアプリエディタのPluginsタブに下記のように反映されます。下記の画像中の番号はSharedタブの詳細紹介画像の番号と対応しています。
API calls
API callsタブでは、プラグインで実行するAPI callを設定します。
最初にAPI callsタブを開くと下記のような画面が表示されるので、「Add an API connection」をクリックしてcallを新規で作成します。
API callsタブの詳細
Bubbleプラグイン「API Connector」とほぼ同じ使い方のため、詳細な説明は割愛します。下記ではAPI connectorと異なる部分をピックアップして紹介します。
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | 公開設定 | ヘッダー・パラメータの値の公開設定を行います。共有ヘッダー・パラメータはHidden、Secretから、Callヘッダー・パラメータはPublic、Hidden、Secretから選択できます。Hiddenに設定するとコード内に組み込まれ、プラグインのユーザーに見えたり入力させることはありません。 |
| 2 | ドキュメンテーション | パラメータのドキュメントやAPIのドキュメントリンクを設定できます。パラメータを設定するときのヒントや、API提供元のドキュメンテーションのURLをオプションで設定します。 |
見え方の確認：アプリエディタ>Pluginsタブ
設定したヘッダーキーとAPIドキュメントリンクはPluginsタブに下記のように反映されます。
CallのパラメータキーはWorkflowタブ>ActionエディタやDesignタブ>プロパティエディタの入力欄で設定できます。
Elements
Elementsタブでは、BubbleアプリのDesignタブでページに配置して使用するElementを作成します。ページに配置後、Elementのプロパティエディタでカスタマイズする項目をここで設定します。
まずはElementsタブの画面左にあるナビゲーションバーを確認します。
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | 全てのElementとその設定項目 | ここに作成したElementが表示されます。上記の画像では「TEST」がElement名で、下部に表示されているのがElementの設定項目です。 |
| 2 | Add a new elementボタン | 新しいElementを追加します。ここで追加したElementがNo. 1に表示されます。 |
| 3 | テストアプリ設定 | テスト用アプリで作成中のプラグインのインストール・更新を行います。インストール・更新したいアプリ名を入力ボックスに入力して「Go to test app」をクリックします。 |
次に、詳細な設定内容を確認していきます。まずはElementを作成しましょう。「Add a new element」をクリックして、Elementの名前設定ポップアップで名前を設定したら「Okay」をクリックします。
画面左のナビゲーションバーに「TEST Element」が表示されました。
設定内容の詳細を確認していきます。Elementsタブは設定項目数が多いので下記の3つに分けてご紹介していきます。
- 「General Properties」～「Fields」
- 「Exposed states」～「Element actions - triggered in workflows」
- 「Element code」
Elementsタブの詳細
1.「General Properties」～「Fields」
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | Name | Element名。Elementを名前を付けて新規作成した後、ここで編集することもできます。 |
| 2 | Category | 作成したElementが、Visual ElementsかInput formsどちらかを設定します。Designタブの表示場所に関連します。 |
| 3 | Icon | Designタブで表示されるアイコンを選択します。 |
| 4 | Resizable | チェックするとプロパティエディタ>Layoutタブでwidth/heightを設定できるようになります。 |
| 5 | Responsive | チェックするとプロパティエディタ>Layoutタブでmin/max width、min/max heightを設定できるようになります。 |
| 6 | Background | チェックするとプロパティエディタ>AppearanceタブでBackground styleを設定できるようになります。 |
| 7 | Borders | チェックするとプロパティエディタ>AppearanceタブでBorderに関する設定ができるようになります。 |
| 8 | Padding | チェックするとプロパティエディタ>AppearanceタブでPaddingを設定できるようになります。 |
| 9 | Box shadow | チェックするとプロパティエディタ>AppearanceタブでShadow styleを設定できるようになります。 |
| 10 | Font style | チェックするとプロパティエディタ>AppearanceタブでFontを設定できるようになります。 |
| 11 | This element can fit width to content | チェックするとプロパティエディタ>Layoutでfit width to cntentを設定できるようになります。本項を設定するにはNo.4 ResizableとNo.5 Responsiveをチェックする必要があります。 |
| 12 | This element can fit height to content | チェックするとプロパティエディタ>Layoutでfit height to cntentを設定できるようになります。本項を設定するにはNo.4 ResizableとNo.5 Responsiveをチェックする必要があります。 |
| 13 | Support hovered and pressed states | チェックするとプロパティエディタ>ConditionalのStatesでis/isn't hovered、is/isn't pressedを選択できるようになります。 |
| 14 | Support standard visible property | チェックするとプロパティエディタ>LayoutでThis element is visible on page loadを設定できるようになります。 |
| 15 | Support uploading large files: expose max file size and upload verification. | チェックするとプロパティエディタ>AppearanceでMax file size (MB)とfile uploads enabledを設定できるようになります。 |
| 16 | Support autobinding on the parent group's or page's thing | チェックするとプロパティエディタ>Appearanceでenable auto-binding on parent element's thingを設定できるようになります。Modify fields with typeで設定したタイプのVisual elementまたはページが本エレメントのParentとして必要になります。 |
| 17 | Default dimensions | No.4 Resizableをチェックしていないとき、ここで設定したサイズがElementの固定サイズになります。 |
| 18 | Fields | ここで設定したFieldの値を、プロパティエディタ>Appearanceで設定できるようになります。「New field」欄でField名を設定して「Create new field」をクリックするとFieldが追加されます。 |
2.「Exposed states」～「Element actions - triggered in workflows」
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | Exposed states | Stateを定義します。Elementにデータを持たせたいときに作成します。作成したStateはWorkflowタブ>Actionエディタや、Designタブ>プロパティエディタ>Appearance/Conditionalで使用できます。Stateがいつどのように公開されるかを、下部の「element code」欄で設定する必要があります。 |
| 2 | Events | WorkflowのトリガーEvent>Elementsで選択できるEventを定義します。下部の「element code」欄で、このイベントがいつトリガーされるかを定義する必要があります。 |
| 3 | Element actions - triggered in workflows | Workflow>Action>Element Actionsで利用できるActionを定義します。Actionエディタで設定するFieldは「New field」ボタンをクリックして複数作成できます。 |
3.「Element code」
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | Header | Elementを配置したページに適用されるHeaderを設定します。JSやCSSを追加するのに便利です。 |
| 2 | Function initialize |
Elementを初期化するコードを設定します。 |
| 3 | function update |
Elementを更新するコードを設定します。 |
| 4 | Function preview |
Elementの変更内容を事前に確認するためのコードを設定します。 |
| 5 | Function reset |
ElementでリセットActionを実行するコードを設定します。「Reset relevant inputs」や「Reset Group」ActionをこのElementに実装したいとき、コード入力欄上部にある「Add a reset function...」をチェックすると入力欄が表示されます。 |
| 6 | Function initializeState_STATE |
「Exposed states」で設定したStateの初期値を返すコードを設定します。このコードはElementが作成されるたびに呼び出されます。例ではStateSTATEのコードを要求されています。 |
| 7 | Function is_clicked |
「Element actions - triggered in workflows」で設定したActionが実行されるたびに呼び出されるコードを設定します。例ではActionis clickedのコードを要求されています。 |
Element codeはJSで記述するようにしましょう。
見え方の確認：Workflowタブ
作成したEventとELement ActionはWorkflowタブに下記のように反映されます。
ナビゲーションメニューの「Go to test app」をクリックし、テストアプリのDesignタブを開きます。Visual elements一覧に表示されている「TEST Element (testing)」をページ上に配置し、Workflowタブを開きます。下記の通り、EventとELement Actionが反映されています。
Actions
Actionsタブでは、WorkflowタブでWorkflowのActionとして実装できるActionを設定します。
まずはActionsタブの画面左にあるナビゲーションバーを確認します。ナビゲーションバーはElementsタブのナビゲーションバーと同じ構成になっています。なお、下記は「Action1」をすでに作成している状態です。
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | 全てのActionとその設定項目 | ここに作成したActionが表示されます。上記の画像では「Action1」がAction名で、その下に表示されているのがActionの設定項目です。 |
| 2 | Add a new actionボタン | 新しいActionを追加します。ここで追加したActionがNo. 1に表示されます。 |
| 3 | テストアプリ設定 | テスト用アプリで作成中のプラグインのインストール・更新を行います。インストール・更新したいアプリ名を入力ボックスに入力して「Go to test app」をクリックします。 |
次に、Actionごとの設定内容を確認していきます。まずはActionを作成しましょう。「Add a new action」をクリックして、表示されるポップアップでAction名を設定したら「Okay」をクリックします。
ナビゲーションバーに作成したActionが追加されます。Action名「Acion1」をクリックすると、Action1の設定画面が開きます。
Actionsタブの詳細
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | General properties | 作成したActionの概要を設定します。Action typeとCategoryについては下記でご紹介します。 |
| 2 | Fields | Actionエディタで設定できるFieldの概要を設定します。入力欄にField名を入力し、「Create new field」をクリックして新しいFieldを追加できます。 |
| 3 | Returned values | Workflowの後続のActionに渡す値（JSONオブジェクト）を設定できます。Returned valueはNo. 1でAction typeをServer sideに設定したときに利用できます。 |
| 4 | Action code | 本Actionで実行するコードを記述します。Action typeにより、関数run_serverまたはrun_clientをここで定義する必要があります。 |
Action type
Action typeには下記の2種類があります。
- Client side…Bubbleアプリを使用しているクライアント上で実行されるAtion。ページの操作等を実行します。オプションセットを取得できます。本タイプのアクションはWorkflowタブで実装できます。
- Server side…Bubbleサーバーで実行されるAction。Workflowの後続のActionで使用できるデータを応答として返すことができます（「Returned value」で設定）。本タイプのアクションはWorkflowタブだけでなくBackend workflowでも実装できます。
Category
Categroyは下記の4種類があります。Actionの選択ウィンドウでどのカテゴリーのActionとして表示されるかを決定します。
- Generic plugin…汎用的なプラグインAction。Actionの選択ウィンドウでは「Plugins」（画像のNo. 1）配下に表示されます。
- Data (things)…データに関するAction。Actionの選択ウィンドウでは「Data (things)」（画像のNo. 2）配下に表示されます。
- Analytics…分析に関するAction。Actionの選択ウィンドウでは「Analytics」（画像のNo. 3）配下に表示されます。
- Payments…支払いに関するAction。Actionの選択ウィンドウでは「Payment」（画像のNo. 4）配下に表示されます。
見え方の確認：Workflowタブ
「Go to test app」をクリックしてプラグインを更新し、テストアプリのWorkflowタブを開きます。適当にEventを追加して新規Workflowを作成したら、Step1をクリックしてActionの選択ウィンドウを開き、例で選択したAction Type「Payment」>Action1 (testing)を選択します。
Actionエディタを開くと、設定したFieldやドキュメンテーションが確認できます。
Settings
Settingsタブでは、プラグインの公開や公開に必要な設定、アップデートやバグの修正などを通知するための設定を行います。
Settingsタブの詳細
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | テストアプリ | 作成中のプラグインを試すBubbleアプリを設定します。プラグインの試行は検証環境で行い、本番環境・専用クラスタでは行わないようにしましょう。ここで入力したアプリにプラグインを反映させるには、Elements/Actionsタブ>ナビゲーションバー>テストアプリ設定>「Go to test app」をクリックする必要があります。 |
| 2 | ライセンス種別 | プラグインのライセンス種別をPrivate、Open source (MIT)、Commercialから選択します。プラグイン種別および価格設定については下記で詳しく紹介しています。 |
| 3 | 使用を許可するアプリ | このプラグインを使用できるアプリを設定できます。特定のアプリで無料で使用できるようにしたい場合、ここでアプリを設定します。入力欄に許可するアプリ名を入力し、「Authorize」ボタンをクリックします。ライセンス種別をPrivateまたはCommercialに設定すると表示されます。Commercialに設定している場合、ここで設定したアプリはプラグインを無料で使用できます。 |
| 4 | 公開ボタン | プラグインを公開・変更するボタンです。プラグインの作成・変更が完了したらこのボタンをクリックしてプラグインを公開します。クリックするとプラグインの概要を登録するポップアップが表示されるので、概要を入力して公開します。 |
| 5 | 変更・公開履歴 | プラグインを公開後、公開・変更履歴が表示されます。画像では、ノーコードラボのプラグインSimple progress barの変更・公開履歴を一部抜粋したものを例として載せています。 |
| 6 | GitHub同期 | BubbleアカウントとGitHubアカウントを同期することで、プラグインのコードをGitHubと同期できます。アカウントの同期はBubbleのアカウントページから行います。 |
| 7 | 他の編集者 | プラグインの編集者の追加・譲渡ができます。追加された編集者は、プラグインのコードに関する変更はできますが、プラグインの公開や概要の修正はできません。入力欄に追加したいアカウントを入力し、「Invite」または「Transfer」をクリックします。 |
プラグイン種別
設定できるプラグインの種別には下記の3種類があります。
- Private…特定のアプリに限定して無料で公開する。
- Open source (MIT)…プラグインマーケットプレイスで、コードのコピーができる状態で無料で公開する。一度このライセンスで公開したプラグインは他のライセンスに変更できません。
- Commercial…プラグインマーケットプレイスで有料で公開する。月額・買い切り金額は、
Commercial設定後に表示される「Pricing and commercial distribution options」で設定します。
有料プラグインの価格設定
プラグイン種別をCommercialに設定すると、「Publishing and license」の下部にプラグインの価格を設定する「Pricing and commercial distribution options」が表示されます。
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | 支払い体系 | プラグインの支払い体系を選択します。Subscription（月額支払い）、One-time payment（買い切り）、Both（月額・買い切りどちらでも利用可）から選択できます。 |
| 2 | 月額料金 | 月額料金をUSDで設定します。No.1の支払い体系でSubscription、Bothを選択したときに設定できます。 |
| 3 | 買い切り料金 | 買い切り料金をUSDで設定します。No.1の支払い体系でOne-time payment、Bothを選択したときに設定できます。 |
No.2、3の価格について、入力欄に金額を入力すると、下部に1アプリ・1ヶ月当たりの利益（入力価格の75%）が表示されます。確認して「Save price」をクリックすると価格が反映されます。
Reviews
Reviewsタブでは、プラグインを利用しているアプリ数やレビューを確認できます。ノーコードラボが作成・公開しているプラグイン「Simple progress bar」のReviewsタブを例にご紹介します。
Reviewsタブの詳細
| No. | 項目名 | 設定内容 |
|---|---|---|
| 1 | プラグインを使用しているアプリ数 | このプラグインを使用しているアプリ数が表示されます。本プラグインは10,164のアプリで使用されています。 |
| 2 | レビュー対象のバージョン | レビュー対象のプラグインのバージョンを選択します。例ではAll versions（全てのバージョン）を選択していますが、過去の全てのバージョンを個別に選択することもできます。 |
| 3 | 公開済みレビュー | No. 2で選択したバージョンにつけられたレビューが表示されます。レビュー日・5段階評価・自由入力文が表示されています。 |
見え方の確認：プラグインページ
投稿されたレビューはプラグインページの下の方にある「Ratings」欄で他のユーザー向けに公開されています（Simple progress barのプラグインページより）。
まとめ
本記事では、プラグインエディタのタブごとの使い方をご紹介しました。
プラグインエディタで設定した内容がプラグインを使用しているアプリエディタにどのように反映されるかを把握できれば、プラグイン作成のスピードアップが望めるかもしれません。本記事をプラグイン作成中に困ったときのヘルプツールとしてご活用いただければと思います。
参考
▼プラグイン作成についてのBubble公式ドキュメント
▼ノーコードラボブログコンテンツ集：プラグインの作り方とノーコードラボのプラグイン紹介記事
