bubble(NoCode)

【bubble】勉強に最適!「Tinder風(中級編)」アプリを作成/ NoCode

はてなちゃん
はてなちゃん
NoCodeツールのbubbleはどんなことができるの?
ひろ
ひろ
Tinderみたいなものも作れますよ
はてなちゃん
はてなちゃん
えー!すごい
ひろ
ひろ
簡単なんで一緒に作ってみましょう!

この記事は、bubbleで「Tinder風アプリ」を実際に作りながら、bubbleでどんなことができるかが勉強できます。

bubbleをとにかく実践的に操作してみたい!どんなことができるか知りたいという方には最適です。

bubbleをまだ全くさわったことがないよ。という方は、まずはこちらの記事で勉強することをおすすめします。

【bubble】の勉強に最適!基本の使い方はこれでOK!(ノーコード)この記事では、bubbleとは?から、一通りの使い方について解説しています。 これからbubbleを勉強したい、使ってみたいという...
・bubbleとは?
・エレメントって?
・ワークフローって?
・データベースって?

などが学べます。

それでは、早速はじめていきましょう!

【bubble】でTinder風アプリを作ってみよう!

プレビューで都度都度、動作を確認しながら進める事をおすすめします。また、スタイル(デザイン)は最低限なので、お好きなようにアレンジしてください!

完成イメージはこんな感じです。(音声ありなのでご注意ください)

人物写真を使いますのが、適当な写真素材がない場合は、下記の写真ACで無料でダウンロードできますのでお使いください。

無料写真素材なら【写真AC】

私も写真ACでいくつかダウンロードしてみました。

サンプル画像

それでは、始めていきましょう!

 

必要なページを作成

まずは、必要なページを作成していきます。

新しく作成するページは、以下の4つです。(+indexを使用)

・message

・profile

・chat

bubble 新しいページ

「Add a new page」で新しいページを作成します。

3つできたら、ページの準備は完了です。

 

データベースの作成

データベースの作成をします。

必要な「type」は3つです。

bubble データベース作成 bubble データベース

1つ目のタイプは、「User」。(デフォルトであります)

fieldは、上記を新たに作成します。

「Likes」と「Match」は、「This field is a list」にチェックを入れてリストにします。

また、「最大距離」のdefaultを「100」にします。

bubble データベース

2つ目のタイプは、「チャット」。

fieldは、上記を新たに作成します。

bubble データベース

3つ目のタイプは、「メッセージ」。

fieldは、上記を新たに作成します。

これでデータベースの準備ができました。

 

ヘッダーを作成

ヘッダーの作成をしていきます。

まずはエディターのサイズを調整します。

bubble エディターサイズ

エディターのどこかで、ダブルクリックをして、「indexページ」のプロパティーを表示させます。

Width:980、Height:748に設定。

次にヘッダーを作成していきます。

bubble ヘッダー作成

ヘッダーは、「Reusable elements(再利用可能なエレメント)」で作成します。

「Reusable elements」の「Add a new reusablel element(新しい再利用可能なエレメントを追加)」をクリックし、「header_tinder」を新たに作成します。

bubble ヘッダー作成

「header_tinder」とし「CREATE」をクリック。

bubble ヘッダー作成

Width:980、Height:60に設定。

bubble ヘッダー作成

「Iconエレメント」を4つ配置します。

左から、「プロフィール」「ホーム」「メッセージ」「サインアップ」と名前を変更します。

各アイコンをクリックすると、先ほど作成したページ移動したり、サインアップのPopUPを表示したりする設定を後ほどします。

・「ホームアイコン」は、「indexページ」に移動。

・「プロフィールアイコン」は、「profileページ」に移動。

・「メッセージアイコン」は、「messageページ」に移動。

・「サインアップアイコン」は、「サインアップのPopUP」を表示。

次に、アイコンがクリックされたら、該当のページに移動するようにワークフローを作ります。

bubble ページの移動

「ホームアイコン」がクリックされたら、「indexページ」に移動するワークフローを作成します。

bubble ページ移動のワークフロー

ページの移動なので、「Navigation」「Go to page」を選択。

bubble ページ移動のワークフロー

移動先は、「index」を選択。

同様に、他のワークフローも作成しましょう。

