この記事は、bubbleの「データベース」について、画像と動画で解説しています。
bubbleはデータベースもデフォルトで実装されているので、非常に便利ですね(^▽^)/
ここでは、初心者の方でも分かりやすく
①ユーザー情報をデータベースに登録する方法
②データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法
をやっていきたいと思います！
データベースの使い方の他に、「エレメント」や「ワークフロー」も使っていきますので、bubbleの色々な機能が勉強できるようになっています。
それでは、早速やっていきましょう！
①ユーザー情報をデータベースに登録する方法
まずは、ユーザー情報をデータベースに登録する方法をからやっていきます！
このあとは、下記のような流れで作業していきます。
①Sign upフォーマットの作成
②データベースの準備
③ワークフローの設定
④ユーザー登録
⑤データベースの確認
①Sign upフォーマットの作成
サインアップフォーマットの作成からやっていきます。
まずはこのように、「Textエレメント」「Inputエレメント」「Buttonエレメント」を配置してください。
エレメントの使い方が良く分からない、という方はこちらの記事をご覧ください
配置できたら、このあと１つずつ設定していきます。
まずは、Textエレメントです。
エレメントをダブルクリックして、「ユーザー登録」と入力
Inputエレメントに、「ユーザー名」と入力
ユーザー名の下のInputエレメントに、「メールアドレス」と入力
Content formatは「Email」を選択
「ここはメールアドレスを入力するところですよ」とします
メールアドレスの下のInputエレメントに、「パスワード」と入力
Content formatは「Password」を選択
「ここはパスワードを入力するところですよ」とします
ボタンの名前は、「Sign up」としておきます。
これで、Sign upフォーマットができました。
②データベースの準備
続いて、データベースの準備をしていきます。
まずは、データベースにユーザー情報を登録する準備をしていきます！
Excelのような表にどんどんデータを蓄積していくようなイメージです。
Dataタブでデータベースを開いて、「New type」で新しいデータタイプを作ります。
今回は「テストユーザー」としました。（なんでもOKです）
続いて、登録されるデータのフィールドを作っていきます。
Excelでいうところの、セルに項目を作っていくようなイメージです。
「Create a new field」をクリック
フィールド名とフィールドのタイプを設定していきます。
今回は、「ユーザー名」と「メールアドレス」と「パスワード」の３つを作りたいです。
まずは、「ユーザー名」です。タイプは「text」でOK。
「メールアドレス」でタイプは「text」
「パスワード」でタイプは「text」
これで、ユーザー情報を登録する受け皿ができました。
続いて、実際にSign upをしていきましょう！
③ワークフローの設定
次に、ワークフローの設定をしていきます！
ワークフローを詳しく知りたい方はこちらの記事をご覧ください。
Buttonエレメントのプロパティーを開いて、「workflow」をクリック
Workflowタブに移動します
「When～～」の部分は、「いつ起こすアクションですか？」→「ボタンをクリックしたときです」になります。
「Click here to~~」をクリックしてアクションを定義していきます。
Sign upボタンをクリックしたら、「データベースに情報を登録したい」ので「Data」を選択
新しい情報を登録したいので、「Create a new~~」をクリック
データベースのタイプは、前のパートで作成した、「テストユーザー」を選択。
「ここに情報を登録していきますよ」ということ。
次に、データベースのフィールド（先ほど作成した）にどの情報を紐づけるかを設定していきます。
「Set another field」をクリック
新しく設定できるようになりますので、「Click」をクリック
ますは、データベースのどのフィールドに、情報を登録するか選びます。
先ほど作成した、「ユーザー名」を選択
「Click」をクリック
今度は、データベースの「ユーザー名フィールド」にどの情報を紐づけるかを設定します。
「Inputユーザー名」（先ほど作成した）の情報を紐づけますと設定します。
最後に「value（値）」を選択
これで
データベースの「ユーザー名フィールド」に「Inputユーザー名」の「値」を登録してください
というワークフローができました！
このあとは、「メールアドレス」と「パスワード」も同じように設定していきましょう！
このように、「ユーザー名」「メールアドレス」「パスワード」ができたら、ワークフローの設定は完了です！
④ユーザー登録
それでは、プレビューから実際にユーザー登録をしてみましょう！
プレビューに移動しました。
必要な情報を入力しましょう！（名前に深い意味はありません(^^;）
入力したら、「Sign up」のボタンをクリックで、データベースに情報が登録されます。
動作したかわかり辛いですが、ボタンを押せば大丈夫です。
これを、嵐のメンバー全員やってみましょう！
⑤データベースの確認
最後にちゃんと、データベースに登録されているか確認しましょう！
Dataタブに移動します。
「App data」タブの「テストユーザー」を選択
先ほど入力した5名の情報が入っていれば成功です！
もしなにも出てこない時はここをクリックしてページを更新してみてください。
動画で見たい方はこちらから
②データベースに登録されている、ユーザー情報を呼び出してリストを作成する方法
このパートでは、先ほど登録したユーザー情報を呼び出して、リストを作ってみましょう！
前のパートの確認がまだの方は先にお願いします。
Repeating Groupエディターを使って、「名前」と「メールアドレス」のデータを呼び出します。
まずは、Repeating Groupをエディターに設置しましょう。
これから先ほど作ったデータベースから、嵐メンバーの名前を呼び出していきます
メンバーは５人なので、「Rows（行）」を５にして行を増やします
「Do a search for」を選択して、どこからデータをひぱってくるか設定します
先ほどデータベースで、「テストユーザー」とデータを作ったのでこちらを選択
次にRepeating Groupに嵐のメンバーの名前を表示させるために、「Text」を使います
このように、Repeating Groupの一番上の行にテキストを入れます
「Insert dynamic data（動的データの挿入）」をクリック
「Current cells テストユーザー（現在のセルの）」を選択
「ユーザー名」を選択
データベースの「テストユーザー」から「ユーザー名」をひぱってくるように設定しました。
続いて、名前の横に「メールアドレス」を表示させる設定をしていきます
先ほど名前を表示させるTextエレメントをコピペして配置します
先ほどの動的データが残っている場合は削除して、新たに設定していきます。
「Current cells テストユーザー（現在のセルの）」を選択
今度は「メールアドレス」を選択
データベースの「テストユーザー」から「メールアドレス」をひぱってくるように設定しました。
これで設定は終わりましたので、プレビューで動作を確認してみましょう！
このようにデータベースの情報を表示させることができました！
動画で確認したい方はこちらから
これでデータベースの解説をおわります！
また別の記事でお会いできることを楽しみにしています(^▽^)/
