この記事は、bubbleの「データベース」について、画像と動画で解説しています。
bubbleはデータベースもデフォルトで実装されているので、非常に便利ですね(^▽^)/
ここでは、初心者の方でも分かりやすく
①ユーザー情報をデータベースに登録する方法
②データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法
をやっていきたいと思います!
データベースの使い方の他に、「エレメント」や「ワークフロー」も使っていきますので、bubbleの色々な機能が勉強できるようになっています。
それでは、早速やっていきましょう!
①ユーザー情報をデータベースに登録する方法
まずは、ユーザー情報をデータベースに登録する方法をからやっていきます!
このあとは、下記のような流れで作業していきます。
①Sign upフォーマットの作成
②データベースの準備
③ワークフローの設定
④ユーザー登録
⑤データベースの確認
①Sign upフォーマットの作成
サインアップフォーマットの作成からやっていきます。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-040955.png)
まずはこのように、「Textエレメント」「Inputエレメント」「Buttonエレメント」を配置してください。
エレメントの使い方が良く分からない、という方はこちらの記事をご覧ください
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_content_team_3epn-320x180.png)
配置できたら、このあと1つずつ設定していきます。
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041135.png)
まずは、Textエレメントです。
エレメントをダブルクリックして、「ユーザー登録」と入力
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041235.png)
Inputエレメントに、「ユーザー名」と入力
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041331.png)
ユーザー名の下のInputエレメントに、「メールアドレス」と入力
Content formatは「Email」を選択
「ここはメールアドレスを入力するところですよ」とします
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041503.png)
メールアドレスの下のInputエレメントに、「パスワード」と入力
Content formatは「Password」を選択
「ここはパスワードを入力するところですよ」とします
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-041604.png)
ボタンの名前は、「Sign up」としておきます。
これで、Sign upフォーマットができました。
②データベースの準備
続いて、データベースの準備をしていきます。
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-043904.png)
まずは、データベースにユーザー情報を登録する準備をしていきます!
Excelのような表にどんどんデータを蓄積していくようなイメージです。
Dataタブでデータベースを開いて、「New type」で新しいデータタイプを作ります。
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-043934.png)
今回は「テストユーザー」としました。(なんでもOKです)
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-043958.png)
続いて、登録されるデータのフィールドを作っていきます。
Excelでいうところの、セルに項目を作っていくようなイメージです。
「Create a new field」をクリック
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-044113.png)
フィールド名とフィールドのタイプを設定していきます。
今回は、「ユーザー名」と「メールアドレス」と「パスワード」の3つを作りたいです。
まずは、「ユーザー名」です。タイプは「text」でOK。
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-044147.png)
「メールアドレス」でタイプは「text」
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-044241.png)
「パスワード」でタイプは「text」
![データベースの使い方を解説](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-044256.png)
これで、ユーザー情報を登録する受け皿ができました。
続いて、実際にSign upをしていきましょう!
③ワークフローの設定
次に、ワークフローの設定をしていきます!
ワークフローを詳しく知りたい方はこちらの記事をご覧ください。
![](https://hironk-blog.net/wp-content/uploads/2020/09/undraw_Mind_map_re_nlb6-320x180.png)
![ワークフローの解説(サインアップ編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-05-055622.png)
Buttonエレメントのプロパティーを開いて、「workflow」をクリック
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-052956.png)
Workflowタブに移動します
「When~~」の部分は、「いつ起こすアクションですか?」→「ボタンをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-053544.png)
Sign upボタンをクリックしたら、「データベースに情報を登録したい」ので「Data」を選択
新しい情報を登録したいので、「Create a new~~」をクリック
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-053607.png)
データベースのタイプは、前のパートで作成した、「テストユーザー」を選択。
「ここに情報を登録していきますよ」ということ。
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-054847.png)
次に、データベースのフィールド(先ほど作成した)にどの情報を紐づけるかを設定していきます。
「Set another field」をクリック
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-054903.png)
新しく設定できるようになりますので、「Click」をクリック
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-054919.png)
ますは、データベースのどのフィールドに、情報を登録するか選びます。
先ほど作成した、「ユーザー名」を選択
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-054940.png)
「Click」をクリック
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-055012.png)
今度は、データベースの「ユーザー名フィールド」にどの情報を紐づけるかを設定します。
「Inputユーザー名」(先ほど作成した)の情報を紐づけますと設定します。
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-055034.png)
最後に「value(値)」を選択
これで
データベースの「ユーザー名フィールド」に「Inputユーザー名」の「値」を登録してください
というワークフローができました!
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-055056.png)
このあとは、「メールアドレス」と「パスワード」も同じように設定していきましょう!
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-055126.png)
このように、「ユーザー名」「メールアドレス」「パスワード」ができたら、ワークフローの設定は完了です!
④ユーザー登録
それでは、プレビューから実際にユーザー登録をしてみましょう!
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-072114.png)
プレビューに移動しました。
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-072649.png)
必要な情報を入力しましょう!(名前に深い意味はありません(^^;)
入力したら、「Sign up」のボタンをクリックで、データベースに情報が登録されます。
動作したかわかり辛いですが、ボタンを押せば大丈夫です。
これを、嵐のメンバー全員やってみましょう!
⑤データベースの確認
最後にちゃんと、データベースに登録されているか確認しましょう!
![bubbleの使い方を解説(データベース編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-074721.png)
Dataタブに移動します。
「App data」タブの「テストユーザー」を選択
先ほど入力した5名の情報が入っていれば成功です!
もしなにも出てこない時はここをクリックしてページを更新してみてください。
![データベースの使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-02-165016.png)
動画で見たい方はこちらから
②データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法
このパートでは、先ほど登録したユーザー情報を呼び出して、リストを作ってみましょう!
前のパートの確認がまだの方は先にお願いします。
Repeating Groupエディターを使って、「名前」と「メールアドレス」のデータを呼び出します。
まずは、Repeating Groupをエディターに設置しましょう。
![Repeating Groupの使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-02-171500.png)
これから先ほど作ったデータベースから、嵐メンバーの名前を呼び出していきます
![Repeating Groupの使い方](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-02-172524.png)
メンバーは5人なので、「Rows(行)」を5にして行を増やします
「Do a search for」を選択して、どこからデータをひぱってくるか設定します
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075230.png)
先ほどデータベースで、「テストユーザー」とデータを作ったのでこちらを選択
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075351.png)
次にRepeating Groupに嵐のメンバーの名前を表示させるために、「Text」を使います
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075509.png)
このように、Repeating Groupの一番上の行にテキストを入れます
「Insert dynamic data(動的データの挿入)」をクリック
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075737.png)
「Current cells テストユーザー(現在のセルの)」を選択
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075602.png)
「ユーザー名」を選択
データベースの「テストユーザー」から「ユーザー名」をひぱってくるように設定しました。
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075643.png)
続いて、名前の横に「メールアドレス」を表示させる設定をしていきます
先ほど名前を表示させるTextエレメントをコピペして配置します
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075721.png)
先ほどの動的データが残っている場合は削除して、新たに設定していきます。
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075737.png)
「Current cells テストユーザー(現在のセルの)」を選択
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075754.png)
今度は「メールアドレス」を選択
データベースの「テストユーザー」から「メールアドレス」をひぱってくるように設定しました。
これで設定は終わりましたので、プレビューで動作を確認してみましょう!
![データベースの使い方を解説(データ呼び出し編)](https://hironk-blog.net/wp-content/uploads/2020/09/コメント-2020-09-06-075821.png)
このようにデータベースの情報を表示させることができました!
動画で確認したい方はこちらから
これでデータベースの解説をおわります!
また別の記事でお会いできることを楽しみにしています(^▽^)/