・・・・

できましたか?

次に、サインアップフォームの作成をします。

bubble サインアップフォームの作成

「Reusable elements」の「Signup/Login Popupエレメント」を設置します。

bubble サインアップ

次に、今設置した「Signup/Login Popupエレメント」を「サインアップアイコン」をクリックしたら、表示するワークフローを作成します。

bubble サインアップのワークフロー

ワークフローをクリック。

bubble サインアップフォームの作成

エレメントを表示させたいので、「Element Actions」「Show(表示)」を選択。

bubble サインアップフォームの作成

表示させたいエレメントは、「Signup/Login PopupA」を選択。

これで、「サインアップアイコン」をクリックしたら、「Signup/Login Popup」が表示されて、ユーザーがサインアップできるようになりました。

 

続いて、「サインインボタン」のワークフローを作っていきます。次に、アイコンホバー時にアイコンの色が変わるようにします。

「header_tinder」に戻ります。

bubble 条件設定

「Conditional(条件)タブ」に移動し、このように設定します。

bubble 条件設定

赤塗りつぶし当たりで、右クリックし条件をコピーします。

今コピーした条件を、他のアイコンの「Conditional(条件)」にペースしていきます。

bubble 条件設定

他のアイコンの「Conditional(条件)」で右クリックしペーストします。

最後に、どのユーザーが現在ログインしているか分かりやすいように、プロフィール画像が表示されるようにします。

bubble Imageエレメントの設定

「Imageエレメント」を配置。

「Current User(現在ログインしているユーザー)」「プロフィール画像」を選択。

これでヘッダーは完成です。

 

profileページの作成

「profileページ」に移動し、profileページを作成していきます。

bubble ヘッダーの配置

まず、「header_tinder」を設置します。

bubble プロフィールページ作成

①「Imageエレメント」を設置し、「Imageプロフィール画像」とします。

②「Buttonエレメント」を設置し、「設定」とします。

③「Buttonエレメント」を設置し、「プロフィール編集」とします。

bubble ワークフロー

「imageエレメント」の「Insert dynamic data(動的データ)」をクリック。

bubble Imageエレメント設定

「Current User」「プロフィール画像」を選択。

データベースの「プロフィール画像」が入るようにしました。

 

プロフィール編集を作成

続いて、ユーザーが自分の情報を入力するフォームを作成していきます。

bubble グループエレメント配置

「Groupエレメント(ユーザー情報設定)」を縦長に大きく配置します。

背景色は白にします。下の「imageエレメント」や「Buttonエレメント」は隠れてOKです。

「Make this element fixed-width」にチェックを入れて、エレメントのサイズを固定します。

次に、「Groupユーザー情報設定」の中にエレメントを配置していきます。

bubble エレメント

①~⑤までそれぞれ設定していきます。

①「Picture Uploaderエレメント」を配置。

bubble Picture Uploader設定

②「Inputエレメント」を配置。「Textエレメント」で「名前」を配置。

bubble Inputエレメント設定

「Insert dynamic data(動的データ)」で「Current User(現在のユーザー)」「名前」を選択。

③「Radio Buttonsエレメント」:男性、女性。

bubble Radio Buttonsの設定

「Current User(現在のユーザー)」「性別」を選択。

④「Date/time Pickerエレメント」を配置。「Textエレメント」で「誕生日」を配置。
「Display dropdowns to pick month/year(ドロップダウンを表示して月/年を選択)」にチェック。

bubble Date/time Picker設定

⑤「Buttonエレメント」:登録。

次に「登録ボタン」のワークフローを作成します。

bubble ボタンのワークフローを作成

ワークフローをクリック。

ボタンのワークフローをクリック。

bubbleボタンのワークフロー

アカウントの情報を登録したいので「Account」を選択。

「Make changes to current user(現在のユーザーを変更し、この情報をデータベースに保存)」を選択。

bubble ボタンのワークフローを作成

データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。

※誕生日以外は、「Insert dynamic data(動的データ)」で設定します。

・「名前」「Input名前を入力」「Value(値)」を選択。

これで、「Input名前を入力」に入力された「値」は、データベースの「名前field」に保存されるという設定ができました。

あとの項目も同様です。

