ノーコード(no-code)

【超初心者日記】Day8:バブルでLP作りました② ポップアップとアニメーションつけた【Bubble.で1か月でSNSは作れるのか・・?!】

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

昨日はバブルでLPを9割作りましたが、『フォームに記入できない』というバグが出てしまいました。

そのバグを直すついでに、フォームを入れたら『PopUp』が出るようにしたいと思います!

それに、文字にアニメーションも入れたいわ・・!

ということで、今日はその2つを課題といたしましょう!

バブル(Bubble.)とは?】

コードなしでプログラミングできる(webサイトやwebサービスやアプリが作れる)いわゆる『ノーコード(No-Code)』ツールです。

ビジュアル・エディターで直感的に操作できるのが、非エンジニアの強い味方!!

しかし、けっこう高機能なせいか、まともに使えるようになるには2~3ヵ月はかかると言われています。

バブルもプログラミングも超初心者なよーこふ。

さて、たった1ヶ月でバブルでの自作SNSはリリースできるのか・・?!

フォームに記入できない! を解決する

この原因は、簡単でした・・

フォームの枠にしていた『シェイプ』がフォームの『インプット』たちの上に透明なガラスのようにかぶさっていて、

それが原因でフォームに記入ができなくなっていました。

となれば、『シェイプ』より上に『インプット』が来ればよいわけです。

左側の赤四角の所から、該当の『インプット』を選択します。

そして、右クリックして右クリックタブを開いたら、そこに『Bring to front』を見つけます。

それをクリックすれば完了! 無事、フォームが記入できるようになりました!

バブルLP02

フォームにポップアップを設定する

次は、フォームに必要事項を記入してボタンを押したら、お礼のポップアップが出現するようにしたいと思います!

左下の赤四角から『ポップアップ』を選び、ドラッグしてポップアップを描きます。

ポップアップは普段は見えなくて、ワークフローで設定して出現させるようです。

ポップアップの箱を正方形にしたければ、右側の黒い編集画面の下の方で手入力します。

今回は『画像』と『テキスト』をポップアップに設置したいので、左の上二つの赤四角を選択して、それぞれ設定します。

バブルLP01

それでは、ワークフローでポップアップを出現させる設定をします。

前回までに設定した『参戦ボタン』の正方形をクリックして、下に長四角たちを出現させます。

『リセット・インプット』の次の『クリエイト・アクション』の所をクリックして『Show』を選びます。

そして右に出てくる黒い編集画面で『ポップアップさせたいポップアップ』を選択します。

以上、完了です!

私はこのあとに「ポップアップを出したら、消さなくては」と思い『Hide』を設定したりしたのですが、

そうするとフォームを記入しても、何も出てこない状況に陥りました。

考えた挙句、『Hide』の項目を消してみたら、ポップアップが出現するようになりました!!

ポップアップは、画面をクリックしますと消える仕様のようです・・

ここ、少しハマりましたので、お気をつけて・・

バブルLP09

フォームを書いてボタンを押すと、

武者がポップアップされます!!

やったね!!

バブルLP03

文字にアニメーションをつけよう!

では、ついでに文字にアニメーションをつけてみたいと思います!

アニメーションは『ワークフロー』で設定します。

ワークフローを開きましたら、正方形をクリックして『When ページ・ロード』を選択します。

そして、下の長四角をクリックして『エレメント・アクション』から『アニメーション』を選択します。

バブルLP04

そして、アニメーションを選択すると出てくる黒い編集画面の一番上で、『アニメーションさせたい項目』を選択します。

テキストやボタンなどが並んでいます!

それを選びましたら、上から2つめの所のドロップダウンから、好きな動きのアニメーションを選択します。

スクショは取れませんでしたが(動きが速すぎて)ドロップダウンの項目にカーソルを合わせますと、それぞれの動きが目で見て確認できますので、わかりやすいです。

これで、ページを開いたら文字が動きます(アニメーションします)!

バブルLP05

さあ、LPを公開しよう!

ここまで出来ましたら、もう公開しちゃいましょう!!

右上の赤四角の所をクリックして『デプロイ~』という項目を出現させます。

それをクリックします。

バブルLP06

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

そして『デプロイ(公開)』をクリックしましたら、公開URLが発行されて、めでたく公開の運びとなりました!!

バブルLP07

公開しましたら、データベースを『ライブ・データベース』に変更しておかなくてはなりません。

データベースの所に行って、右側の赤四角の所をクリックして『ライブ』にします!

これでOKかしら・・??

その左の『コピー&~データベース』の項目がまだ謎ですが、早いうちにこの項目が何なのか、知っておいた方が良い気がします・・!

ともあれ、これで公開完了です!!

内容はこれからいろいろ変更して参りますので、ここではまだURLは内緒にしておきます☆

バブルLP08

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

「ポップアップ、簡単だよ!」

って言われて、ポップアップを作り始めたのですが、手探りでしたので予想外に時間がかかってしまいました・・

次は簡単にできると良いな。

アニメーションも、最初はワークフローの正方形で設定することに気が付かず、『見た目』のエディターをひたすら探しておりました・・

まだまだバブル内で迷子になっております・・笑

さあ、LPも出来ましたし(草案ですけど)、明日からはいよいよSNSの骨格を考えていきたいと思います!!