【Bubble】Bubbleでの超重要な機能「データベース」 ２、Workflowを使ってデータを呼び出してみよう
こんにちは。NoCode Ninjaです。
今日は前回のWorkflowに続きBubbleでの超重要な機能「データベース」を紹介します。
前回はWorkflowを使ってデータを格納することについて紹介しました。
今回は前回の続き・・「データを呼び出す」方法を紹介します。
何らかのエレメントを設置して呼び出す設定さえすれば、データベース（以下DB）に入った色々な値を呼び出せて非常に便利です。
それでは、いってみましょう。
エレメントを設定する
エレメントの設置
まずは前回の画面の下のほうに、エレメントを設置します。
今回はTextにしてみます。
設置しました。
エレメントの設定
いつものTextなら、一番上の「edit me」のところに任意のTextを打ち込んで入れていくのですが、今回はDBから呼び出すので少し違います。
「Edit me...」のところをクリックすると、右側に「Insert dynamic data」という青い表示が出てきます。
こちらをクリックしましょう。
この指示はDBから呼び出す時の共通のやり方なので、よく覚えておくと良いと思います。
ここに前回の「test」というTypeに入れた「corner1」というFieldを指定すると、corner1から呼び出しが出来るというわけです。
「Do a search for」をクリックすると、赤い表示が出てきます。
左側の赤いところ（Type）で「test」を選択します。
こちらはこれで完了です。
続いて、右側の赤いところの「More」をクリック。
「's corner1」をクリックします。
すると、青い表示になりました。
DBにあるcorner1の値がこのTextエレメントに入りますよ、という意味です。
試しにこれでPreviewしてみます。
「corner1」に現在入っている値が「全て（２つ）」出ました。
前回DBに入れる動作を2回しましたのと「corner1」以上の指定を特にしていないので、どちらも入っていてどちらも出てくるわけですね。
どちらか指定をする場合を試してみます。
Designタブに戻りましょう。
さきほどの「Search for test's corner1」に追加をします。
「corner1」をクリックすると右に表示される「More」をクリック。
「:first item」をクリックしましょう。
これでPreviewを見ると・・
「ひとつめ」が指定されて出てきました♪
せっかくなのでもう一つ出しましょう。
Designタブに戻り、今作ったTextエレメントをそのままコピペすると楽です。
値もそのままコピペされるので少しいじりましょう。
「corner1」をクリックし、「corner2」に。
これだけで完了なのですが、せっかくなのでここでの「同じ意味の違う指定パターン」も紹介します。
結果は同じでも指示の仕方は色んなパターンがありますので、試してみましょう。そのほうが後々に幅も広がりますしね♪
「～:first item」を「～:item #」に選択し、半角手打ちで「1」を入力しましょう。
DBに入っている「corner2の一つ目（つまり一番最初）」という指定になります。
「first item」と意味しているところが同じになりますね。
このような形になりました。
それでは、プレビューしてみましょう。
無事表示されました♪
これで入っている値を自在に取り出すことが可能になりました。
設定を変える
こうなると、色々と思い通りに動かせてきます。
ここまでの内容を踏まえたら、前回二回目に入れた内容にそれぞれ書き換えてみましょう。
細かい説明は割愛しますので、是非ご自身でもやってみてください。
なお、筆者は以下の画面のように設定しています。
こちらをPreviewします。
大成功です♪
DBに慣れてきましたね！
以上、「データベースに格納された値を出す」方法でした。
まとめ
いかがだったでしょうか。
一つ一つ紐解いていけば、DBの使い方は理解出来てきたのではないでしょうか。
まだまだ機能は沢山ありますので是非、実装してみるのをオススメします。
アウトプットすると理解しやすい内容ですし、一度身についたらむちゃくちゃ便利で色んな作りたいものがイメージ出来てくるのではないでしょうか。
次回は、こちらを使った繰り返し動作について紹介します。
それでは、また！
