ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。現在、ChatGPT を使ったチャットボットを実験運用中です。 弊社の Bubble に関する記事だけを読ませていますので、Bubble に関することなど色々と聞いてみてください!チャットボットは画面右下の吹き出しアイコンからアクセスできます。

ダミーの顔写真付きユーザーをまとめて 5,000人も作成できる!?Bubble の Random User Generator プラグイン!

f:id:toka-xel:20210716172547p:plain

今回は、Random User Generator についてご紹介していきたいと思います。

Random User Generator は Bubble の人気プラグインとして毎回登場しているプラグインです。

テストデータ作成時にとても役立つプラグインなので、ぜひ読んでみて下さい!

Random User Generator とは

オープンソースとして提供されているランダムなユーザーを生成できる API です。

randomuser.me

Bubble ではプラグインとしても提供されています。

bubble.io

テスト用にランダムな大量ユーザーデータを無料で簡単に生成できます。

大量のユーザを画面に表示したり、データベースに登録することが可能です。

作成できるデータは以下のようなデータ(抜粋)です。

  • 氏名、役職(name first/last/title)
  • 性別(gender)
  • 住所(location street/city/state)
  • 電話番号(phone)
  • 携帯番号(cell)
  • Emailアドレス(email)
  • ログインUUID、ユーザ名、パスワード(login uuid/username/password)
  • 生年月日、年齢(dob date/age)
  • 登録日、登録年齢(registered date/age)
  • 国籍(nat)
  • 画像(picture large/medium/thumbnail)

大量のユーザーデータ(最大5,000件)を一気に作成できるため、テストのときに役立ちます。

ただし、現時点(v1.3)で日本人のデータは存在しないため、氏名や住所の利用は難しいかもしれませんね。

それではどのように使うのか、実際にやっていきましょう。

Random User Generator の使い方

事前準備(プラグインのインストール)

プラグインをインストールします。
Bubble で新規アプリを作成し、plugin タブより「Add plugin」ボタンを押します。

f:id:MKCHI:20210630101643p:plain

検索ボックスで「Random User Generator」と入力し、以下の画像のプラグインをインストールします。
「Done」ボタンを押して完了です。

f:id:MKCHI:20210630101908p:plain

ユーザー表示方法(1人)

まずはユーザーをランダムで1人表示する場合の作りかたを紹介します。

Containers から Group を選択し、エディタに配置します。
Group の Data Source で「Get data from an external API」を選択します。

f:id:MKCHI:20210630103552p:plain

「Get data from an external API」メニューで「Random User Generator - Generate a User」を選択します。

f:id:MKCHI:20210630103616p:plain

以下の2項目のオプションがあり、作成したいデータを絞り込めます。
どのようなデータでも良いという方は、オプションの値を空にしてくださいね。

  • gender(性別:male, female)
  • nat(国籍:AU, BR, CA, CH, DE, DK, ES, FI, FR, GB, IE, IR, NO, NL, NZ, TR, US)

f:id:MKCHI:20210630102902p:plain

Close すると、content type を変更する旨の注意ポップアップが表示されるので、ポップアップを押し content type を変更します。

f:id:MKCHI:20210630103840p:plain

Group の中に、「画像(Image)」「ユーザID(Text)」「パスワード(Text)」「性別(Text)」「生年月日(Text)」「電話番号(Text)」「Email(Text)」の項目を配置します。

f:id:MKCHI:20210630104315p:plain

各エレメントのプロパティは以下を参照してください。

f:id:MKCHI:20210630152751p:plain

プレビューするとランダムで生成されたユーザデータが1件表示されます。

f:id:MKCHI:20210701115645p:plain

なお、データは画面上に表示されているだけでデータベースには保存されていません。
保存したい場合は User テーブルにカラムを追加して保存処理を作成しましょう。
保存処理については記事の下の方に書いてあるので参考にしてみてください。

ユーザー表示方法(複数人)

次は、ユーザーをランダムで複数人一度に表示する方法を紹介します。

Containers から Repeating Group を選択し、エディタに配置します。
Repeating Group の Data Source で「Get data from an external API」を選択します。

f:id:MKCHI:20210701100800p:plain

「Get data from an external API」メニューで、「Random User Generator - Generate a User」を選択します。

f:id:MKCHI:20210701093844p:plain

以下の3項目のオプションがあり、作成したいデータを絞り込めます。
どのようなデータでも良いという方は、オプションの値を空にしてくださいね。

  • results(作成件数:1〜N件)
  • gender(性別:male, female)
  • nat(国籍:AU, BR, CA, CH, DE, DK, ES, FI, FR, GB, IE, IR, NO, NL, NZ, TR, US)

f:id:MKCHI:20210701094450p:plain

Closeすると、content type を変更する旨の注意ポップアップが表示されるので、ポップアップを押し content type を変更します。

f:id:MKCHI:20210701094541p:plain

最後に Repeating Group の Data source で「's result」を選択します。

f:id:MKCHI:20210701095347p:plain

Repeating Group の中に、「画像(Image)」「ユーザID(Text)」「パスワード(Text)」「性別(Text)」「生年月日(Text)」「電話番号(Text)」「Email(Text)」の項目を配置します。

f:id:MKCHI:20210701094724p:plain

各エレメントのプロパティは以下を参照してください。

f:id:MKCHI:20210701100106p:plain

プレビューするとランダムで生成されたユーザデータがオプションの results で指定した数だけ表示されます。

f:id:MKCHI:20210701115610p:plain

なお、このデータも画面上に表示されているだけでデータベースには保存されていません。
保存したい場合は User テーブルにカラムを追加して保存処理を作成しましょう。
保存処理についてはすぐ下に書いてあるので参考にしてみてください。

ユーザー保存方法(1件)

