ノーコードで有名なBubble。
何から始めていいのか分からない。
登録したけどどうすればいいのか分からない。
まずはレッスンチュートリアルから始めるのがいいです。
ここではレッスンの「Login with Facebook」について書いています。
Login with Facebook
![Bubbleのレッスン](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174730400.jpg)
Login with Facebookは、Facebookでログインするようにするアプリです。
ユーザーがFacebookにログイン/サインアップできるようにします。
3 minutes(3分)
![Bubbleのレッスン1](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174830649.jpg)
フェイスブックのログイン、ログアウトがワンクリックでできます。
![Bubbleのレッスン2](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174854356.jpg)
まずはプラグインをインストールします。
![Bubbleのレッスン3](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174909796.jpg)
Plugin(プラグイン)をクリックします。
![Bubbleのレッスン4](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174913598.jpg)
Add plurinsをクリックします。
![Bubbleのレッスン5](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_174957491.jpg)
プラグインの中からFacebook(フェイスブック)を探します。
install(インストール)をクリックします。
![Bubbleのレッスン6](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_175004443.jpg)
DONEをクリックします。
アプリを登録し、FacebookアプリIDとアプリシークレットコピーする必要があります。
Design(デザイン)をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_180921405.jpg)
Button(ボタン)をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_180952097.jpg)
ページの左側にボタンを書きます。
少し横長の方がいいです。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_181328324.jpg)
ボタンの名前をLogin with facebook(Facebookでログイン)にします。
次にGroup(グループ)をクリックして、ページに書きます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_181333973.jpg)
ユーザーのFacebookの詳細を表示させる部分なので、スペースのほとんどを占めるようにします。
グループ内に、テキストをクリックして、テキスト要素を追加します。(境界線が赤くなります)
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_182419521.jpg)
Insert dynamic data(動的データを挿入)を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_182601550.jpg)
Current User(現在のユーザーのFacebookの名)’s Facebook ‘s First nameを作成します。
テキストをクリックして、グループ内にテキストを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_182638634.jpg)
Current User(現在のユーザーのFacebookの姓)を作成します。
Insert dynamic data(動的データを挿入)を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_182837721.jpg)
Current User(現在のユーザーのFacebookの名)’s Facebook ‘s Last nameを作成します。
次に、グループ内にプロフィール写真の画像要素を追加します。
image(画像)をクリックします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_183004965.jpg)
画像の要素を追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_210134671.jpg)
次に動的データの挿入を選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_210141353-1024x535.jpg)
Current User(現在の使用者)’s Facebook ‘s Profile pictureを選択。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_210415782.jpg)
ワークフローの開始/選択をクリックします。
ボタン部分をクリックし、start/Edit workflowをクリックします。
Click here to add an action(クリックしてアクションを追加)します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_210751271.jpg)
Accountのsignup/login with a social networkを選択します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_210953191.jpg)
OAuth provider(プロバイダー)をFacebookにします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211116416.jpg)
右側にボタンを追加します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211203598.jpg)
ボタンをクリックし、ボタンを作ります。
ボタンをLogout(ログアウト)にします。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211334898.jpg)
Start/Edit workflowをクリック。
Click here to add an action(クリックしてアクションを追加)します。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211407814.jpg)
Account(アカウント)のLog the user out(ユーザーをログアウト)を選択します。
これでFacebookにサインアップして、アプリ情報を取得できます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211833833.jpg)
プレビューをクリックします。
出来たアプリです。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211851115.jpg)
ログインをクリックすると、Facebookに飛びます。
![](https://hikari-sedori.com/wp-content/uploads/2020/09/2020y09m13d_211932625.jpg)
※アプリ側の設定がされていないためエラーになります。
Login with Facebookは、Facebookでログインするようにするアプリです。
その他のBubbleレッスンはこちら
⇒ グラフ要素の使用
コメントを残す