・「性別」「Radio ButtonsA」「Value」を選択。

・「誕生日」「Date/time PickerA」「Value」を選択。

・「プロフィール画像」「Picture UploaderA」「Value」を選択。

これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。

「登録ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。

続いて、ユーザーの年齢を計算するワークフローを作成していきます。

bubble ボタンのワークフローを作成

データベースの「年齢フィールド」に登録しますので「A年齢」を選択。

bubble ボタンのワークフローを作成

ここで、「現在の年月日」-「生年月日」÷「365.25」=「年齢」と計算します。

うるう年も入るので、「365.25」になります。

「Current data/time(現在の日時)」「ー(引く)」「Date/Time Picker(誕生日)」「/(÷)」「365.25(※手入力する)」

「:floor(数値を最も近い整数に切り捨)」

これで、年齢の計算ができます。

 

次に、今作成した「Groupユーザー情報設定」が「プロフィール編集ボタン」が押された時に表示されるようにしていきます。

bubble グループエレメントの設定

「This elements is visible on page load」のチェックを外します。

プロフィールは、「プロフィール編集ボタン」が押された時に表示されるからです。

bubble エレメントの非表示

「Element tree」から「Groupユーザー情報設定」を非表示にします。

「header_tinder」に移動します。

bubble カスタムステイトの設定

header_tinderのプロパティーをひらきます。

「i」マークをクリック。

「i」マークは、「Element Inspector(エレメントインスペクター)」です。

複雑なページを作成する時など、エレメントがどう使われているかを把握するために、エレメントの関係を示すエレメントインスペクターが用意されています。エレメントが持っている命令の修正や新規追加などができます。

「Add a new custom state」で新しく、カスタムステイトをつくります。

bubble カスタムステイトの設定

「State name」を「プロフィール」

「State type」を「text」とします。

続いて、「Textエレメント」で戻るボタンを作っていきます。

アイコンの上にかぶせて作成します。背景は白にします。

bubble カスタムステイトの設定

「<戻る」と入力。

bubble カスタムステイトの設定

「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。

「Make this element fixed-width(このエレメントを固定幅する)」にチェックを入れます。

「profileページ」に戻ります。

bubble Buttonのワークフロー

ワークフローをクリック。

bubble ボタンのワークフロー

先ほど作ったカスタムステイトの設定をします。

bubble Buttonのワークフロー

Elementは、「header_tinderA」を選択。

Custom stateは、「プロフィール」を選択。

「Value」は、「showプロフィール」と入力します。

これでワークフローの設定ができました。

bubble エレメントの非表示

再度、「Group ユーザー情報設定」を表示させます。

「Group ユーザー情報設定」のプロパティーをひらき、「Conditional(条件)タブ」に移動します。

bubble 条件の設定

「When(いつ)」に、「header_tinderA」の状態が、「プロフィール(カスタムステイト)」「is」を選択。先ほどワークフローで入力した「showプロフィール」と入力。

「Select a property to change when true(プロパティーを選択)」で「This elements is visible(このエレメントを表示)」を選択し、チェックを入れます。

これで、

「プロフィール編集ボタン」が押されて、「header_tinderA」の状態が「プロフィール(カスタムステイト)」になったら、「Group ユーザー情報設定」を表示させる。

という条件が設定できました。

 

再度、「header_tinder」に移動します。

bubble 条件設定

「Text <戻る」のプロパティーを開き、「Conditional(条件)タブ」に移動します。

「When(いつ)」に、「header_tinder」「プロフィール(カスタムステイト)」「is not empty(空ではない)」

「Select a property to change when true」で「This elements is visible」を選択しチェックをいれます。

これで、カスタムステイトが空ではない時に、「Text <戻る」を表示させると設定できました。

 

次に「Text<戻る」のワークフローを作成します。

bubble Textエレメントのワークフローを作成

ワークフローをクリック。

bubble ボタンのワークフロー

「Element Actions」「Set state」を選択。

bubble Textエレメントのワークフローを作成

Elementは、「header_tinder」を選択。

Custom stateは、「プロフィール」を選択。

Value(値)、値は空にします。

「Value」を空にすることにより、カスタムステイトがクリアされます。

これで、「<戻る」をクリックすると、「Groupユーザー情報設定」が非表示になります。

 

