【Bubble】Bubbleでの超重要な機能「データベース」 ２、Workflowを使ってデータを呼び出してみよう
こんにちは。NoCode Ninjaです。
今日は前回のWorkflowに続きBubbleでの超重要な機能「データベース」を紹介します。
前回はWorkflowを使ってデータを格納することについて紹介しました。
今回は前回の続き・・「データを呼び出す」方法を紹介します。
何らかのエレメントを設置して呼び出す設定さえすれば、データベース（以下DB）に入った色々な値を呼び出せて非常に便利です。
それでは、いってみましょう。
エレメントを設定する
エレメントの設置
まずは前回の画面の下のほうに、エレメントを設置します。
今回はTextにしてみます。
設置しました。
エレメントの設定
いつものTextなら、一番上の「edit me」のところに任意のTextを打ち込んで入れていくのですが、今回はDBから呼び出すので少し違います。
「Edit me...」のところをクリックすると、右側に「Insert dynamic data」という青い表示が出てきます。
こちらをクリックしましょう。
この指示はDBから呼び出す時の共通のやり方なので、よく覚えておくと良いと思います。
ここに前回の「test」というTypeに入れた「corner1」というFieldを指定すると、corner1から呼び出しが出来るというわけです。
「Do a search for」をクリックすると、赤い表示が出てきます。
左側の赤いところ（Type）で「test」を選択します。
こちらはこれで完了です。
続いて、右側の赤いところの「More」をクリック。
「's corner1」をクリックします。
すると、青い表示になりました。
DBにあるcorner1の値がこのTextエレメントに入りますよ、という意味です。
試しにこれでPreviewしてみます。
「corner1」に現在入っている値が「全て（２つ）」出ました。
前回DBに入れる動作を2回しましたのと「corner1」以上の指定を特にしていないので、どちらも入っていてどちらも出てくるわけですね。
どちらか指定をする場合を試してみます。
Designタブに戻りましょう。
さきほどの「Search for test's corner1」に追加をします。
「corner1」をクリックすると右に表示される「More」をクリック。
「:first item」をクリックしましょう。
これでPreviewを見ると・・
「ひとつめ」が指定されて出てきました♪
せっかくなのでもう一つ出しましょう。
Designタブに戻り、今作ったTextエレメントをそのままコピペすると楽です。
値もそのままコピペされるので少しいじりましょう。
「corner1」をクリックし、「corner2」に。
これだけで完了なのですが、せっかくなのでここでの「同じ意味の違う指定パターン」も紹介します。
結果は同じでも指示の仕方は色んなパターンがありますので、試してみましょう。そのほうが後々に幅も広がりますしね♪
「～:first item」を「～:item #」に選択し、半角手打ちで「1」を入力しましょう。
DBに入っている「corner2の一つ目（つまり一番最初）」という指定になります。
「first item」と意味しているところが同じになりますね。
このような形になりました。
それでは、プレビューしてみましょう。
無事表示されました♪
これで入っている値を自在に取り出すことが可能になりました。
設定を変える
こうなると、色々と思い通りに動かせてきます。
ここまでの内容を踏まえたら、前回二回目に入れた内容にそれぞれ書き換えてみましょう。
細かい説明は割愛しますので、是非ご自身でもやってみてください。
なお、筆者は以下の画面のように設定しています。
こちらをPreviewします。
大成功です♪
DBに慣れてきましたね！
以上、「データベースに格納された値を出す」方法でした。
まとめ
いかがだったでしょうか。
一つ一つ紐解いていけば、DBの使い方は理解出来てきたのではないでしょうか。
まだまだ機能は沢山ありますので是非、実装してみるのをオススメします。
アウトプットすると理解しやすい内容ですし、一度身についたらむちゃくちゃ便利で色んな作りたいものがイメージ出来てくるのではないでしょうか。
次回は、こちらを使った繰り返し動作について紹介します。
それでは、また！
【Bubble】Bubbleでの超重要な機能「データベース」 １、Workflowを使ってデータを格納しよう
こんにちは。NoCode Ninjaです。
今日は前回のWorkflowに続きBubbleでの超重要な機能「データベース」を紹介します。
前回はWorkflowについて紹介しました。
そして今回、いよいよ来ました、データベース（Database、以下DB）です。
DBを触ってきたエンジニアさんにはお馴染みかもしれませんが、触ったことない方にとっては「？？？」だと思いますし、実際に触ってみて扱い方（入れ方や呼び出し方）で苦労された（される）のではないかと思います。
概念自体はシンプルなので、落ち着いて学んでいきましょう。
それでは、いってみましょう。
データベースとは
データを格納するところ
そのまんま過ぎましたね（笑）
データを入れて、保存できるのです。それをソフトウェアでやっています。
広義で言うと、電話帳や住所録、図書館なども同じです。
これらはハードウェア（紙など）でやっています。
で、データベースの真髄はどちらかというと・・
いつでも好きなように出せて便利
なのです。
掲示板サイトがわかりやすいかもしれません。
何か書き込みをすればDBにデータが入っていき、それが繰り返されて蓄積されていきます。
そしてそれを出すための場所さえ置いておけば、いつでもどれだけでも入っているものを出せるのです。（入っている以上のものは出ませんが）
そしてDBにデータを入れるのも出すのも、その動作は全てWorkflowで設定します。
前回のWorkflowの記事とつながるわけです。
早速やってみる
それでは、早速やってみましょう。データをDBに入れてみます。
今回はInputに値（文字）を入れて、DBに格納するというのをやってみます。
DB側の設定
まず、データを入れるための場所を作るためにDB側の設定をします。
任意のMy appを開き、左側のDataタブをクリックします。
「New Type」で新しいTypeを作りましょう。
ここでは「test」としておき、「Create」をクリック。
あっさりと「test」が左のCustom data typeに追加され、右側のType nameのInputにも「test」と表示されていることが確認できます。
「Test」という大きいテーブルが出来たというイメージです。
ここにフィールドをそれぞれ作っていくということですね。
続いて「Create a new field」をクリックしましょう。
Field nameを何かつけます。ここでは、「corner1」にします。
Field typeを選択します。今回はテキストで作るので「text」を選択してください。
This field is a listのチェックは空欄でOKです。
そして、全く同じものをもう一つ作りましょう。
設定も同じで、「corner2」にします。
続いて、上の「App data」をクリックしてきちんと出来ているか確認します。
左側の「All test」をクリックしてみてください。
出来ていますね。
DB側はこれでOKです。続いて、実装です。
実装する
Designタブへ戻りましょう。
何もないページを用意して、作っていきます。
Inputエレメントを選択し、右側の任意の場所に設置します（２つ）。
Buttonエレメントを選択し、少し下に設置します（１つ）。
目的は「それぞれのinputに値を入れて、DBに格納する」です。
これをWorkflowで実際に指示する。という意図を持って、作っていきます。
それでは、いきます。
inputを選択し、「Start/Edit Workflow」をクリック。
「Click here to add an action」→「Data(Things)」→「Create a new thing」を選択します。
少し複雑ですが、以下のように設定します。
赤く囲まれたTypeの欄は「test」を選択。
「＋ Set another field」が出ますのでクリック。
「click」と書かれた赤い文字をクリックし、「corner1」を選択。
「=」その右に更に「click」が出てきますのでそこに「Input A's value」と入れてください。
一帯が青い文字になったらOKです。
corner2も同じように設定にしたいので、「＋ Set another field」から「corner2」で「Input B's value」設定してください。
最終的に以下のようになればOKです。
これはつまり、「Button（データを入れる）をクリックすると、InputA,Bの値がDBのtest typeにあるCorner1,2にそれぞれ入りますよ（新しく作成）」というWorkflowの指示となります。
これで、設定は完了といいたいところなのですが、これではButtonを押してDBに値が入ってもInputにある値は残ったままになってしまいます。
Webサイトでそんな仕様のところはまずないのと、実際にやってもらったらわかりますが、Buttonを押しても何の反応も無いので「押した感」が全然無いのです。。
ということでもう一つだけ、「Buttonを押したらInputの値を消す」を指示します。
「Step1」の次の「Click here to add an action」をクリックすると、上に「Reset relevant inputs」という項目が出ているので、これをクリックしてください。
Bubble側で次のオススメ動作が表示されるのですね。これだけで完了です。
これで設定は全て完了です。
実際に動かしてみる
Previewを見て実際にやってみましょう。
押しましたら、DBを確認します。
Dataタブへ行き、先ほどのApp data→All testsで確認します。
成功しましたね！
試しに、逆もやってみましょう。
これ以降、何を入れてもそれぞれのInputからそれぞれのcornerに値が入っていきます！
楽しいですけど、やりすぎ注意ですよー笑
まとめ
これで、DBへ格納するというDBに対して実際に動くものが出来ました。
初めてだとなかなか難しいというかとっつきづらいのですが、これを見ながら順番にやっていくと必ず出来ると思います。
ちょっとした達成感が得られるかもしれません（笑）
ひとまず、今回はこれで目的達成です。
次回は、「入れた値を出す」を紹介します。
それでは、また！
【Bubble】Bubbleでの超重要な機能「Workflow」について
こんにちは。NoCode Ninjaです。
今回は、Bubbleで非常に大事な機能「Workflow」について紹介します。
Bubbleは基本的には感覚的に作れる為、最初の感じを覚えるとわりとサクサク作れるようになり「いけるじゃ～ん♪」と進められるのですが、Workflowの部分に差し掛かった時に「・・・・。」となる可能性が非常に高いと見ています。
（以前の記事で触れましたが、筆者がそうでした・・笑）
そのWorkflowに、今回から少しずつ触れていきたいと思います。
Workflowとは
「動き」を「指示」
エンジニア界隈で言うと、htmlで骨組みを作り、cssで装飾をし、javascriptなどで動きをつけたり指示やコントロールをするというところになると思います。
Bubbleでは色々と感覚的にものを作って空のページに置いていきデザインするという作業を一通りすると思いますが、それらが動くように指示を与えるというのがこの「Workflow」になるというところでしょうか。
その指示は簡単なものから複雑にまで設定可能であり、情報量も非常に多いのでなかなか全てを説明するのはボリューミーなのですが、今回は基本かつシンプルな部分に絞って紹介します。
実装例
「ページへアクセス」という指示をする
例えばWebサイトで何かをクリックすると、別のページに飛んだりします。
これはボタンを置いて、「別のページに飛ぶ」という動きをつけることで成立します。
ボタンを置いて、これにWorkflowを設定してみましょう。
まずMy AppでAppを選び、左側のElementから「Button」を選択。
右側の任意の場所にボタンを設置します。
右側Edit画面に「Start/Edit workflow」がありますので、クリック。
すると、このページへ飛びます。
Workflowへ移りました。「When Button 別ページへ is clicked」という設定がされています。
その名の通り、「ボタン【別ページへ】をクリックした時に～をする」という設定です。
今見ている画面はこちらとほぼ同じものが出ていることと思います。
「Click here to add an action」をクリックし・・
「Button （別ページへ）をクリックすると、～ページへ飛ぶ」という意味になります。
この赤く囲まれた「Destination」は「行き先」です。ここでは今のApp内の別ページを意味しますので、まだ用意していない場合は作ってください。
このブログでは、前々回記事の
【Bubble】Slick Slideshowプラグインを使ってスライドショーを設置してみよう
の時に作ったページへ飛ぶように指定します。
行き先を指定したら、Previewで実際にページに飛ぶか確認しましょう。
きちんと飛びましたね。
このように、何をするのかの指示を与えるというのが「Workflow」です。
これは順番に重ねられますので、増やしていくことで色々な複雑な動きも可能になります。
例えばこうすると
「今のページを更新」してから「別ページに飛ぶ」という動作になります。
動作自体に全く意味はありませんが（笑）指示通りに動きます。
step～というように、必ず指定した順番通りになります。
「一つ一つを重ねていく」感じになるので、複数指示がある場合は順番もしっかり考えましょう。
念のためここまでの設定をした実際のページを用意しておくので、確認してみてください。
注意点
ここでの注意点ですが、「Go to page」に関してはこれ以降の指示は与えられません。エラーが出ます。
というのは、「別ページに飛んだ時点で、以降の指示はその飛んだ先のWorkflowでの指示」ということになりますよね。
飛んだ先での「When Page is loaded～」以降でのWorkflowで指示してあげましょう。
まとめ
以上、簡単な動作でしたがWorkflowの説明でした。
この手順でやってみると意外といけると感じてもらえたのではないでしょうか。
基本はこの繰り返しです。
ただ複雑になると意外と思った動きをしなかったり、指示が多すぎて重くなったり、そもそもの指示の仕方が良くなかったり・・やってみたら出てくる意外な問題というのもあったりするものです。
そこは数をこなして経験を積んでいきましょう。
筆者も日々精進です。
次回以降も、様々なWorkflow系の記事は続けていく予定です。
お楽しみに♪
それでは、また！
【Bubble】Google reCAPTCHAプラグインを使ってreCAPTCHAを設置しよう
こんにちは。NoCode Ninjaです。
今日は、ログインにてお馴染みの機能「reCAPTCHA」について紹介します。
「私はロボットではありません」というチェックですね。
誰もが一度は見覚えがあったり、チェックしたことがあると思います。
色んなサイトで見られるあの機能は、Bubbleでもプラグインが用意されていて実装可能です。
当サイトNoCodeBankでも実装しています。
是非、ご登録よろしくおねがいいたします（笑）
それは置いておくとしても、設置自体は非常にシンプルです。
ひとまず入れておいて間違いないと思いますので、ご紹介します。
それでは、いってみましょう。
reCAPTCHAサイトにアクセス
https://www.google.com/recaptcha/admin/create
まずはこちらにアクセス。
このような画面が表示されます。
各種項目を見ていきましょう。
ラベル
ここでは、掲載するページのアドレスを入れましょう。
当NoCodeBankのサイトでしたら、https://nocodebank.bubbleapps.io/です。
reCAPTCHAタイプ
「reCAPTCHA v3」と「reCAPTCHA v2」を選択するのですが、この画面だととりあえず「reCAPTCHA v3」を選択してしまいそうです。
が、ここは超大事です。reCAPTCHA v2 です！
筆者はここで間違えて設定やり直すことになりましたので要注意です（笑）
こうならないように注意しましょう。
そうすると、以下の項目が出てきますが、特に変更する理由もないのでそのまま進めます。
ドメイン
「bubbleapps.io」と入力しましょう。
オーナー
Googleアカウントにログインしているようでしたら既にアドレスが載っていることかと思います。
そうでない場合は、メールアドレスを入力します。
あとはreCAPTCHA 利用条件に同意するにチェックを入れ、アラートをオーナーに送信するもチェックしたままにしておきましょう。
のちに何か問題が起こった時の対処を考えるとこれがベストとなります。
そして、「送信する」を押しましょう。
以下の画面になります。
実際の値はこちらでは消していますが、結構長い「サイトキー」と「シークレットキー」が入っていると思います。
これら二つをBubble側に貼り付けますので、画面はそのままにして別タブでBubble側の設定をしましょう。
Bubble側の設定をする
Bubbleの設定したいサイトへアクセスします。
reCAPTCHAプラグインの追加
左側「Plugin」をクリック、reCAPTCHAを検索します、すぐに見つかると思います。
インストールしますと、まさに「Site key」と「Secret key」を入力する箇所が出てきますので、先に出てきたそれぞれの値をコピー＆ペーストします。
dev.もそれぞれ同じものを記入するようにしましょう。
Developmentでも動作するようになると思います。
これで、設定自体は終了です。
実装してみましょう。
実装する
こちらはほぼアカウント登録ページ一択になると思いますが、他のエレメントと設置方法は同じです。
reCAPTCHAを選択して、任意の場所に貼り付けます。
Previewも確認し、無事表示されますとホッとしますね。
スパム防止に一役買ってくれるこちらが、プラグインのおかげで簡単に設置可能です。
まとめ
以上、設置までのご紹介でした。
これまでいくつか紹介してきましたが、便利なプラグインが沢山ありますね。
実装もこうやって順を追っていけばそれほど難しくないと思いますので、是非やってみてください。
それでは、また！
【Bubble】Slick Slideshowプラグインを使ってスライドショーを設置してみよう
こんにちは。NoCode Ninjaです。
今回はBubbleの純正プラグイン「Slick Slideshow」を使った、とても便利で使いやすい「スライドショー」の設置を紹介したいと思います。
複数枚の写真をスライドショー形式で載せられるお馴染みのツールがBubbleに用意されていまして、当サイトNoCodeBankでもプロダクト紹介に使用しています。
他のサイトでもトップページに置いてオシャレに使っているのをよく見かけます。
使い方次第でとても幅が広がりますね。
それでは、いってみましょう。
Pluginを追加
Slick Slideshaw
今回使うのは、この「Slick Slideshaw」です。
Bubbleの画面左の「Plugin」で検索すればすぐに見つかると思います。
追加しましょう。
Bubbleが用意してくれているプラグインですし安心して使えますね。
「Design」に戻り、左側のElementに「Slideshow」が追加されているのを確認します。
設置する
早速設置してみましょう。
他のElementと同様、左側で選択、画面中の任意の場所に貼り付けます。
同時にEditも出てきましたね。
アップロード設定
最初の項目、Type of listにて。
まずは「Upload each image」か「Use a dymnamic list」かを選びます。
前者は一枚一枚選べ、後者はデータベースに入っているリストを出力します。
今回は「Upload each image」を選択します。
わりと直感的というか、そのまま触れると思います。
「Static image」をクリックしてアップローダーでアップロード。簡単です。
「Dynamic image」はデータベースから呼び起こします。
「External sources」は他サイトにあるフリー素材を探して選んでアップロード。
「＋Upload another image」で同じ形式をわしゃわしゃ増やせます。
何枚までかある程度試してみましたが、15枚超えても普通に増えていきましたので・・上限は不明です。お腹いっぱいになるくらいまでいけそうです。
条件設定
さらに下を行くと・・
写真サイズを横に広げたり、アニメーション（スライドやフェードイン）の種類を選べたり、オートプレイのOn/offやOnの時の１つ１つの長さ、ホバー（マウスポイントを写真の上に乗せること）した時のスライドショー停止の選択、下のドットや矢印の色など細かく決められます。
あとは他のエレメントとほとんど同じ設定項目だと思いますが、「Keep element proportions as the page is resized」はチェックを入れておくことを強くお勧めします。
入れておくと、スマホサイズになった時でも見え方が変わりません。
アップロードする
それでは、試しにアップロードしてみます。
「External sources」から・・・
豊富なサンプルから選べますし、上の青い表記にある「Pexels」や「SplashBase」というサイトからも選べますので種類はかなり豊富です。
それらを選択すると、Editはこのような画面に。
では、プレビューしてみます。
左右の矢印をクリックして・・
もういっちょ。
スライドしていることが伝わりますでしょうか。
下のドットが右側に推移していってるのが分かると思います。
実際に作ったものを残しておきますので、是非どんな感じか確認してみてください。
Autoplayに設定して、お好みの写真を入れるだけでオシャレな雰囲気が演出できます。
使い方次第で効果抜群ですので、是非活用してみてください。
それでは、また！
【Bubble】Googleアナリティクス設定方法
こんにちは。NoCode Ninjaです。
今回は、BubbleでのGoogleアナリティクスの設定方法についてご紹介します。
PV計測やその他便利な機能盛りだくさんです。
数字で改めて分析出来るので自然と愛着も湧いてきますし、もっと改善して伸ばしたいなー！と向上心も湧いてきますので（頑張ろう・・！笑）設定するのは非常にオススメです。
アナリティクスと聞くとなんだか難しく感じるかもしれませんが、設置自体はきちんと流れを理解して実践すれば手間も時間もかからず簡単です。
それでは、いってみましょう。
Googleアナリティクス側の設定
Googleアカウントを取得
当たり前ですが、これがないと始まりません・・笑
こちらのページへ飛びます。
すると、以下の画面が出てきます。
作成画面が出てきますので、必要項目を入力し、登録。
アカウントを取得したら、早速アナリティクスを設定しましょう。
Googleアナリティクス
まずは、以下のページへアクセス。
以下の画面が出てきます。
以下の画面へ進みます。
チェックは特に外すことは無いですので、そのまま「次へ」をクリック。
更に以下の画面へ進みます。
ウェブサイトでしたら一つ目の「ウェブ」のみで充分事足りる仕様になっています。
注意なのは３つ目の「アプリとウェブ」。
「どちらも兼ねるのなら潰しが利くこっちにしとこー♪」と気軽に選ぶとやや危険です。
設定方法がかなり異なりややこしいので、今回は「ウェブ」で選択します。
こちらは設定後に変更も追加も可能なので、まずはオーソドックスな方法でいきましょう。
そして、以下の画面へ進みます。
「業種」「タイムゾーン（日本は一番下のほう）」様々ありますので、合ったものを選択。
青いボタン「作成」を押し、ポップアップを表示させます。
日本の方は「アメリカ合衆国」から「日本」へ。
各種チェックマークをつけ、「同意する」を押します。
すると、「完了しました。」が表示されます。
そのあと、「トラッキングID（UA-から表示されていると思います）」が出てきているのを確認します。
そのIDがBubbleの設定時に必要になりますので、コピーしてください。
続いて、Bubble側の設定です。
Bubble側の設定
BubbleのMy appで設定したいappを開きます。
Google Analyticsプラグインの取得
「Plugin」にて「Google Analytics」を取得します。
「Installed Plugin」にて選択すると、以下の画面が出てきます。
「Tracking ID」に先ほど取得したトラッキングIDを貼り付けます。
プラグインの設定はこれで完了です。
グローバル サイトタグ（gtag.js）の設置
最後にもう一つ。Googleアナリティクスへ戻ります。
左のアイコンから一番下の「管理」→「プロパティ」→「トラッキング情報」→「トラッキングコード」
を開きます。
トラッキングIDとステータスが表記されている下に、以下の画像の表記があるのを確認してください。
この下に、ソースコードが書かれています。
<!-- Global site tag (gtag.js) - Google Analytics -->
<script～
と続いている複数行のコードを、全てコピーします。
そして、もう一度Bubble（index）に戻ります。
indexのEdit画面を開き、下のほうにあるPage HTML Headerへ貼り付けます。
以上で、設定は完了しました。
確認する
表示の確認
再びGoogleアナリティクスへ戻りましょう。
左のアイコンから一番下の「管理」→「プロパティ」→「トラッキング情報」→「トラッキングコード」
を開きます。
「トラッキングID」が再度表示されます。
その右側に画像のようなステータス表示があるか確認してみてください。
「過去48時間にトラフィック データを受信しています。」
この表示が出ていればOKです。
念のため「テスト トラフィックの送信」も押してみましょう。
設定したサイトが表示されていることが確認できると思います。
更にトップに戻ると、数字やグラフに動きが出ていることも同時に確認しましょう。
もしいずれかの動きが無いようでしたら、再度設定項目を確認してみてください。
Bubble側の値もマッチしているか確認しましょう。
以上で完了となります。
まとめ
意外とあっさり
以上、Googleアナリティクス設定方法を紹介しました。
やってみると、意外とあっさり終わるのではないかと思います。
Googleアナリティクスは結構多機能ですので、むしろ設定してから色々な機能を確認するほうが大変かもしれません。
その辺りの特集も検討しています。
補足
設定以前の情報については、残念ながら出てきません。
ということは、出来るだけ早くに設定しておくに越したことはないですよね。
沢山の便利な機能を無料で扱えるのは、本当にありがたいことです。
これを見てとりあえず設定しとこう、ぐらいの感覚でやってみることを是非おすすめします。
段々とサイトへの愛着も出てきますよ♪
それでは、また！
【Bubble】Twitterボタンの各種設置方法＆Insert Dynamic Data機能を使った応用編
こんにちは。NoCode Ninjaです。
前回Twitterボタンや埋め込みについてを紹介しました。
前回はこちら
この記事の実践の形で当サイトNoCodeBankにてまだ使ったことのなかった各種ボタン（Follow,Hashtag,Message）を導入してみたのですが、その上で少しだけ応用テクニックを使ったので情報としてご紹介します。
当サイトNoCodeBank
それでは、いってみましょう。
ボタンそれぞれで違う設定がある
ボタンの場合個々で設定方法が若干違うので、そちらをご紹介。
まずは前回紹介した設定画面から
Share Button
こちらは簡単です。
クリックするだけでコードが生成されますのでそのまま前回の方法で設置しましょう。
Follow Button（応用あり）
こちらはクリックすると、入力画面が表示されます。
URLやユーザー名からコード生成して設置するのでこれまで通りのパターンですが、ここで少し応用編を。
通常の使い方ですとフォロー先を１つあらかじめ入力して、設定する形になります。
これは特定のアカウントに向けて設置するのなら大丈夫ですが、当サイトNoCodeBankではTwitterURLをご登録いただいているNo Coderの方々それぞれのプロフィール画面に反映させ、等しく動作させたいと考えました。
そこで、生成コードに注目。例えば筆者のもの。
<a href="https://twitter.com/nocodejp?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @nocodejp</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
一行目にTwitterURL【https://twitter.com/nocodejp】が記載されています。
ここにBubbleのInsert Dynamic Data機能を使って設定します。
まず、TwitterURLを消します。
<a href="?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @nocodejp</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
そして、代わりにInsert Dynamic Dataで「Current page（データベースのData Type名）'s Creator's （データベースのData Field名）」
で差し替えます。
ご登録いただいた情報（TwitterURL含む）をデータベースに格納していますので、このような表現になっています。
だからこそInsert Dynamic Data機能でそれぞれに入り、便利に働くのですね。
ちなみに2行目にあるFollow @nocodejpについて、ボタンに書いてある内容だと思われますが特に変更しなくても一行目のTwitterURLに連動してきちんと変わってくれます。
とはいえそのままにしておくと後々ややこしくなる可能性があるので、消しておきましょう。
「Follow @」という形にしておきます。
それでは、実際の設定画像を載せますので確認してみてください。
これで、このようにそれぞれのプロフィール情報に合わせてフォローボタンが動きます。
筆者のプロフィールを載せておきますので、実際の動きを確認してみてください。
https://nocodebank.bubbleapps.io/myprofile_public_/1579931074344x705761999248687100
以上、ちょっとした応用でした。
Mention Button
こちらも従来のやり方でURLやユーザー名からコード生成して設置します。
Hashtag Button
こちらも従来のやり方でURLやユーザー名からコード生成して設置します。
Message Button
こちらのみ、ユーザー名に加えて「User ID」も追加で入れなければいけません。
Twitterページの設定プライバシー → アカウント → Twitterデータ → アカウント → パスワード入力 → User ID
で、確認できます。結構長い数字が並んでいます。
ユーザー名とUser IDで、コード生成して設置します。
以上、各ボタンの設置とBubbleのInsert Dynamic Data機能を使った応用でした。
上記で紹介した応用は他のボタンでも可能だと思いますし、便利ですので是非使ってみてください。
それでは、また！