次にランダムで作成したユーザー情報を保存する方法をご紹介します。

User テーブルの準備

まずはデータベースの User テーブルにユーザー情報を保存するカラムを用意します。 今回は、「Get data from an external API」から取得して設定している項目「userID(text)」「dob(text)」「gender(text)」「phone(text)」「image(image)」を追加しました。

f:id:MKCHI:20210701112918p:plain

ユーザーをデーターベースに保存する場合は、作成した Group や Repeating Group 上にボタンを配置します。
今回は、Icon で+ボタンを選んでみました。

f:id:MKCHI:20210701120004p:plain

ボタンのプロパティで「Start/Edit workflow」を押します。

f:id:MKCHI:20210701104234p:plain

「Click here to add an action」−「Account」-「Create an account for someone else」を選択します。

f:id:MKCHI:20210701101504p:plain

次の設定はボタンを配置したエレメントによる異なりますので、ご注意下さい。

Group に配置した+ボタンから登録する場合

「Create an account for someone else」のプロパティを以下のように設定してください。

f:id:MKCHI:20210701114019p:plain

Repeating Group に配置した+ボタンから登録する場合

「Create an account for someone else」のプロパティを以下のように設定してください。

f:id:MKCHI:20210701114028p:plain

プレビュー

プレビューして追加ボタンを押すと、ランダムなユーザーデータが User テーブルに1件登録されます。

ユーザー保存方法(複数件)

ここからは Personal プラン以上の方限定の方法になってしまいますが、ユーザーを一度にデーターベースに保存する方法もあります。
Backend workflows と Schedule API Workflow on a list を利用してバッチ処理で Repeating Group に表示されたユーザーを一度にデーターベースに保存します。

Schedule API Workflow についてはこちらの記事でも紹介しています。
もっと詳しく知りたい方はこちらもご覧ください。 blog.nocodelab.jp

事前準備(Backend workflows の有効化)

Schedule API Workflow on a list は、通常のページ内で利用する Workflow では利用できません。
利用したい場合は、Backend workflows を有効にする必要があります。

Settings タブの API の「Enable Workflow API and backend workflows」にチェックを入れます。

f:id:MKCHI:20210709152836p:plain

これで Schedule API Workflow on a list を使えるようになりました。

Backend workflow の追加

画面上部のメニューから「Backend workflows」を選択します。

f:id:MKCHI:20210709153227p:plain

「Click here to add a backend workflow」を押し「General」-「New API workflow」を選択します。

f:id:MKCHI:20210709153335p:plain

画像を参考にプロパティを設定してください。
「API workflow name」はここでは「createUserData」としていますが、このイベント名なので何を入力しても大丈夫です。
「Key」にはデーターベースに登録したい項目を追加します。
今回は、「email(text)」「userID(text)」「dob(text)」「gender(text)」「phone(text)」「image(image)」を追加しました。

f:id:MKCHI:20210709153758p:plain

「Click here to add a action」で「Account」-「Create an account for someone else」を選択します。
Key で渡されたデータをそのままデーターベースに登録するように設定していきます。
間違って同じユーザーが登録されないように「Retuen the user if the account already exist」にチェックもしておきましょう。

f:id:MKCHI:20210709153906p:plain

これで Backend workflow は完了です。
次は画面から Backend workflow を呼び出せるようにします。

Workflow の追加

画面にボタン「Repeating Group 保存」をひとつ追加します。
ボタンのプロパティで「Start/Edit workflow」を押し、ワークフローを追加します。

f:id:MKCHI:20210709153947p:plain

「Click here to add a action」で「Custom Events」-「Schedule API Workflow on a list」を選択します。

f:id:MKCHI:20210709154047p:plain

画像を参考にプロパティを設定してみてください。

f:id:MKCHI:20210713110806p:plain

各項目について簡単に説明します。

  • 「Type of things」には Repeating Group に設定しているものと同じ Type である「Generate List of Users result (Random User Generator)」を設定します。
  • 「List to run on」は保存したい対象のリストを設定します。今回は Repeating Group の内容をそのまま設定しています。
  • 「API Workflow」には Backend workflow で作成したイベント名。
  • 「Schedule date」はすぐ実行したいので、現在時刻である「Current date/time」。
  • 「interval」は 5(Bubble 推奨値)にしています。
  • 各パラメーターの「This」は、現在実行しているリストの中の1行を指しています。そのため、This に続く形で Repeating Group の各項目を指定しています。
プレビュー

プレビューして「Repeating Group 保存」ボタンを押すと、Repeating Group で表示されたランダムユーザーが User テーブルに一度に登録されます。

f:id:MKCHI:20210709154240p:plain

注意

パスワードについては Bubble 側で管理されているため、このアクションでは追加できません。

また、1,000件程を一度にデーターベースに保存しようとすると Bubble に負荷が掛かりタイムアウトで保存できません。
多くても一度に保存するのは500件程度をおすすめします。

500件でもタイムアウトになることがありますが、バックエンドは動いていることがあるためデータベースのレコードが増えているか確認してみてください。
500件以上のデータが欲しい場合は、何回かに分けて(500件×2回など)実行すると保存できますね。

大量のユーザーデータ生成時は同じユーザーが何度か生成されることもあります。
そのようなユーザーは保存時に除外されるため、決まった件数のユーザーが欲しい場合はデータベースのレコード件数を参照しながら調整するのが良さそうです。

まとめ

いかがでしたでしょうか。

ユーザID や Eメール、性別などだけではなく、ユーザーに合う画像も準備してくれるところが素晴らしいですね。

Random User Generatorは、テスト用のユーザを簡単に一気に作成するときに本当に役立ちます。

テストユーザを作成したいときは、ぜひ一度試してみて下さい。