1.はじめに
先日Bubbleで元号ジェネレータの作成方法について説明しました。 （その時の記事はコチラ↓）
さらに、プラグインを利用して、画像ダウンロードのところまで次の記事で説明しました。（その時の記事はコチラ↓）
そして、さらにもう一つ機能を追加することにします。
それは、Twitter連携です！
今回は以下の処理を追加します。
- 元号の画像を作成＆URLを登録
- 作成した元号の画像をツイート
それでは、詳しく見ていきましょう。
2.DataにTypeを追加しよう。
まずは、前回までに作成している「Gengo」Dataに新しく２つTypeを追加しましょう。
- image_url ：作成した画像のURL
- twitter_count：ツイートした回数
image_urlには作成した画像のURLを、twitter_countにはツイートした回数を登録するようにします。
3.元号の画像を作成しよう
BubbleからTwitterにツイートするのが、今回の目的です。 前回は、画像をすぐにダウンロードする処理をしていましたが、ダウンロードはせずに作成のみするようにしましょう。
3-1.新規画面を作成しよう。
前回までは、元号の画像をポップアップで表示するようにしていましたが、 今回は画面遷移するようにしましょう。
理由としては、画像を作成するアクションは非同期なので、画像作成のタイミングがつかみにくいからです。
このような画面を作成してみましょう。 元の画面をクローンして作成するとラクだと思います。
ここでのポイントは、新規画面の「Type of content」の設定です。 前画面でGengoデータを作成し、それを画面遷移の時に渡すようにしましょう。
参照記事はコチラ
3-2.ページロードで画像を作成しよう。
画像を作成するアクションは、ページロードを利用しましょう。 これにより、ロード終了タイミングで画像作成することができます。
ワークフローで、「Page is loaded」のイベントを選択しましょう。
前回画像ダウンロードするためのプラグインで「Element to image」を使用しました。 このプラグインは画像作成してダウンロードするか、画像作成するのみか２通りのアクションを選べます。 今回はダウンロードはしないので、画像作成のアクション「Convert To Element PNG Element」を作成します。プロパティの設定はダウンロードのアクションと同様です。
また、「Only when」のところに、実行条件も付与しています。 同じ元号の画像を何度も作成させたくないので、既に画像URLが登録されていないときのみ、画像作成するようにしています。
3-3.画像のURLをDataに登録しよう。
3-2で作成したURLを「Gengo」Dataに登録する必要があります。 ここで注意するのが、登録のタイミングです。
画像作成は非同期なので、同じページロード時に次のアクションとしてData更新を行うとうまくいかないことがあります。
なので、ワークフローのイベント「Do when condition is true」を追加しましょう。
画像作成プラグインのElementのプロパティに作成されたらURLが取得できるので、取得できた場合のみ、「Gengo」Dataを更新するようにしましょう。
これで画像作成＆URL更新までできました。
4.Twitter連携してみよう。
次にTwitter連携を行います。
BubbleではTwitterのプラグインはありますが、Twitterのログイン機能しかそのプラグインでは行えません。ツイートもしたいので、ツイートするとなると、自分でプラグインを作成してTwitter REST APIを利用してJavascriptをゴリゴリ書かないとできません。
もちろんそれも可能ですが、今回はタスク自動化ツールのZapierを利用してTwitter連携してみます！
4-1.Zapierを登録しよう。
Zapierとは何か？それはコチラの記事をご参照ください。
上記の記事では、メールをトリガーに、Twitterに書き込むようにしていますが、 ここでは、WebhookをトリガーにTwitterに画像付きツイートを行うようにします。
まず、「Webhook」アプリを選択し、「Catch hook」のイベントを選択します。
「Customize Hook」でURLを自動で生成してくれるので、コピーしておきましょう。そのURLにPOSTするのがトリガーとなります。
※ここでテストデータを送信したい場合は、4-2のBubbleからZapierの設定を先に行うことをお勧めします。Zapierのトリガーだけ呼ぶボタン等を一時的に用意すると簡単ですね。
次に、Twitterアプリを選択し、「Create Image Tweet」のイベントを選択します。
Twitterアカウントは、一つのみです。 「Customize Tweet」では、ツイート内容を設定します。
ここでは、POSTする値を下記のようにするので、上図のように設定します。
Text1：ツイートする本文
Text2：ツイートする画像URL
※Webhookのテストを行った場合、そのデータを利用して設定できるようになります。
最後に、Twitterアプリの方もテストをすると、テストデータを元にツイートされます。 正しくツイートされたらZapierの設定は完了です！
4-2.BubbleからZapierを設定しよう。
それでは、BubbleからZapierを実行してみましょう。
ZapierをBubbleから利用するには、プラグインが用意されているので、まずはプラグインをインストールしましょう。
次に、実際にワークフローを追加しましょう。
Zapierの実行タイミングは元号の画像が作成されたらツイートするようにします。ワークフローのイベント「Do when condition is true」を追加しましょう。
一つ注意があります。同じ内容のツイートをするとTwitterからエラーが返ってきて、Zapier自体もOFFになってしまい、手動でONにしないといけなくなってしまいます。 なので、1つの元号につき、1回しかツイートしないように制御も必要です。
Zapierのアクションは、Pluginsの「Trigger a Zapier zap」から設定します。
「Webhook」のプロパティにZapierの「Customize Hook」で生成されたURLを設定します。
「Text1」には、ツイートする本文、「Text2」は画像のURL（前に”https:”を足しましょう）を設定します。
さらにその次に「Gengo」データの「twitter_count」を1に更新するアクションも追加しましょう。
これで、BubbleからZapierを利用して、Twitterに画像ツイートができるようになりました。
あとは、元号を入力する画面から今回作成した画面に遷移するように設定すれば完成です！
プレビューで実際に試して、ツイートできるか試してみましょう！
その時、Zapierを起動させておくことをお忘れなく！
今回の処理を追加したサンプルはコチラです。
https://gengo-generator.bubbleapps.io/index_tweet
ここまで読んでいただき、ありがとうございました！
元号ジェネレーター コンテンツ一覧
おすすめ記事
Bubble を学習中の方には、以下のコンテンツもおすすめです！
