【Bubble】Element templatesを改めて確認しよう ２、「Log in」「Reset Password」
こんにちは。NoCodeNinjaです。
今回は、前回の続きで「Log in」と「Reset Password」を紹介します。
前回はこちら
今回はその続きで、Element templatesにある「Log in/Reset Password」です。
NoCodeBankでもアレンジして採用しています。
前回同様、既に用意されているのでそのまま使うわけですが、機能としてきちんと確認しておくと後々に応用が利いたりとメリットがあるので今回も紹介します。
理解しておいた上で使うほうがやはり良いのは、何においても言えますよね。
またBubbleがあらかじめ作っているということはOfficialの作り方を覗けるということでもあるので、App作りの一つの物差しにもなるかと思います。
そういう視点でも、意味があります。
それでは、いってみましょう。
構成しているElement(Log in/Reset Password)
前回同様、基本的にシンプルですので特徴のあるところをとらえつつ見ていきましょう。
２つとも構成している各Elementの値は同じです（サイズや位置を除く）。
Input
- Input全てに「This input should not be empty」のチェックを入れている
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「150」
前回の「Sign up」と値がほとんど同じです。統一感から考えると当然ではあります。
Text
こちらも特別変わった設定は無いのですが、前回同様
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
というところです。
Button
- 「Minimum width」は「50」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「100」
Shape
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
Checkbox
こちらにはCheckboxが設置されています。
パスワード記憶用ですね。
- 「Minimum width」は「50」
- 「Apply a max width when the page is stretched」のチェックは外している
Checkboxは文言用のTextも備わっているので、Minimumの値は大きめです。
以上、「Log in/Reset password」の全エレメントです。
Sign upの時と共通しているものがほとんどですね。
Workflowを確認
続いてWorkflowを見てみましょう。
When Button Log In is clicked
「Log in」Buttonをクリックすると各inputの値が入るという、もうお馴染みの仕様ですね。
ただ一点、「Stay logged in」の項目は「Checkboxにチェックが入っているとPasswordを記憶する」という指定がされています。
逆に言うと他のElementでも指定すればパスワード記憶を実行することが出来るわけです（Checkboxで十分ですけどね）。
When Button Forget password is clicked
そのままですが、パスワードを忘れた時のReset Passwordを表示させる挙動です。
至ってシンプルです。
When Button Send Reset Link is clicked
こちらはここにしかない機能ですので注目です。
パスワードリセットのメールについて設定していて、送り先はinputの値で珍しくはないのですが、パスワードリセットのメールの件名と内容はこちらで設定することになっています。
メールの文言自体を完全オリジナルで作れるわけです。
デフォルトは英語ですので書き換えます。日本語で書き換えるというと通常は「Settingsタブ」「Languages」から変更していたのですがこちらだけはここのみになります。
内容的に一度設定してしまえば特に変更することはない性質なのですが、もし変更したくなった時に「あれ？どこだったっけ」となると厄介ですので覚えておきましょう（筆者探したことがあります・・）。
When Button Switch to Sign up is clicked
こちらはSign upへの切り替えButtonを押した時の挙動です。
前回同様Set stateでSign upへ一発で行くように指示しています。
以上で、設定は全て紹介しました。
前回と違う点は正直そんなに多くないので、ここで筆者NoCodeBankのサイト用にアレンジした箇所を紹介しておきます。
実際に設置する際の参考にしていただけましたら幸いです。
NoCodeBankで追加した箇所
プロフィール画像、Twitter URL
こちらをSign up時に設定しました。
DBへの値は他のinputの同様に設定すればOKです。
利用規約＆プライバシーポリシー
こちら2点をリンクでjump出来るように設定→「Sign the user up」で「Checkboxにチェックが入っていたら動く」ようにWorkflowを設定しました。
reCAPTCHA
以前紹介したreCAPTCHAです。
詳しくは以下をご覧ください。
Twitterログイン
Twitterログインの機能も追加しています。
ちょっと複雑なのでまた別記事にて紹介します。
以上で、全て紹介しました。
まとめ
いかがだったでしょうか。
BubbleのOfficialで用意されているというところに意味があり、色々参考にすることが出来ます。
そこから自分で機能を追加したりということで、Bubbleではアカウント周りで大きく失敗することはあまり無さそうです。
もし使わない場合でも、WorkflowでAccountの選択肢が豊富に用意されています。
今回のことを理解出来れば、自分で一から作ることも簡単です。
色々試してみてはいかがでしょうか。
それでは、また！
【Bubble】Element templatesを改めて確認しよう １、「Sign up」
こんにちは。NoCode Ninjaです。
今回は、BubbleのElement templatesであらかじめ備えられているSign up (アカウント登録＆ログイン機能)について紹介します。
どのAppを作っても、デフォルトで用意されているElement templatesですので非常に便利に使えます。
pop upになっていますね。
英語なのが少々厄介ですが、書き換えて使えますので有効活用するほうがやはり効率的です。
筆者のサイト「NoCodeBank」でもこちらを元にアレンジして採用しました。
既に用意されているのでそのまま使うわけですが、機能としてきちんと確認しておくと後々に応用が利いたりとメリットがあるので今回紹介します。
理解しておいた上で使うほうがやはり良いのは、何においても言えますよね。
またBubbleがあらかじめ作っているということはOfficialの作り方を覗けるということでもあるので、App作りの一つの物差しにもなるかと思います。
そういう視点でも、意味があります。
それでは、いってみましょう。
構成しているElement
結構数がありますね。各Elementの設定自体は結構シンプルですので特徴のあるところを取り上げていきます。
Input
- 全て「This input should not be empty」のチェックを入れている
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「150」
１については入れる値はすべて重要項目ですので、こちらは欠かせないところですね。
２と３は興味深いです。input設置の際のResponsiveの概念としてストックしたいところです。
Text
こちらは特別変わった設定は無いのですが
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
というところです。
Button
二種類のButtonがあります。サイズがかなり違うものの設定自体はほぼ同じです。
- 「Minimum width」は「50」
- 「Apply a max width when the page is stretched」にチェックを入れており、値「100」
他のElementとやや設定が異なっています。Buttonでありながら「Make this element fixed-width」のチェックは入っていないところも興味深いです。
Shape
こちらも特に変わったところはありません。
- 「Minimum width」は「20」
- 「Apply a max width when the page is stretched」のチェックは外している
以上で各Elementを見ましたが、シンプルに作られています。
当然ですがResponsiveも美しく、各Elementの使い方の良い見本になると思います。
Workflowを確認
続いてWorkflow。たくさん設定されていますが、今回はSign up（アカウント作成）関係に絞って紹介します。
When Button Switch to Sign up is clicked
Step1でアカウント登録が実行されて、Step2でポップアップが隠れる設定になっています。
そのあとは何も設定が無いので、「登録確認メールを送りました」などを加える必要があるかもしれません。
その際は別のページを作ったりPop upを追加するなどを設定しましょう。
When Button Switch to Login is clicked
Step1で「Set state」を使っていますね。Elementを「Show」「Hide」で組み合わせるイメージだったのですが意外です。こちらのほうが動きがシンプルなので良いですね。
また、Step2で「Set focus」を使い、inputにポイントを当てるように設定しています。
この流れは知っていると役に立つやり方ですね。ストックストック。
以上、Sign upの紹介でした。
まとめ
いかがだったでしょうか。地味ですが改めて一つ一つを見直してみると、やはり発見が多いものです。
ブログを書きながら改めて感じたのは、最初に書いた通りいわばOfficialが出している一つの作成の見本みたいなものになりますので参考になりますし、App作りの物差しを作るという意味で非常に大きかったです。
次回はLog in（ログイン）について同じように紹介していきます。お楽しみに！
それでは、また！
【Bubble】Workflow「Element Actions」で動きをつけてみよう
こんにちは。NoCode Ninjaです。
今回は、Workflowでのエレメントの動作について紹介します。
Workflowからエレメントを動かすときは「Element Actions」から「show」を選んでいると思いますが、バリエーションが充実していますので色々試してみるのをオススメします。
使い方次第でページを良い感じにできますので、使わない手はないですよね。
それでは、いってみましょう。
Element Actionsの種類
種類は以下のようになっています。一つずつ紹介していきます。
Show
普段はこちらを一番使っていることと思います。
純粋に「動かす」というところです。
Hide
こちらも同様に、よく使っていることと思います。
inputやPopupなどはある意味ShowとHideがセットのようなもので、動かしたらHideする（終了させる）ということで使っていきましょう。
Toggle
こちらは「見えているものを隠し、隠しているものを見えるようにする」です。
Animate
こちらは、「動きをつける」というところです。
種類がかなりあり、普通にShowを使うのも良いですがこちらを上手に使うことでページの印象がかなり変わることと思います。
- 「Callout」シリーズ
直訳すると「要求する」ですが、純粋に各種動作を指定するというところです。
BounceやFlashなど各種動きが用意されていますので是非確認してみてください。
- 「Transition」シリーズ
直訳すると「変化する」ですが、色んな種類が用意されていてここでは紹介しきれないくらいなので実際にBubbleで確認してみてください。
hovorするだけで色んなサンプル表示がありますので選ぶ楽しさもあります（笑）
試しに4種類ほど用意してみました。
- ４つをGroup化し、Groupの「This page is visible on page load」のチェックを外す
- When Page is loaded→Animate Group A「Transition Fadein」→「Define a custom duration」をチェック→3000ms
- Button「動きます１」clicked→Animate「Callout Shake」
- Button「動きます２」clicked→Animate「FlipYOut」
- Button「動きます３」clicked→Animate「Transition BounceOutIn」
- Button「動きます４」clicked→Animate「Transition Perspective LeftIn」
このように設定してみました。
１は、２のFadeInをスムーズに表示させるために設定しています。
是非実際に確認して、動かしてみてください。
なかなかバリエーション豊かな動きで楽しいです（笑）
Scroll to
こちらはスクロールダウンする設定が出来ます。
Offsetで値を設定できますが、スクロールアップは出来ないようです。（マイナス-も不可でした）
上記のページに動作するButtonを設置していますので、どうぞご覧ください。
以上、Element Actionsの説明でした。
まとめ
いかがだったでしょうか。筆者は初めてElement Actionsに触れた時は単純に「楽しい！」と感じたものです（笑）
是非是非、実際に試してみることをオススメします。
有効活用すれば、No Codeで作ったプロダクトでもオシャレに演出できるはずですよ♪
それでは、また！
【Bubble】お問い合わせフォームを作ろう ２、通知をE-mailに送る方法
こんにちは。NoCodeNinjaです。
今回は、前回に引き続きBubbleを使って「お問い合わせフォームを作ろう」を紹介します。
前回はこちら
https://nocodejp.hatenablog.com/entry/form
今回は、「inputの値をデータベース（以下DB）に格納する設定にし、通知をE-mailに送る」を紹介します。
前回のやり方に比べると、DBに入っていくので管理がしやすいことがポイントです。
「あの問い合わせがどこにあるかわからない」を防ぎ、一括で管理できます。
DBに値が入った時に通知する設定
DBは管理がしやすいのですが、通知がきちんと届くように設定しないと当然気づきません。
ここの設定をしていきましょう。
エレメントを設置する
まずは前回使ったエレメントがありますので、そのままコピペしましょう。
なぜわざわざ書くかというのも、Bubbleにおいてエレメントを上手にコピペすることは作業の効率化に大いに役立ちます。
UI的にサイズなど合わせる部分が多いので、使いまわしてしまったほうが統一感も出ますし（だって同じものだもん）効率がいいというわけです。
少し余談ではあるものの、結構大事なのでひとくちコメントということで（笑）
DBの設定
データベース側で、各種設定を進めます。
新しいTypeが必要になるので、ここでは「お問い合わせ」という名前のTypeを作ります。
- Dataタブから「New Type」のところで「お問い合わせ」と入力し作成。
- 「Create a new field」にてそれぞれ4件「返信用アドレス」「送信者名」「件名」「詳細」というFieldを作成。
すると、以下のような状態が完成します。
それぞれのinputに合わせたfieldを作ることができました。
Workflowの設定
続いて、WorkflowにてDBへ値を入れる設定をしましょう。
「Button（問い合わせる）のWorkflowでInputの値を入れる」という設定になります。
Buttonの「Start/Edit Workflow」を押し、「Data(Thing)」から「Create a new thing」を選択。
以下の画像のように設定します。
これまで通り、inputの値をそれぞれのData fieldに入れていくという設定ですね。
そして、この後に通知としてのE-mailを送る設定をします。
Step2
Step2を設定します。
「Data(thing)」から「Send E-mail」を選択。
以下の画像のように設定。
「To」には自分が受信したいメールアドレスを指定。
「Sender name」はあくまで通知なので無くても良いのですが、inputの値を入れておくとわかりやすくなります。
「Subject」には通知用の文言として「お問い合わせがありました。」と設定してみました。
「Body」も無くて良いのですが、入れておくと確認と記録に良いかもしれません。
そして今回「Only when」に画像のような設定をしています。
これはinputの値が無かったりDBに正常に入らなかった時のために念の押して設定しています。
inputの値が入らない時点でButtonが動作しないように設定してはいるものの、こうしておくとより確実です。
Step3
最後に、Step3で「Reset relevant input」を設定しておきましょう。
送信しても残ったままというのは何とも気持ちが悪いものです。
これで、設定は完了しました。
確認してみましょう。
テスト
それでは、各inputに値を入れて送信してみましょう。
以下のように入れてみます。
「問い合わせ」Buttonを押し、きちんと受信できているか確認します。
無事受信出来ました！
これで問い合わせのたびにこの内容で通知が入ります♪
まとめ
以上、二回に分けてお問い合わせフォームとその設定についてを紹介しました。
DBに入れて通知するやり方のほうがスッキリする部分もありますが、ボリュームによって使い分けるのも良いかもしれません。
このように設定のバリエーションは色々ありますので、実際にやってみて自分のスキルもデータベース化していきましょう。
と、DBと若干かけたところで収まりよく（笑）まとめを終わりたいと思います。
それでは、また！
【Bubble】お問い合わせフォームを作ろう １、inputの値をE-mailとして受信する
こんにちは。NoCode Ninjaです。
今回は、Bubbleを使って「お問い合わせフォームを作ろう」を紹介します。
Webサイトには欠かせない「お問い合わせフォーム」。
もちろん、Bubbleを使ってできちゃいます。
送信側はinputフォームに入力して送信することで既にお馴染みなことだと思います。
では、受信側はどのような設定にしているのでしょうか。
気になりますね。
それでは、いってみましょう。
どのような形で受信し、閲覧するか
上記の通り、サイト利用者にinputフォームにて入力してもらいます。
お問い合わせフォーム自体は、inputエレメントを作り値を入力してもらい、こちらに送信してもらう設定です。
ただその方法はどうすれば良いでしょうか。
筆者は、二つの方法を考えてみました。
E-mailとして受信する
そのまま、入力された値をE-mailとして受信する設定です。
E-mailを確認するだけで、一通り確認できるような形で設定します。
inputの値をデータベースに格納する設定にし、通知をE-mailに送る
単純にデータベースに入れる設定にすれば、入っている値を確認するだけでOKです。
ただしいつ入ったか気づくのは随時確認しないとわからないので、通知を設定します。
今回は、前者のE-mailとして受信するを紹介します。
設定方法
各エレメントを設置
それでは、エレメントを配置していきましょう。
複数のinputと、問い合わせ送信ボタンを設置していきます。
今回はinputを複数用意しますので、先にGroupエレメントを作って格納していくようにしましょう。
Responsive面でも有利になります。
まずはGroupを設置。大きめに取ります。
ここに、inputとbuttonを設置します。
今回は、「返信用アドレス」「送信者名」「件名」「詳細」の４つを設定します。
inputを３つ設定し、「詳細」は複数行になるので「Mulltiple input」にて設置します。
「text」も置きつつエレメントごとにGroup化し、設置しましょう。
以下の画像のようにします。
各Textとinputをgroup化するには２つを選択してから「Group elements in a group」とすると便利です。
これで、側の部分は完成です。
Workflowを設定する
Buttonから「Start/Edit Workflow」をクリックし、Workflowへ。
「E-mail」から「Send E-mail」を選択します。
「To」は受信したいアドレスを入力。データベースに入っている場合は「Dynamic Data」より入力。
以下、各欄をクリックし「Dynamic Data」へ進み、値を下記のように入力。
「Specify a different reply-to address」にもチェックマークを入れます。
すると返信用アドレスを記入する「Reply to」が出てきますので、こちらも入力。
inputは上から順番にA,B,Cで設定しています。
WorkflowとDynamic Dataについては、過去の記事をご覧ください。
https://nocodejp.hatenablog.com/entry/database1
また以前のように、問い合わせボタンを押したら「Reset relevant inputs」でinputの値を消す設定もしておきましょう。
これで設定は完了しました。
送ってみる
それでは、実際に送ってみましょう。
これで送信してみます。
Gmailで受信出来ました！
この設定にしておけば、送られてきた問い合わせは任意のメールアドレスに入ってきます。
実際に作ったページがありますので載せておきます。
https://girls-tunnel.bubbleapps.io/version-test/test2
補足：上のリンクについて、ブログの設定通りでは実際に動かしても当サイトに届くだけでライブ感が無いので、内容を以下に変更しました。
「To」にinput Aの値を指定しましたので、メールアドレスを入れてもらえるとそちらに届くようになっています。
こちらのDBも通りませんので直接届くようになっています♪
是非、ライブ感を楽しんでいただけたらと思います。
まとめ
多くのWebサイトにある問い合わせフォームが簡単に設定できましたね。
Webサイトを作る場合は必須だと思うので、是非やってみてください。
次回は「inputの値をデータベースに格納する設定にし、通知をE-mailに送る」を紹介します。
それでは、また！
【Bubble】 Bubbleでの超重要な機能「データベース」 ４、Workflowを使って値を指定して削除しよう
こんにちは。NoCode Ninjaです。
今回も前回に引き続き「データベース（以下DB）」について紹介します。
前回はDB関連の実装で非常に良く使う「繰り返し処理」について学びました。
前回はこちら
今回は、これらの値を削除する動作の設定を紹介します。
ここまで出来てきたら、DB周りの基本的なことは一通りこなせるのではないかと思います。
それでは、いってみます。
入っている値を削除する
ここまでの流れは、DBに値を入れて表示するという繰り返し処理のWorkflowを作りました。
続いて、入れた値を削除するという設定をしてみましょう。
指定して削除
今回は「Dropdown」エレメントを使って項目を指定し、削除ボタンを押して削除する機能をつけてみます。
Dropdownエレメントを選択し、下のほうに貼り付けます。
Buttonそのものは既に「作成」Buttonがありますのでそれをそのままコピペし、表示を「削除する」に置き換えましょう。
- Placeholderは「削除したい項目を選択」に書き換える
- Choices styleは「Dynamic choices」を指定
- Type of choicesは「test」を選択
- Choicesは空欄をクリックして「Dynamic Data」から「RepeatingGroup test's List of tests」を選択
- Option captionも「Dynamic Data」から「Current option's corner1」を選択
これらを設定すると、以下のようになります。
BackgroundやBorderなども少しいじりました。
（デフォルトでは何故か選択肢の背景が青色だったり・・）
上記の設定で、Repeating Groupの中のtestから直接選択可能になりました。
この選択したものを、Workflowを使って削除するという指示を設定します。
Buttonエレメントですが、既にある「作成」Buttonをコピペしちゃいましょう。
「選択して削除」に書き換えました。
続いて、「Start/Edit Workflow」でWorkflowへ。
Data(things)から「Delete things...」を選択
設定はシンプルです。下記のように設定します。
Dropdown指定の値に合わせて削除が動作します。
設定はこれで完了です。
各エレメントのサイズやUIを整えて、実際に試してみましょう。
うまくいきました♪
これで自分で書いて自分で消すということが出来るようになりました。
実際にURLを載せておくので、試してみてください。
まとめ
いかがだったでしょうか。
エレメントを複数絡めてWorkflowを設定しても、流れが一つ一つきちんと考えれば全く難しくないことがわかったのではないかと思います。
Workflow含め全て英語表記なので細かいところはまだとっつきにくさは感じると思いますが、これから徐々に紹介していくので色々試してみましょう！
それでは、また！
【Bubble】Bubbleでの超重要な機能「データベース」 ３、Repeating groupを使って繰り返し処理をしよう
こんにちは。NoCode Ninjaです。
今回も前回までに引き続き、Bubbleでのデータベース（以下DB）関連の紹介をします。
シリーズ１，２はこちら
今回は、「データベースに値を入れて取り出す処理を繰り返す」です。
「Repeating group」にて場所を用意して指定のDBの値が繰り返し表示されるように設定すると、その値を入れていくだけで繰り返し表示してくれます。
掲示板サイトなどの仕様にこれが多いです。
これをBubbleで実装します。それでは、いってみましょう。
エレメントを設置
Repeating Group
BubbleではDBからの呼び出しで非常に良く使うのがこの「Repeating group」。
値を入れるたびに増えていく「繰り返し処理」には欠かせません。
設置し、設定をしていきます。
まずは前回までのようにinputとbuttonを設置。
こちらはDBに値を入れるエレメントになります。
そして実際に出す場所「Repeating group」を設置しましょう。
Designタブから「Repeating group」エレメントを選択し、任意の場所へ設置します。
「Edit」画面も出てきました。
赤く囲まれている「Type of content」の欄は「test」を選びましょう。
すぐ下の「Data source」には「Do a search for」から「test」を選択。
これで「test typeの値をrepeatする」という設定となります。
以下、「Rows」で行数を整えたり、「Column」で縦列を設定。
デフォルトでは区切りが点線（Dashed）なので、線の種類を「Separato」で設定。
「Width」でその幅、「Color」で色を設定します。
今回は下の画像のセッティングで大丈夫です。
Text
今回はここに、Textを入れて繰り返す処理を設定しましょう。
「Repeating group」上に以下の画像のように設置します。
きちんと設置できると上記のように自動的に複数表示されます。
ここから、値を設定します。
設定は既に、「Repeating group」で指定しているので非常にシンプル。
「Insert Dynamic Data」から「Current cell's test's corner1」です。
これでinputから入れた「test's corner1」の値が繰り返されます。
これで設定は完了です。
テスト
inputに値を入れて繰り返す
実際にやってみましょう。
「ひとつめ」を入れてみます。
「作成」ボタンを押してみましょう。
ふたつめもやってみます。
成功しました♪
更にいくつか入れてみます。
延々と繰り返すことが可能です。
完成ですね♪
作ったページを載せておくので、実際に値を入れて動作を試してみてください。
補足
最近のサイトで多いのは、「一番上に最新の投稿がくる」という仕様です。
そうしたい時は、「Repeating group」の設定で「Do a Search for」からの「Sort by」を「Corner1」で選択。「Descending」を「”yes”」にしましょう。
これで上から最新となります。
まとめ
今回は繰り返し処理について紹介しました。
このシステムを使えば、掲示板など様々なサイトで活用できます。
ここまで来たら、流れはしっかり理解できているのではないでしょうか。
一つ一つ、実践しながら学んでいきましょう！
次回は他のデータベース関連の処理を紹介する予定です。
それでは、また！