「ユーザー設定」を作成

続いて、「設定ボタン」がクリックされた時のユーザー設定を作成していきます。

「profileページ」に移動します。

bubble Groupエレメントの設定

「Groupエレメント」を配置します。

分かりやすく仮でグレーにしました。

「Groupエレメント」内に必要なエレメントの設定をしていきます。

bubble Groupエレメントの設定

①~④まで順に作成していきます。

①「Textエレメント」で最大範囲と入力しこれをコピーし、右側に配置し下記のように設定します。

bubble SliderInputの設定

「SliderInputエレメント」を配置し、このように設定します。

bubble Groupエレメントの設定

「Insert dynamic data(動的データ)」をクリック。

「SliderInput最大範囲」「Value(値)」「:formattted as 1028.58(typeは、Number)」を選択。「Km」と入力。

これで、「SliderInput」の「値」に「Km」を付けて表示されます。

 

②「Textエレメント」で「興味あり」と入力。

bubble Radio Buttonsの設定

「Radio Buttonsエレメント」を配置し、このように設定します。

 

③①をコピペします。「Textエレメント」で「年齢の範囲」と入力。

bubble SliderInputの設定

「SliderInput」はこのように設定します。

bubble Textエレメントの設定

「SliderInput年齢範囲」「Value(値)」「:min(最小値)」を選択。「-(ハイフン)」を入力。「SliderInput年齢範囲」「Value」「:max(最大値)」を選択。

これで、「SliderInputの最小値」-「SliderInputの最大値」というかたちで表示されます。

 

④「Buttonエレメント」:保存ボタン

bubble Buttonエレメントの設定

「Buttonエレメント」を配置し、ワークフローを作成します。

bubble ボタンのワークフロー

「Account」「Make changes to current user(現在のユーザーを変更し、この情報をデータベースに保存)」を選択。

bubble Buttonエレメントのワークフローを作成

データベースの各fieldと入力フォームに入力された各項目をひもづけていきます。

・「年齢範囲」「SliderInput年齢範囲」「Value(値)」を選択。

これで、「SliderInput年齢範囲」に入力された「値」は、データベースの「年齢範囲field」に保存されるという設定ができました。

あとの項目も同様です。

・「興味あり」「Radio ButtonsB」「Value」を選択。

・「最大の距離」「SliderInput年齢範囲」「Value」を選択。

これで、各データベースのfieldと、先ほど作成した入力フォームの項目がひもづけられました。

「保存ボタン」がクリックされたら、データベースにその情報が保存されるワークフローができました。

 

次に、今作成した「Group設定」が「設定ボタン」がクリックされたら、表示される設定をしていきます。

bubble Buttonエレメントのワークフローを作成

「設定ボタン」のワークフローを作成します。

bubble Buttonエレメントのワークフローを作成

「Element Actions」「Set state」を選択。

bubble カスタムステイト

「Element」は「header_tinderA」を選択。

「Go to the Reusable Element~~(再利用可能なエレメント(header_tinder)に移動して)カスタムステイトを追加する」をクリック。

bubble カスタムステイト

新しく、「設定」「text」でカスタムステイトを作成。

「設定ボタン」のワークフローに戻ります。

bubble Buttonエレメントのワークフローを作成

「Custom state」は「設定」を選択。

「Value」は、「Show設定」と入力。

 

次に、「header_tinder」に移動します。

「Text<戻る」をコピペします。

bubble 条件の設定

コピペしたら、名前を「Text<戻る(設定)」に変更。

「Conditional(条件)」タブに移動し、「header_tinder」「設定」「is」を選択。「Show設定」と入力。

次に、「Text<戻る(設定)」のワークフローを作成します。

Text<戻るのワークフロー

「Element Actions」「Set state」を選択。

Text<戻るのワークフロー

Elementは、「header_tinder」を選択。

Custom stateは、「設定」を選択。

Value(値)、値は空にします。

bubble 条件の設定

「Text<戻る(設定)」を「Text<戻る」の上に重ねます。

 

「profileページ」に戻ります。

「Group設定」の「Conditional(条件)」に移動します。

bubble 条件の設定

