今日の課題は、バブルのワークフローとデータベース（DB）について理解を深め、きちんと動くものをつくるという事です！
ところで今、作ろうと思っている新SNSのローンチ記念イベントを高校3年生向けに開催しようと画策しています！
そのためのイベントLPが必要な事に、今日気が付きました！（遅
肝心の新SNSは、まだ影も形もございませんが・・メールアドレスの事前登録ページだけを載せたバブルでのLP作成を通じて、
ワークフローとデータベースと仲良くなっていきたいと思います。
【バブル（Bubble.）とは？】
コードなしでプログラミングできる（webサイトやwebサービスやアプリが作れる）いわゆる『ノーコード（No-Code）』ツールです。
ビジュアル・エディターで直感的に操作できるのが、非エンジニアの強い味方！！
しかし、けっこう高機能なせいか、まともに使えるようになるには2～3ヵ月はかかると言われています。
バブルでLPをつくってみよう！
それではバブルにログインして『新アプリをつくる』をクリックします。
適当にサイトの名前をいれて、カテゴリを選びます。
いつも通り、テンプレートの画面が出てきますが、左下の赤四角で『空白のページから作る』をクリックします。
LPの『見た目』をつくる
なんとなく、画像が入れば『それっぽく見える』気がしますので、まず画像を入れることにします！
そして『ホリゾンタル』をクリックして、画像を中央に配置します。
画像が配置できましたら、次はテキストですね！
題名をバーンと入れてみます。
太字・中央配置・色変更をします。
テキストを次々と配置し、入れていきます。
『この場所だけの文字装飾を変えたい』場合は、右の赤四角の『リムーブ・スタイル』をクリックして設定します。
今回は『お名前とメールアドレス』を事前登録してもらいたいですので、
お名前とメールアドレスを記入できる場所を『インプット』で作ります。
クリックしたら出てくる黒い編集画面で、インプット内に入れる文字や、何のタイプの情報を入れるのかを設定します。
インプットとインプットの間を同じ間隔にしたいので、黒い編集画面を呼び出し『Y軸』の数字を手入力します。
2pxだけ変更したければ、最初から入っている数字に＋２か－２をすればOKです。
次は『シェイプ』で入力して欲しいあたりを囲んで、目立たせます。
（ここのグループ化がよくわからず困りました。。インプットが透明な四角の下に隠れているのか、選択出来ないのです・・まだよくわかりませんが、なんとかしました笑）
ボタンの色を、デフォルトの青から赤に変更します。
左側にある『スタイル』タブからスタイルに飛んで、該当のボタンを探して選択します。
あとは色をお好みに変えるだけです！
バブルのデータベースの設定方法
さあ、ついにデータベースの時間です！
データベースは極初期に作っておかなければ、『見た目』も『ワークフロー』も設定できず（出てきて欲しいものが出てこない）困りますので、ワークフローより先にデータベースを作ります！！ ※ここテストに出ます！
データベースのタブを開くと左側に出てくる『ニュータイプ』に作りたいデータベースの名前を書き込みます。
今回は『参戦者』と『観戦者』の2タイプのデータを集めたいと思いますので、ニュータイプに『Sansen』と『Kansen』という名前を入れます。（ここの名前は自分が分かりやすければOKです）
ニュータイプを登録してクリックして『クリエイト・ニューフィールド』をクリックすると出てくるのが以下の画面。
今回は『名前』と『メールアドレス』だけのデータを集めますので、シンプルです。
まずは『名前（Sansen-name）』のフィールドをクリエイトします。タイプは『テキスト』ですね。数字とかじゃないしね・・
こちらですね。わかりやすく画面に順番をかいてみました。
次はワークフローを設定する！
必要な分量だけデータベースを作りましたら、次は『ワークフロー』です。
正方形をクリックして、まず『何の要素について設定するのか』を設定します。
そして下にある長四角をクリックして、右の黒い編集画面を呼び出します。
右下にある『セット・アナザーフィールド』をクリックして『値』を記入します。
ここ、忘れがちですので、ご注意ください！！
ここにデータベースの名前やフィールドを設定するので、ワークフローを作り出す前にデータベースを仕上げておかないと、泣きを見ますよ！「選びたいものが、なにも出てこない・・！！」って。
そうそう、ここで重要なのが『インプットに必要事項を記入してボタンを押したら、記入した内容がリセットされる』という仕組みをしれておくことです。
この作業をしておかなければ、ずっと記入欄に前の情報が残ることになり、なんだかなぁ・・ってなりますものね！
以下、順番です。
②の『エレメント・アクションズ』を選び、③『リセット・インプット』を選択します。これでOK。
ちなみに、正方形の設定は以下のような感じです。
ユーザーが『参戦ボタン』をクリックしたら、データベースにユーザーさんの名前とメールアドレスが格納されるようにしたいので、『エレメンツ』から『エレメンツ・クリックド』を選択します。
出てきた黒い編集画面から該当の『参戦ボタン』を選択します。
そうそう、ユーザーさんが名前とメールアドレスを登録して下さったら『ありがとうメール』を自動返信したいので、そのワークフローも設置します。
長四角の設定をして、以下の黒い編集画面を出しましたら、メールの『差出人名』『題名』『本文』などを書きます。
というわけで、完了です！！
プレビューから自分宛にメールを送ってみましたが、きちんと自動返信メールが届いて、感動しました！！！
本当はここでこのLPを公開して、公開URLを貼りたかったのですが・・
なんと・・３つあるメール登録フォームのうちの1セットが、なぜか記入できませんでしたので・・
そのバグ（？）を直してからアップすることにします！
レスポンシブも設定しましたが・・最初から『スマホ専用』で作ればよかったな・・と思いました。。
まあ、とりあえずどうにかなったっぽいですので、ひとまずは良しといたしましょう！！
ヘッダーのあたりはこんな感じです。
そう・・全国の高校3年生に、『地元PR合戦』をしてもらおうという企画です！！
なぜこの企画なのか・・？
それは、私の作る新SNSに深く関係があるのです・・！
また新SNSへの思いにつきまして、ブログに熱くしたためようと存じます。
