はじめに

Bubbleというノーコード/ローコードでアプリを作るサービスがあり、ちょっと言葉に癖があったりするので、チュートリアルをやってみる記録です。Bubble用語は、Bubbleのように網掛けします。
なるべく細かくキャプチャしていくので、見るだけでもBubbleってこうやるんだと感じていただければ。

これまでのチュートリアルをやってみた記事

Saving data
- 位置情報をDBへ登録して、地図にマーカーを表示
- データのInsert
- 地図
Building a sign-up system
- ユーザー登録とログイン、ログオフ
Saving and modifying data
- SNSっぽい、投稿といいね
- Repeat Groupの利用
- データのInsert、Update
Building a slideshow
- スライドショー形式のアプリ
- Pluginの利用
Sending data to pages
- Data（Things、DBのデータ）の共有
Using conditions
- 条件の利用
Defining a field as a list of things
- リストの利用
Using external APIs
- Pluginの利用による、外部APIの呼び出し
Using the chart element
- Pluginの利用による、グラフの描画
Login with Facebook ＜＜今回＞＞
- Facebookアカウントを使ったログイン

チュートリアルの記録

チュートリアルを選択

ログイン後のトップページ
＞左メニューのAcademy
＞ Learn your way
＞ By watching
＞ Interactive lessons
＞ Using the chart element

今回のサブタイトルは、「Allow users to login/sign up with Facebook」です。
タイトルそのままですね。おそらく ソーシャルログイン とか サードパーティ認証 と言われるものでしょう。

例えば私が作ったシステムに、facebookのログインIDとパスワードを教えるなんて、流出が怖すぎますよね。なので安全な方法で使える仕組みを考えた偉い人がいます。それを利用するという話です。

じゃさっそくいきます！

その前に契約の話

なんか背後に、プランが更新されるみたいなのが出てるんですけど・・！怖っ！purchase（購入）っていう単語もチラっと見えるし、何をRemindしてくれてるのか。

手前のダイアログを動かせないし、"Start"ボタンも押せない。バグか。

出せた！というか手前のウィンドウを非表示にできた！
F12のデバッガで、手前のウィンドウのstyleで display:none にして非表示にする荒業。

あれ、無料プランのはずなんだけどどういうことだろう。そして今日の日付は10/25。月が0から始まるから+1しないといけない、JavaScriptのあるあるバグのような気がしますねｗ

とりあえず「Personal」から「Starter」へのアップグレードは、今の使用量だとしても必要ないんだけど、そもそも「Personal」すら必要ないので、調査。チュートリアルから外れそうだけど、大事なことなので。いったん"Dissmiss"。チュートリアルも停止。

https://bubble.io/pricing
料金体系はこれ。＄29のPersonalから、＄32のStarterになるよとのことでしたが、Personalがない。

↑はアプリのトップ画面。すでにFree planで１つある状態でしたが、"Create an app"で、もう１つ作ったところです。"Starter plan"になってました。２つ目のアプリは、Personalプランで、２週間無料のあと、＄29になるんですかね。そしてそれが一定期間経つと自動的にStarterプランになるという感じでしょうか。

チュートリアルによって２つ目が自動的に作られたので、この"Starter plan"が発動して、メッセージが出たようです。まぁ最悪でも29ドル。もしそうなったら誰かのお役に立つための人柱となりましょう。
作ってみたtest1は削除し、様子を見ます。
ちなみにチュートリアル中にトップ画面を見ても、チュートリアルのアプリは存在しないし、終わったらたぶん消えてます。

さて気を取り直して、チュートリアルをもう一度始めます！

Facebookプラグインをインストール

Facebookのプラグインを追加。常に成長を続けるというのは、開発が続けられているんでしょうかね。

Bubble社製でした。
インストール画面に、Plugin pageというリンクがあって、そこで詳細が見られます。
どうやら、「ポストの閲覧」とか「いいね」、「投稿」などもできるようです。

インストールすると、接続用のいろいろ設定画面。このチュートリアルでは、ここは入力してくれるそうです。（本来は、Facebookのどこからか、入手しないといけないんですね）

サインインボタンを追加

"Facebookでログイン"のボタンを追加するだけ。

ログイン情報を表示

グループを追加して、textを置き、Dynamic dataで "Current User's Facebook's First name"。
つぎに"Last name"も追加。

画像も"Current User's Facebooks Profile picture"で。

見た目はここまでで、ログインボタンに戻って、処理を入れます。

ログインボタン押下時の処理を追加

"action menu"の中から、"Account"＞"Signup/login with a social network"。このメニューは前からあったのか、プラグインをインストールしたから出たのかわかりませんでしたが、第２回目のチュートリアルの記事でログインがあったので見返してみたら、もともとありました！

"OAuth provider"でFacebookを選びます。たぶんこれは、インストールしないと出てこないやつかと。

わっ！これだけ！簡単。

ログアウトボタンを追加

ボタンを追加して、すぐさまWorkflowへ。

"Account"＞"Log the user out"を選択。

で、これだけ！楽！

わーもうおしまい。プレビュー！

プレビューで動作確認

プレビューを起動すると、画面上部にふわっとメッセージが出る。
日本語でも意味が分からないけどまぁいいか。

ログイン！

ご利用いただけないのかいっ！

でもメッセージは、facebook.comから来てるので、アクセスはできているみたい。

閉じるを押すと、生のJSONが表示されました。OAuth Providerのステータスがみつからない（？）。自動的に入れてくれたやつが、もう有効期限切れみたいになっているのかもしれません。

ログインボタンを押すと、Facebookに飛んで、
Facebook上でログイン処理が行われ、
Facebookが「ログインOK」というお墨付きを発行し
アプリがお墨付きをゲットし、アプリにログインできたことにする
アプリはそのお墨付きを使って、Facebookから情報をもらう
という流れだったはずです。

まぁ今回、どうしてもログインしたいわけではなくて、やり方を学ぶことが目的なのでここまでにしましょう。

おわりに

ソーシャルログイン は、ユーザーは、IDやパスワードを入れずボタンを押すだけなのでかなり簡単です。そしてBubbleでは構築する人も、プラグインを入れるだけなので簡単。プラグインの構築者が、OAuthの機能を実装してちょっと苦労している、ということでした。

また今回はFacebookでしたが、LINEやYahoo!、Google、Xなどもほぼ一緒でしょう。でも、OAuth認証のことを少しは知らないと、ページ遷移とか、トラブルがあったときに対応しようがないかもしれませんね。

それと最初に出た契約関連。これははっきり言って、めんどくさいです。エンジニアはたぶん嫌いな人が多い。でもBubble(に限らず)構築者は、構築の依頼者からお金をもらって契約もしないといけないので、ここは正しく理解しておかないといけないですね。落ち着いて見てみれば難しくはないはずなので、やっつけで解決せずに見てみましょう。

では、よきBubbleビジネスライフを！

Next

Bubbleのチュートリアル１１：Graduation lesson: a to-do app