「When(いつ)」に、「header_tinderA」の状態が、「設定(カスタムステイト)」「is」、先ほどワークフローで入力した「show設定」と入力。

「Select a property to change when true(プロパティーを選択)」で「This elements is visible(このエレメントを表示)」を選択し、チェックを入れます。

これで、

「設定ボタン」が押されて、「header_tinderA」の状態が「設定(カスタムステイト)」になったら、「Group 設定」を表示させる。

という条件が設定できました。

bubble Groupの設定

最後に、「Group設定」の「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。

 

indexページを作成

indexページを作成していきます。

作成に入る前に、動きが確認できるようにデータベースに、ユーザーを登録していきます。

データベースから直接登録でも良いですし、プレビューから、サインアップ→プロフィール登録→設定でも大丈夫です。

bubble データベース作成 bubble データベース作成

私は、このように登録しました。

bubble ヘッダーの配置

次に、「header_tinder」を設置します。

次にプラグインをインストールします。

bubble プラグイン

検索窓に「tinder」と入力し検索し、インストールします。

bubble Tinderの設定

「Tinder Pileエレメント」を設置。

このように設定し更に下記の設定を追加します。

bubble Tinder Pileの設定

「Add a new constraint(新しい制約を追加)」をクリックし、情報に制約をつけます。

「Age」「≧」「Current User」「Age range」「:min」を選択。

つまり、ユーザーが設定した最小年齢よりも高い年齢の方という制約をいれました。

「Age」「≦」「Current User」「Age range」「:max」を選択。

つまり、ユーザーが設定した最大年齢よりも低い年齢の方という制約をいれました。

「Gender」「=」「Current User」「Interested in」を選択。

つまり、ユーザーが興味のある性別のみという制約をいれました。

bubble Tinder Pileの設定

「Sort by(並び替え)」に「Random sorting(ランダムソート)」を選択します。

bubble Tinderの設定

「Image field」は、「プロフィール画像」を選択。

「Picture caption(画像の見出し)」は、「Insert dynamic data(動的データ)」をクリック。

「Current card”s」「名前」を選択。

このままですと、自分も表示されてしまうので、自分は表示されないように制限します。

Tinder Pileの設定

「Data source」の「Search for Users」の後に、「filtered(フィルター)」を追加。

「unique id(唯一のID)」「<>(一致しない)」「Current User(現在のユーザー)」「unique id」を選択。

これで、自分のIDと一致しないIDを表示させると設定できました。

次にカードをめくるボタンを設置します。

「YES」「NO」で2つボタンをつくります。

bubble Buttonエレメントのワークフローを作成

「YSE」「NO」ボタンを作成。

「NOボタン」のワークフローを作成します。

bubble Buttonエレメントのワークフローを作成

「Element Actions」「Swipe a Tinder Pile left(左にスワイプ)」を選択。

「YESボタン」のワークフローを作成します。

bubble Buttonエレメントのワークフローを作成

「Element Actions」「Swipe a Tinder Pile right(右にスワイプ)」を選択。

次に、「YESボタン(右にスワイプ)」がクリックされたら、データベースの「Likes」に登録されるワークフローを作成します。

bubble ボタンのワークフロー

「Element Actions」「A Tinder Pile”s card is swiped right(カードを右にスワイプ)」を選択。

bubble ボタンのワークフロー

「Data」「Make changes to thing~(データベースに変更を加える)」を選択。

bubble ボタンのワークフロー

変更するデータは、「Current User」を選択。

「Likes」「add(追加)」「This TinderPile”s」「Current slide」を選択。

これで、「YESボタン(右にスワイプ)」されたユーザーは、「Likes(field)」に追加されます。

次に、step2で、データベースの「Match(field)」にも保存されるようにします。

bubble ボタンのワークフロー

 

「Data」「Make changes to thing~(データベースに変更を加える)」を選択。

bubble ボタンのワークフロー

「Match」「add(追加)」「This TinderPile”s」「Current slide」を選択。

これで、「YESボタン(右にスワイプ)」されたユーザーは、「Match(field)」に追加されます。

bubble ボタンのワークフロー

「Only when(〇〇の時だけ)」に、「This TinderPile User」「Current slide」「Likes」「contains(含む)」「Current User」を選択。

