【Bubble】Data APIを使ってユーザーを新規追加する実装方法

ノーコードツール「Bubble」でData APIを使って、ユーザーを新規追加する実装方法を紹介します。

こんな人におすすめのTipsです。

  • アプリの管理者ユーザーが、管理画面からメールアドレスとパスワード、ユーザー名を入力して新しい他のユーザーを作成する方法が知りたい人
  • WordPressのユーザー新規追加風の実装をBubbleで実現したい人
  • アクションのSign the user upやCreate an account for someone elseを使わずに他のユーザーを新規登録するワークフローを知りたい人

※Data APIは有料プランにアップグレードしないと利用できない機能です。

Bubblerの皆様の開発の一助になれば幸いです。では解説本編参ります!

著者:大熊滉希
ノーコード特化のアプリ/システム開発事業を展開するEPICsの代表。
前職にて新規事業コンサルティングを行う企業で役員を歴任した後、
最小の経営資源で開発を行えるノーコードに可能性を感じEPICsを創業。

運営会社:EPICs合同会社
日本最大級の開発実績を誇るノーコード特化のアプリ/システム開発会社。
最安30万円・最短2週間から、BubbleやAdaloなど多様なツールの中からニーズに合わせた最適な開発を提案・実施している。

目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

 無料で相談する →

実装イメージ

以下のような運用を想定した実装となります。

管理者ユーザーがユーザー新規追加画面で「ユーザー名」「メールアドレス」「パスワード」を入力してユーザーを新規登録ボタンを押すと、Data APIを用いて新規ユーザーを登録。

管理者はメールアドレスとパスワードをスプレッドシートかなにかにメモしておき、該当ユーザーへログイン情報を共有してログインしてもらう。もしくは、該当メールアドレスにSend emailでログイン情報を送付する。

実装手順

以下の手順で実装します。

  1. Settings > APIでData APIの設定をする
  2. プラグイン「API Connector」をインストールする
  3. API Connectorの設定をする
  4. ボタンクリック時のワークフローで作成したAPIを呼ぶ

一度やれば覚えられるくらいの難易度なので、API関連に苦手意識がある方もぜひ臆せずチャレンジしてみてください。

Settings > APIでData APIの設定をする

まず、BubbleのSettings > APIを開き、Data APIの有効化作業を行います。

Settings > API
  • Enable Data APIにチェックを入れます
  • 今回はユーザーのデータをいじるので、Userにチェックを入れます

冒頭でもお伝えしましたが、Data APIを利用するには有料プランにアップグレードする必要がありますのでご了承ください。

次に、すぐ下のAPI TokensのGenerate a new API TokenをクリックしてPrivate keyを発行します。ここで生成したキーは後ほどAPI Connectorの設定をする際に使用するものです。

API Token Labelは適当な分かりやすい名前をつけておくと良いでしょう。

これでData APIの有効化は完了です。次項からAPI Connectorで要となる設定作業を行います。

プラグイン「API Connector」をインストールする

インストールしていない方はプラグイン追加ページで「API Connector」をインストールしてください。

API Connectorは、Install New Pluginsページの最上部に表示されているのですぐ見つかると思います。

API Connectorの設定をする

API Connectorではまず、大元のAPIで以下の設定をします。

API Connectorの大元の設定
  • Authenticationの「Private key in header」を選択する
  • Key valueには「Bearer Private key」を入力する

Bearerは固定で、半角スペースを空けて先程Settings > APIで作成したPrivate keyを入れてください。

次に、expandをクリックして中身を開き、以下のように設定していきます。

  • ワークフローで使用するので、Use asをActionにする
  • デフォルトではGETになっているのでPOSTへ変更する
  • Settings > APIに記載されていたエンドポイントに/userをつけたものを入力する
  • Body typeをForm-dataに設定する
  • Parametersに新規ユーザー作成時に入力されるUserタイプのフィールド名と、適当な初期値を入れる
  • 各ParametersのPrivate欄はチェックを外す

すべて入力完了したらInitialize callを押してください。それでAPI の設定は完了です。

ボタンクリック時のワークフローで作成したAPIを呼ぶ

最後に、該当の新規ユーザー追加画面のボタンクリック時のワークフローを組みます。

以下のように先程までの工程で作成したAPIを呼び、パラメーターに各Inputの入力値を設定してあげればOKです!

作成APIがPluginsに表示されます
各パラメーターにInput入力値をセット

APIアクションは、Plugins > API名で表示確認できるかと思います。

これで一旦機能自体は完成です!あとはお好みで、すでに存在するメールアドレスをはじく処理をOnly whenなどに仕込んであげればなお良しでしょう。

今回の記事執筆・実装にあたり、NoCodeCamp公認Bubbleエキスパートの岡野様に大変多くのご助言をいただきました。ありがとうございました!(岡野様のブログ

日本最大級のノーコード開発実績!ノーコードなら迷わずEPICs

EPICsはノーコードでの開発に特化をしたプロの開発組織です。

従来のスクラッチでの開発でよく発生する「費用が高い」 「開発期間が長い」 「知識がなく開発に踏み切れない」という課題に対し、ノーコードでの開発という選択肢で皆様の開発を支援します!

そんな弊社に開発相談をいただくメリットは大きく4つあります!

①豊富な開発実績
創業よりノーコード開発を軸に多様な開発を行ってまいりました。SNSやマッチングアプリ、ECアプリなど多様な開発実績がございます。
豊富な経験をもとに、ただ開発を行うにとどまらず、より良い開発を行うためのアドレスや公開後のご不安やご相談にも対応させていただきます!

②最安30万円!通常の1/10~1/5ほどの低コストで開発
コーディングの工程を削減できるノーコードは、最適かつ最小限の人員で対応が可能です。また弊社では豊富な開発実績があるため、経験を活かした開発を行うことで開発費用を大幅に削減することができます。

③最短2週間!圧倒的な短期間で納品
ノーコード開発では複雑なコードを1から書く必要がないため開発工程を省略することができ、開発期間の大幅な短縮が可能です。

④公開後の保守や運用の徹底サポート
アプリは開発後の運用もとても重要です。EPICsでは開発のみならずその後のサポートも対応可能です!
またノーコードで開発したアプリは、スクラッチで開発したアプリに比べて保守や運用にかかる費用を削減することも可能です!

「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
目次