今日の課題は、バブルのワークフローとデータベース(DB)について理解を深め、きちんと動くものをつくるという事です!
ところで今、作ろうと思っている新SNSのローンチ記念イベントを高校3年生向けに開催しようと画策しています!
そのためのイベントLPが必要な事に、今日気が付きました!(遅
肝心の新SNSは、まだ影も形もございませんが・・メールアドレスの事前登録ページだけを載せたバブルでのLP作成を通じて、
ワークフローとデータベースと仲良くなっていきたいと思います。
【バブル(Bubble.)とは?】
コードなしでプログラミングできる(webサイトやwebサービスやアプリが作れる)いわゆる『ノーコード(No-Code)』ツールです。
ビジュアル・エディターで直感的に操作できるのが、非エンジニアの強い味方!!
しかし、けっこう高機能なせいか、まともに使えるようになるには2~3ヵ月はかかると言われています。
バブルでLPをつくってみよう!
それではバブルにログインして『新アプリをつくる』をクリックします。
適当にサイトの名前をいれて、カテゴリを選びます。

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

LPの『見た目』をつくる
なんとなく、画像が入れば『それっぽく見える』気がしますので、まず画像を入れることにします!
そして『ホリゾンタル』をクリックして、画像を中央に配置します。

画像が配置できましたら、次はテキストですね!
題名をバーンと入れてみます。
太字・中央配置・色変更をします。

テキストを次々と配置し、入れていきます。
『この場所だけの文字装飾を変えたい』場合は、右の赤四角の『リムーブ・スタイル』をクリックして設定します。

今回は『お名前とメールアドレス』を事前登録してもらいたいですので、
お名前とメールアドレスを記入できる場所を『インプット』で作ります。
クリックしたら出てくる黒い編集画面で、インプット内に入れる文字や、何のタイプの情報を入れるのかを設定します。

インプットとインプットの間を同じ間隔にしたいので、黒い編集画面を呼び出し『Y軸』の数字を手入力します。
2pxだけ変更したければ、最初から入っている数字に+2か-2をすればOKです。

次は『シェイプ』で入力して欲しいあたりを囲んで、目立たせます。
(ここのグループ化がよくわからず困りました。。インプットが透明な四角の下に隠れているのか、選択出来ないのです・・まだよくわかりませんが、なんとかしました笑)

ボタンの色を、デフォルトの青から赤に変更します。
左側にある『スタイル』タブからスタイルに飛んで、該当のボタンを探して選択します。
あとは色をお好みに変えるだけです!

バブルのデータベースの設定方法
さあ、ついにデータベースの時間です!
データベースは極初期に作っておかなければ、『見た目』も『ワークフロー』も設定できず(出てきて欲しいものが出てこない)困りますので、ワークフローより先にデータベースを作ります!! ※ここテストに出ます!
データベースのタブを開くと左側に出てくる『ニュータイプ』に作りたいデータベースの名前を書き込みます。
今回は『参戦者』と『観戦者』の2タイプのデータを集めたいと思いますので、ニュータイプに『Sansen』と『Kansen』という名前を入れます。(ここの名前は自分が分かりやすければOKです)
ニュータイプを登録してクリックして『クリエイト・ニューフィールド』をクリックすると出てくるのが以下の画面。
今回は『名前』と『メールアドレス』だけのデータを集めますので、シンプルです。
まずは『名前(Sansen-name)』のフィールドをクリエイトします。タイプは『テキスト』ですね。数字とかじゃないしね・・

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

次はワークフローを設定する!
必要な分量だけデータベースを作りましたら、次は『ワークフロー』です。
正方形をクリックして、まず『何の要素について設定するのか』を設定します。
そして下にある長四角をクリックして、右の黒い編集画面を呼び出します。
右下にある『セット・アナザーフィールド』をクリックして『値』を記入します。
ここ、忘れがちですので、ご注意ください!!
ここにデータベースの名前やフィールドを設定するので、ワークフローを作り出す前にデータベースを仕上げておかないと、泣きを見ますよ!「選びたいものが、なにも出てこない・・!!」って。

そうそう、ここで重要なのが『インプットに必要事項を記入してボタンを押したら、記入した内容がリセットされる』という仕組みをしれておくことです。
この作業をしておかなければ、ずっと記入欄に前の情報が残ることになり、なんだかなぁ・・ってなりますものね!
以下、順番です。
②の『エレメント・アクションズ』を選び、③『リセット・インプット』を選択します。これでOK。

ちなみに、正方形の設定は以下のような感じです。
ユーザーが『参戦ボタン』をクリックしたら、データベースにユーザーさんの名前とメールアドレスが格納されるようにしたいので、『エレメンツ』から『エレメンツ・クリックド』を選択します。

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

そうそう、ユーザーさんが名前とメールアドレスを登録して下さったら『ありがとうメール』を自動返信したいので、そのワークフローも設置します。
長四角の設定をして、以下の黒い編集画面を出しましたら、メールの『差出人名』『題名』『本文』などを書きます。

というわけで、完了です!!
プレビューから自分宛にメールを送ってみましたが、きちんと自動返信メールが届いて、感動しました!!!
本当はここでこのLPを公開して、公開URLを貼りたかったのですが・・
なんと・・3つあるメール登録フォームのうちの1セットが、なぜか記入できませんでしたので・・
そのバグ(?)を直してからアップすることにします!
レスポンシブも設定しましたが・・最初から『スマホ専用』で作ればよかったな・・と思いました。。
まあ、とりあえずどうにかなったっぽいですので、ひとまずは良しといたしましょう!!
ヘッダーのあたりはこんな感じです。

そう・・全国の高校3年生に、『地元PR合戦』をしてもらおうという企画です!!
なぜこの企画なのか・・?
それは、私の作る新SNSに深く関係があるのです・・!
また新SNSへの思いにつきまして、ブログに熱くしたためようと存じます。