つまり、「現在のユーザーが自分に対してLikeしてくれている時だけ」という条件を追加しました。

step3のワークフローを作成します。

bubble ボタンのワークフロー

「Data」「Make changes to thing~(データベースに変更を加える)」を選択。

bubble ボタンのワークフロー

「TinderPile User」「Current slide」を選択。

「Match」「add」「Current User」を選択。

「Only when(〇〇の時だけ)」に、「This TinderPile User」「Current slide」「Likes」「contains(含む)」「Current User」を選択。

つまり、「現在のユーザーが自分に対してLikeしてくれている時だけ」という条件を追加しました。

 

次に、マッチしたらPOPUPが表示されるようにします。

bubble POPUPの設定

①~⑤まで順に設定していきます。

①「Textエレメント」:「Match!!」と入力。

②「Imageエレメント」:「Current User」「プロフィール画像」を選択。

③「Imageエレメント」:「Current User」「Match」「:last item’s(リストに最後の項目)」「プロフィール画像」を選択。

④「Buttonエレメント」:「メッセージを送信」と入力。

⑤「Buttonエレメント」:「戻る」と入力。

次に、このPOPUPが表示されるようにワークフローを作成します。

先ほど作成していたワークフローのstep4になります。

bubble ボタンのワークフロー

「Element Actions」「Show(表示する)」を選択。

bubble ボタンのワークフロー

表示するエレメントは、「Popup Match」を選択。

「Only when(○○の時だけ)」は、「Tinder Pile User」「Current slide」「Likes」「contains(含む)」「Current User」を選択。

これで、お互いユーザーが「Like」をした時に、POPUPが表示されます。

 

次に、「戻るボタン」のワークフローを作成します。

bubble ボタンのワークフロー

ワークフローをクリック。

bubble ボタンのワークフロー

「Element Actions」「Hide(非表示)」を選択。

bubble ボタンのワークフロー

「Popup Match」を選択。

これで、「戻るボタンが」クリックされると、「Popup Match」が非表示になります。

次に、「メッセージを送信ボタン」のワークフローを作成します。

bubble Buttonエレメントの設定

「Navigation」「Go to page」を選択。

bubble Buttonエレメントの設定

移動先は、「message」を選択。

これで、「messageページ」は完了です。

 

messageページの作成

messageページの作成をしていきます。

bubble ヘッダーの配置

まずは、「header_tinder」を設置します。

次に「Repeating Groupエレメント」を設置します。

bubble Repeating Groupエレメントの設定

このように設定します。

次に「Repeating Groupエレメント」内にエレメントを設置していきます。

bubble Repeating Groupエレメントの設定

①「Imageエレメント」:「Current cell’s User」「プロフィール画像」を選択。

②「Textエレメント」:「Current cell’s User」「名前」を選択。

次に、①と②をグループ化します。

bubble Repeating Groupエレメントの設定

グループ化しました。

次に、「Group message」の条件を設定して、ユーザーがホバーした時に、背景色が変わるようにします。

bubble 条件設定

「Group message」の「Conditional(条件)」に移動します。

「When(いつ)」は、「This Group」「is hovered」を選択。

「Select a property to change when true(プロパティーを選択)」で、「Background style」と「Background color」を選択します。

次に、「Group message」のワークフローを作成します。

特定のユーザー同士で、チャットができるようにするワークフローです。

bubble Groupワークフロー

ワークフローをクリック。

これから作成するワークフローは複雑ですが、やりたい事は、「Group message」がクリックされた時に、Matchしたユーザー同士が、「チャットページ」でチャットができるようにするワークフローです。

そのために、ユーザー同士の「unique id(一意のID)」を使い、チャットごとの「unique id」を作り、更に「chatページ」にそのデータを送信できるようにします。これは、データベースの「チャット(type)」に保存されます。

何をやっているか分からないかもしれませんが、まずは下記の通り作成し、次の章でプレビューで動作を確認しながら解説していきます。

それでは、ワークフローを作成します。

bubbubble Groupワークフローble ボタンのワークフロー

新しく、データベースに登録していくので、「Data(データベース)」「Create a new thing(新しいデータを作成)」を選択。

bubbubble Groupワークフローble ボタンのワークフロー

このように設定していきます。

