【Nocode】Bubbleデータベースの扱い方。DB構築【基本】

こんにちは！ゆうたです。

bubbleでSNSのような本格的なアプリをノーコードで作りたい！
でも、データベースタブを開くといろいろ項目があってどこから手をつけて良いのかわからなくて、足踏みしてしまっている。

そんな人向けにデータベースの操作項目と設計について解説していきます。

そもそもデータベースって？

一言で言うと、情報を分類して保存する場所です。

と言われてもイメージし辛いと思うので、他に例えるとExcelに近いものです。bubbleのデータベースでもExcelに出てくる表なようなものを中心に使います。

この先を読んで頂ければデータベースについてさらにイメージ出来るようになるかと思います。

Bubbleのデータベースカスタマイズ画面

データタブをクリックすると色枠を除いて図１のような画面が出てきます。ここからデータベースをカスタマイズしていくことになります。
しかし、初めての人にとってはどう操作していけば良いのかよくわからないと思います。

ここではよく使う操作について図の画像を使いながらこの後から解説していきます。

Data types – データタイプ

黒い枠線のデータタイプはデータベースをカスタマイズ出来る項目です。緑の枠線の中はデータタイプの一覧を表示していて、少し下に【New type】という項目があります。それはデータタイプを新規作成してデータタイプを増やすことが出来るものです。

データタイプの一覧にある【User】はアプリのユーザーにアカウントを持たせる時に使うことになります。

このデータタイプは図１にもあるようにExcel言うと”Sheet”の部分に相当します。

例えばデータタイプ【user】がありますが、図２のようにさらにその中でも詳しくカスタマイズ出来ます。

茶色の枠線の中を見ると、上から【email】～【Slug】のフィールドがありますが、これはあらかじめ固定されているフィールドなので削除出来ないようになっています。

この固定フィールドだけではまともなユーザーアカウントは作れません。ユーザー名のフィールドもありませんし。無いのなら、青い枠線の中にある【create a new field】をクリックして、ユーザー名のフィールドを作ります。

フィールドを作成するには

クリックすると図３のような画面が現れます。図３の画像は本来なら英語表示ですが、解説する為に翻訳ツールを使って日本語で表示させています。翻訳ツールを使って日本語に翻訳させる方法は下の記事で紹介しています。

➡【たぶんレア！】bubbleのアプリを日本語で使う方法を紹介

ただ、データベースで翻訳ツールを使うと、使い辛くなるかもしれないので最初は交互に使って、慣れてきたら使わないようにすることをおすすめします。

そして、ユーザー名のフィールドを作るなら【フィールド名】には”user name”など自分がわかるような名前を入れておきます。後から名前を変更も出来ます。

【フィールドタイプ】のプルダウンメニューをクリックすると青い枠線の中のようになります。フィールドに入るデータが文章なのか数字だけなのかなどを設定します。

ユーザー名のフィールドを作るなら青い枠線の中の【テキスト】を選べばうまく行きます。

フィールドに複数のデータを入れる

図３の赤い線の上にある文字は途中で途切れていますが、【このフィールドはリストです。（複数のエントリ）】と表示されています。

これはフィールドに複数のデータを入れたい時に✅をクリックします。

ユーザー名のフィールドを作る場合はアカウントに対してユーザー名は一つだけなので、✅する必要は無いです。

データタイプの基本的な解説はこんな感じになります。

App data – アプリデータ

上の図４は筆者が実際にBubbleで制作しているアプリのアプリデータの画像です。赤い枠線をクリックすると緑の枠線の中にあるExcelみたいな表が出てきます。

薄いグレーの枠に横並びでフィールドが複数ありますが、これは【Data types】でカスタマイズしたものになります。

表示されているものは一部分で本来はさらに多いのですが、表に入りきれないので省略されています。省略されている部分を表示させたいなら表の右端にある【additional fields】から設定していきます。

そして、気になっているかと思いますが青い枠線の中にある鉛筆マークは入力されたデータを書き換えることが出来ます。

これ以上、深堀りすると基本の範囲内を超えてしまいそうなので、ここまでにしておきます。この先は応用・実践編で解説していく予定です。

最後にまとめ

最後にBubbleのDBについて理解が早まりそうなポイントを下にまとめておきます。
参考までに！

最後まで読んで頂きありがとうございました。