昨日はバブルでLPを9割作りましたが、『フォームに記入できない』というバグが出てしまいました。
そのバグを直すついでに、フォームを入れたら『PopUp』が出るようにしたいと思います!
それに、文字にアニメーションも入れたいわ・・!
ということで、今日はその2つを課題といたしましょう!
【バブル(Bubble.)とは?】
コードなしでプログラミングできる(webサイトやwebサービスやアプリが作れる)いわゆる『ノーコード(No-Code)』ツールです。
ビジュアル・エディターで直感的に操作できるのが、非エンジニアの強い味方!!
しかし、けっこう高機能なせいか、まともに使えるようになるには2~3ヵ月はかかると言われています。
フォームに記入できない! を解決する
この原因は、簡単でした・・
フォームの枠にしていた『シェイプ』がフォームの『インプット』たちの上に透明なガラスのようにかぶさっていて、
それが原因でフォームに記入ができなくなっていました。
となれば、『シェイプ』より上に『インプット』が来ればよいわけです。
左側の赤四角の所から、該当の『インプット』を選択します。
そして、右クリックして右クリックタブを開いたら、そこに『Bring to front』を見つけます。
それをクリックすれば完了! 無事、フォームが記入できるようになりました!

フォームにポップアップを設定する
次は、フォームに必要事項を記入してボタンを押したら、お礼のポップアップが出現するようにしたいと思います!
左下の赤四角から『ポップアップ』を選び、ドラッグしてポップアップを描きます。
ポップアップは普段は見えなくて、ワークフローで設定して出現させるようです。
ポップアップの箱を正方形にしたければ、右側の黒い編集画面の下の方で手入力します。
今回は『画像』と『テキスト』をポップアップに設置したいので、左の上二つの赤四角を選択して、それぞれ設定します。

それでは、ワークフローでポップアップを出現させる設定をします。
前回までに設定した『参戦ボタン』の正方形をクリックして、下に長四角たちを出現させます。
『リセット・インプット』の次の『クリエイト・アクション』の所をクリックして『Show』を選びます。
そして右に出てくる黒い編集画面で『ポップアップさせたいポップアップ』を選択します。
以上、完了です!
私はこのあとに「ポップアップを出したら、消さなくては」と思い『Hide』を設定したりしたのですが、
そうするとフォームを記入しても、何も出てこない状況に陥りました。
考えた挙句、『Hide』の項目を消してみたら、ポップアップが出現するようになりました!!
ポップアップは、画面をクリックしますと消える仕様のようです・・
ここ、少しハマりましたので、お気をつけて・・

フォームを書いてボタンを押すと、
武者がポップアップされます!!
やったね!!

文字にアニメーションをつけよう!
では、ついでに文字にアニメーションをつけてみたいと思います!
アニメーションは『ワークフロー』で設定します。
ワークフローを開きましたら、正方形をクリックして『When ページ・ロード』を選択します。
そして、下の長四角をクリックして『エレメント・アクション』から『アニメーション』を選択します。

そして、アニメーションを選択すると出てくる黒い編集画面の一番上で、『アニメーションさせたい項目』を選択します。
テキストやボタンなどが並んでいます!
それを選びましたら、上から2つめの所のドロップダウンから、好きな動きのアニメーションを選択します。
スクショは取れませんでしたが(動きが速すぎて)ドロップダウンの項目にカーソルを合わせますと、それぞれの動きが目で見て確認できますので、わかりやすいです。
これで、ページを開いたら文字が動きます(アニメーションします)!

さあ、LPを公開しよう!
ここまで出来ましたら、もう公開しちゃいましょう!!
右上の赤四角の所をクリックして『デプロイ~』という項目を出現させます。
それをクリックします。

『デプロイ(公開)・メッセージ』という項目が出てきますが、これが何用なのかまだよくわかりませんので、適当に文字を入れておくことにします。
そして『デプロイ(公開)』をクリックしましたら、公開URLが発行されて、めでたく公開の運びとなりました!!

公開しましたら、データベースを『ライブ・データベース』に変更しておかなくてはなりません。
データベースの所に行って、右側の赤四角の所をクリックして『ライブ』にします!
これでOKかしら・・??
その左の『コピー&~データベース』の項目がまだ謎ですが、早いうちにこの項目が何なのか、知っておいた方が良い気がします・・!
ともあれ、これで公開完了です!!
内容はこれからいろいろ変更して参りますので、ここではまだURLは内緒にしておきます☆