「Only when」に、更に設置を追加します。

bubbubble Groupワークフローble ボタンのワークフロー

赤ラインが追加した設定になります。

次に、「Only when」で設定したものをコピーします。

bubbubble Groupワークフローble ボタンのワークフロー

「Copy expression」でコピーします。

bubbubble Groupワークフローble ボタンのワークフロー

ペーストします。

bubbubble Groupワークフローble ボタンのワークフロー

このようになります。

step2を作成します。

「Chatページ」に移動するためのワークフローです。

bubbubble Groupワークフローble ボタンのワークフロー

「Navigation」「Go to page」を選択。

bubble ワークフローを作成

移動先は、「chat」を選択。

「Send more parameters to the page(ページにさらにパラメーターを送信する)」にチェック。

「Key」は、「chatid」にします。

「Result of step 1(step1の結果)」「unique id」を選択。

もう1つは、

「Key」は「user」、「Current cell’s User」「unique id」を選択。

今作成したワークフローは、1度もチャットのやり取りをしていない時のワークフローでした。

 

次は、既にチャットを行っているユーザー同士のワークフローの設定です。

今作成したワークフローをコピペします。

bubbubble Groupワークフローble ボタンのワークフロー

右クリックでコピー。

bubbubble Groupワークフローble ボタンのワークフロー

右クリックでペースト。

ペーストは2回します。(2つコピーを作成する)

bubbubble Groupワークフローble ボタンのワークフロー

名前を変更して、「Group message2」と「Group message3」を作成しました。

「Group message2」からワークフローを作成します。

bubbubble Groupワークフローble ボタンのワークフロー

step1とstep2は削除します。

bubbubble Groupワークフローble ボタンのワークフロー

このように設定します。

ページ移動のワークフローを作成します。

bubbubble Groupワークフローble ボタンのワークフロー

「Navigation」「Go to page」を選択。

bubble ワークフローを作成

移動先のページは「chat」を選択。

「Send more parameters to the page(ページにさらにパラメーターを送信する)」にチェック。

「Key」は、「chatid」にします。

「Do a search for」「unique id」を選択。

もう1つは、

「Key」は「user」、「Current cell’s User」「unique id」を選択。

 

「Group message3」のワークフローを作成します。

「Group message2」と同じように、step1とstep2は削除します。

bubbubble Groupワークフローble ボタンのワークフロー

このように設定します。

ページ移動のワークフローを作成します。

bubbubble Groupワークフローble ボタンのワークフロー

「Navigation」「Go to page」を選択。

bubble ワークフローを作成

移動先のページは「chat」を選択。

「Send more parameters to the page(ページにさらにパラメーターを送信する)」にチェック。

「Key」は、「chatid」にします。

「Do a search for」「unique id」を選択。

もう1つは、

「Key」は「user」、「Current cell’s User」「unique id」を選択。

今作成したワークフローの動きは、次の章で解説しています。

 

chatページの作成

chatページの作成をしていきます。

bubble ヘッダーの配置

まずは、「header_tinder」を設置します。

次に「Repeating Groupエレメント」を配置します。

bubble Repeating Groupエレメントの設定

「Repeating Group」の設定はこのようにします。

「search forメッセージ」の「Get data from page URL(ページのURLからデータを取得する)」を選択後、下記のように先ほど設定したパラメーターの「chatid」を入力します。

 

bubble Repeating Groupエレメントの設定

「Parameter name」は、「chatid」と入力。

 

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

「Get data from page URL(ページのURLからデータを取得する)」の部分の動きをプレビューで確認してみます。

bubble プレビューで動作を確認

「messageページ」でメッセージを送る相手を選択し、クリックします。

そうすると、ワークフローで設定した通り、「chatページ」に移動します。

ページURLに、「チャットのunique id」が表示されています。

bubble データベース

データベースのチャットにも、「送信者のunique id」「受信者のunique id」「チャットのunique id」が登録されています。

messageページで作成していたワークフローはこの部分になります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

 

「chatページ」の作成に戻ります。

bubble Groupの設定

「Repeating Group」の中に、「Groupエレメント」を配置します。

「Data source(情報源)」が「Current cell’s メッセージ」を選択。

typeは「メッセージ」、「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。

