【超初心者日記】Day7：バブルでLP作りました！ワークフローとデータベースについて学ぶ【Bubble.で1か月でSNSは作れるのか・・？！】

非エンジニアのよーこふが『1か月で自作SNSをリリースする！』というこの企画。

今日の課題は、バブルのワークフローとデータベース（DB）について理解を深め、きちんと動くものをつくるという事です！

ところで今、作ろうと思っている新SNSのローンチ記念イベントを高校3年生向けに開催しようと画策しています！

そのためのイベントLPが必要な事に、今日気が付きました！（遅

肝心の新SNSは、まだ影も形もございませんが・・メールアドレスの事前登録ページだけを載せたバブルでのLP作成を通じて、

ワークフローとデータベースと仲良くなっていきたいと思います。

バブルでLPをつくってみよう！

それではバブルにログインして『新アプリをつくる』をクリックします。

適当にサイトの名前をいれて、カテゴリを選びます。

いつも通り、テンプレートの画面が出てきますが、左下の赤四角で『空白のページから作る』をクリックします。

LPの『見た目』をつくる

なんとなく、画像が入れば『それっぽく見える』気がしますので、まず画像を入れることにします！

そして『ホリゾンタル』をクリックして、画像を中央に配置します。

画像が配置できましたら、次はテキストですね！

題名をバーンと入れてみます。

太字・中央配置・色変更をします。

テキストを次々と配置し、入れていきます。

『この場所だけの文字装飾を変えたい』場合は、右の赤四角の『リムーブ・スタイル』をクリックして設定します。

今回は『お名前とメールアドレス』を事前登録してもらいたいですので、

お名前とメールアドレスを記入できる場所を『インプット』で作ります。

クリックしたら出てくる黒い編集画面で、インプット内に入れる文字や、何のタイプの情報を入れるのかを設定します。

インプットとインプットの間を同じ間隔にしたいので、黒い編集画面を呼び出し『Y軸』の数字を手入力します。

2pxだけ変更したければ、最初から入っている数字に＋２か－２をすればOKです。

次は『シェイプ』で入力して欲しいあたりを囲んで、目立たせます。

（ここのグループ化がよくわからず困りました。。インプットが透明な四角の下に隠れているのか、選択出来ないのです・・まだよくわかりませんが、なんとかしました笑）

ボタンの色を、デフォルトの青から赤に変更します。

左側にある『スタイル』タブからスタイルに飛んで、該当のボタンを探して選択します。

あとは色をお好みに変えるだけです！

バブルのデータベースの設定方法

さあ、ついにデータベースの時間です！

データベースは極初期に作っておかなければ、『見た目』も『ワークフロー』も設定できず（出てきて欲しいものが出てこない）困りますので、ワークフローより先にデータベースを作ります！！　※ここテストに出ます！

データベースのタブを開くと左側に出てくる『ニュータイプ』に作りたいデータベースの名前を書き込みます。

今回は『参戦者』と『観戦者』の2タイプのデータを集めたいと思いますので、ニュータイプに『Sansen』と『Kansen』という名前を入れます。（ここの名前は自分が分かりやすければOKです）

ニュータイプを登録してクリックして『クリエイト・ニューフィールド』をクリックすると出てくるのが以下の画面。

今回は『名前』と『メールアドレス』だけのデータを集めますので、シンプルです。

まずは『名前（Sansen-name）』のフィールドをクリエイトします。タイプは『テキスト』ですね。数字とかじゃないしね・・

こちらですね。わかりやすく画面に順番をかいてみました。

次はワークフローを設定する！

必要な分量だけデータベースを作りましたら、次は『ワークフロー』です。

正方形をクリックして、まず『何の要素について設定するのか』を設定します。

そして下にある長四角をクリックして、右の黒い編集画面を呼び出します。

右下にある『セット・アナザーフィールド』をクリックして『値』を記入します。

ここ、忘れがちですので、ご注意ください！！

ここにデータベースの名前やフィールドを設定するので、ワークフローを作り出す前にデータベースを仕上げておかないと、泣きを見ますよ！「選びたいものが、なにも出てこない・・！！」って。

そうそう、ここで重要なのが『インプットに必要事項を記入してボタンを押したら、記入した内容がリセットされる』という仕組みをしれておくことです。

この作業をしておかなければ、ずっと記入欄に前の情報が残ることになり、なんだかなぁ・・ってなりますものね！

以下、順番です。

②の『エレメント・アクションズ』を選び、③『リセット・インプット』を選択します。これでOK。

ちなみに、正方形の設定は以下のような感じです。

ユーザーが『参戦ボタン』をクリックしたら、データベースにユーザーさんの名前とメールアドレスが格納されるようにしたいので、『エレメンツ』から『エレメンツ・クリックド』を選択します。

出てきた黒い編集画面から該当の『参戦ボタン』を選択します。

そうそう、ユーザーさんが名前とメールアドレスを登録して下さったら『ありがとうメール』を自動返信したいので、そのワークフローも設置します。

長四角の設定をして、以下の黒い編集画面を出しましたら、メールの『差出人名』『題名』『本文』などを書きます。　

というわけで、完了です！！

プレビューから自分宛にメールを送ってみましたが、きちんと自動返信メールが届いて、感動しました！！！

本当はここでこのLPを公開して、公開URLを貼りたかったのですが・・

なんと・・３つあるメール登録フォームのうちの1セットが、なぜか記入できませんでしたので・・

そのバグ（？）を直してからアップすることにします！

レスポンシブも設定しましたが・・最初から『スマホ専用』で作ればよかったな・・と思いました。。

まあ、とりあえずどうにかなったっぽいですので、ひとまずは良しといたしましょう！！

ヘッダーのあたりはこんな感じです。

そう・・全国の高校3年生に、『地元PR合戦』をしてもらおうという企画です！！

なぜこの企画なのか・・？

それは、私の作る新SNSに深く関係があるのです・・！

また新SNSへの思いにつきまして、ブログに熱くしたためようと存じます。

ホッとひといき、カフェコーナー

うれしいです！　このくらいシンプルな仕組みなら、見た目はもちろんワークフローとデータベースの設定を何も見ずに作ることができました！！

実は今日でバブルを触り始めてちょうど1週間なのですが、すこしずつバブルの仕様やクセがわかりはじめてきたような気がいたします。

最初は何がどこにあるのか全く分からず、ワークフローとデータベースの存在すら知らなかったのですから、ちょっとは成長したかしら・・と思っています。

しかし私は非エンジニア。プログラミングも全くしたことがございません。

つまり、データベースやワークフローにバブルで初めて出会った！ということです。。

データベースやワークフローの概念をご存じのエンジニアさんやプログラミング経験者さんでしたら、きっとバブルは滅茶苦茶早いと思います。

このLPも私は3時間程かかりましたが、エンジニアさんや慣れていらっしやる方でしたら、30分もかからないのではないかしら・・と感じました。

ノーコード・・おそるべし！！！