bubble.ioの基本のキ

事業アイデアを持ってる人が、簡単にそれを"とりあえず形にする"ことができるツールとして、No code系ツールは今後日本でも流行るんじゃないかと思っています。パワポ＆エクセル感覚で、動的webサイトが作れるのが魅力的で、中でもbubble.ioは汎用性が高くて良いです。（ただし、汎用性が高い分、最初に少し勉強が必要。）
日本語でも、bubbleを使った動的webサイトの作り方を解説してくれる人たちがいらっしゃり、最初に勉強するのに大変助かりました。その後、自分で色々作ってみて、「あ、そういうことだったんだ！」と気づいたこと等を記録していきます！
今回は、基本のキです。bubbleの公式マニュアルを見れば書いてあるようなことではあるんですが、誰も見ないと思うので要点をまとめてみました。なお、Lessonを一つやってから読んでもらうのがおススメです。

１．本番サイトとpreviewサイト

　本番サイト：　　公開される(友達と共有できる)
　previewサイト：　自分しか見ることができない。

previewボタンを押すと見られる画面はあくまで、自分のみが見られるものです。公開するには、右上のDevelopment中のDeploy current version to Liveで行うことができます。

そして、Data（データベースのこと。後述）もpreview用と本番用で２つあります。Dataの本番⇔開発用の切り替え方はDataタブのApp dataタブ内の「Switch to live database」できます。

Lessonではだいたいpreviewを見て終わりなので、最初意外とここが「？」になったりします。また、本番サイト用にはデータベースが別にある点も注意です。私の場合、初めてログイン機能を作ったとき「このアドレスでログインしてみて」と友達に送ったのに、「ログインできない」と言われました。データベースが２つあることを認識してなかったからでした。

２．Design, Workflow, Data

Bubbleの基本的な作業は、
●「Design」で、ウェブサイトの"外見"を作る
●「Workflow」で、例えば、ボタンがクリックされたら何が起きるかを指定する
●「Data」で、データベースを管理する
これに尽きると思います。Lessonを一つやると、おそらくまずこれがわかりますよね。
ただ、自分で試しに何か作ってみるときは、まず最初に「Data」から作るがの良いと思います。

３．Things, Field, Type

「Data」中のThingsは表、Fieldは項目、Typeは項目の種類です。イメージとしてはこんな感じです。

最初は、意外とこの言葉の使い分けで戸惑ったりします。
ちなみに、Listとは、答えが複数になる（なりうる）ものの場合です。
Type（項目の種類）としてThings（表）を選ぶこともできます。

４．Elements treeとContainers

これは「そもそもContainer(Group、Popup等)って何やねん！」という疑問にお答えする部分になるかと思います。
Containerとは、風呂敷のようなものです。基本的には、風呂敷を敷いてから、その上に他のElementを乗せていくイメージです。そして、サイトを作っていく過程で、「●●なとき、この風呂敷の上のもの全部を●●して」といったルールを作っていくことができます。
なお、Groupを作るときは、複数Elementを選択し、右クリックして「Group elements in a Group」を選ぶことで、パワーポイントのグループ化機能みたいなやり方でGroupを作ることもできます。

Parent-Childrenと呼ばれる、階層構造を作ることになっています。階層構造については、「Design」中のElements treeで確認することができます。

今回はこの辺で。読んでいただきありがとうございました。