bubble Repeating Groupエレメントの設定

次に「Conditional(条件)」を追加します。

「When(~の時)」は、「Current cell’s メッセージ」「Creator(作成者)」「is not」「Current User」を選択。

「This element is visible(このエレメントは表示されます)」を選択しチェックをいれます。

これで、「メッセージの作成者が、現在のログインユーザーではない時に」「このエレメントは表示される」と条件を追加できました。

 

次に同じように送信者側(現在のログインユーザー)も作成します。

bubble Groupの設定

「Repeating Group」の中に、「Groupエレメント」を配置します。

「Data source(情報源)」が「Current cell’s メッセージ」を選択。

typeは「メッセージ」、「This element is visible on page load(このエレメントはページの読み込み時に表示されます)」のチェックを外します。

bubble Repeating Groupエレメントの設定

「When(~の時)」は、「Current cell’s メッセージ」「Creator(作成者)」「is」「Current User」を選択。

「This element is visible(このエレメントは表示されます)」を選択しチェックをいれます。

これで、「メッセージの作成者が、現在のログインユーザーの時に」「このエレメントは表示される」と条件を追加できました。

次に今作成した「Groupエレメント」の中に、「Textエレメント」を配置します。

bubble Textエレメントの設定

「Group送信者」の中に「Textエレメント」を配置します。

「Insert dynamic data(動的データ)」をクリックし、「Parent group’sメッセージ」を選択。

同じように、「Group受信者」の中にも、「Textエレメント」を配置します。

「Text送信者」をコピペすればOKです。

bubble Textエレメントの設定

設定は、「Group送信者」と同じなので変更なしです。

次に、「Multiline Inputエレメント」を配置します。

bubble Multiline Inputを配置

「Multiline Input」でメッセージの入力フォームを作成します。

次に、「メッセージ送信アイコン」のワークフローを作成します。

bubble アイコンのワークフロー

ワークフローをクリック。

bubble アイコンのワークフロー

「Data」「Create a new thing」を選択。

・「Multiline Inputメッセージ」入力されたものは、データベースの「テキスト(field)」に保存。

・「Get data from page URL(ページのURLからデータを取得する)」を、データベースの「チャットID(field)」に保存。「Parameter name」は「chatid」と入力。

 

step2を作成します。

bubble アイコンのワークフロー

「Element Actions」「Reset inputs」を選択。

bubble アイコンのワークフロー

「Only when(○○の時だけ)」は、「Multiline Inputメッセージを入力」「Value」「is not empty(空ではない)」を選択。

これで、「Multiline Inputメッセージ入力」が「空ではない」「時に」、入力された内容をリセットするというワークフローができました。

 

step3を作成します。

bubble アイコンのワークフロー

「Element Actions」「Scroll to entry」を選択。

bubble アイコンのワークフロー

「Element」は、「Repeating Groupメッセージ」を選択。

「Entry to scroll to」は、「Repeating Groupメッセージ」「List of メッセージ」「:last item」を選択。

これで、「Repeating Group」がスクロースしていくとき、最後のメッセージまでスクロースして表示されます。

これでアイコンがクリックされたら、メッセージが送信される、ワークフローは完了です。

 

次に、送信相手のプロフィール画像が表示されるようにします。

bubble Imageエレメント設定

「Group受信者」の中に「Imageエレメント」を配置します。

このように設定します。

「Get data from page URL(ページのURLからデータを取得する)」を選択後、下記のように先ほど設定したパラメーターの「user」を入力します。(messageページから移動する際に送信しておいたパラペーターです)

bubble Imageエレメント設定

「user」と入力します。

ここまででメッセージのやりとりがどうなるか、プレビューで動作を確認してみましょう。

 

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

※「Like」をし合っているユーザー同士になります(「Matchしている」)

まず、データベースからログインします。

bubble データベースからログイン

「Run as →」でログインした状態で、プレビューに入れます。

bubble プレビュー確認

メッセージに移動し、「Match」しているユーザーを選択します。

bubble プレビュー確認

メッセージを入力し、送信すれば反映されます。

同じように、相手のユーザーからログインし、メッセージを送れば、上記のようにメッセージのやり取りをしているようになります。

■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■

これで全ての設定は完了です!