ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明します。質問やご指摘大歓迎です。わからないことがあったら、コメントや Twitter などで聞いてください!

Bubble プラグイン:Twitterのツイートができる「Twitter Tweet」を作成しました

f:id:korokoro-vc:20201019171029p:plain

Bubble プラグイン:Twitterのツイートができる「Twitter Tweet」を作成しました

バブラーの皆さん、こんにちは!

BubbleからTwitterにツイートできるプラグインを作成しましたのでご紹介いたします!
ちなみに画像も一緒に(1枚のみですが)ツイートできちゃいます!

Bubbleからツイートする方法

これまで当ブログ内でBubbleからTwitterにツイートする、について説明しました。

Bubbleから直接TwitterのREST APIを呼べれば良いのですが、TwitterのREST APIは2種類あり、Oauth1.0aとOauth2.0と認証方法が異なります。
ツイートをするにはOauth1.0aの方法をとらねばならないのですが、残念ながらBubbleではOauth2.0はAPI Connectorを利用すればできますが、Oauth1.0aは対応していません。
そのため、Bubbleからツイートするために、ZapierやIntegromat等のiPaaSを利用し、そこからTwitterにアクセスする、という方法ををとる必要があります。

当ブログではZapierとIntegromatについて下記の記事にて説明しています。

  • Zapierを利用する方法

blog.nocodelab.jp

  • Integromatを利用する方法

blog.nocodelab.jp

もちろん、これらの方法でも問題ありませんが、Bubbleから直接できる方が便利ではありませんか??

さらに、上のブログ当時は無料でできていたものの、ZapierではWebhookが有料に、Integromat も Twitter は有料になってしまったため、今までお伝えした方法では無料で Twitter でツイートすることができなくなってしまいました。

というわけで、今回Bubbleからツイートできるプラグインを作成したのです!!

プラグイン公開URL

https://bubble.io/plugin/twitter-tweet-1598856374703x610110962293014500

デモサイト

https://twitter-tweet-test.bubbleapps.io

使用方法

使用方法は元号ジェネレータを使って簡単に説明します。

サンプルは以下のURLになります↓↓↓

https://elementtopngsample.bubbleapps.io

※このサンプルは元号ジェネレータシリーズからの改良版のサイトになっています。

元号ジェネレータについて

元号ジェネレータは、入力した言葉(元号)で、下図のような画像を作成するアプリです。さらに作成した画像をツイートできるようにしています。

f:id:korokoro-vc:20201019161725p:plain

この記事では「Twitter Tweet」を利用する部分のみ説明します。

準備をしよう

TwitterのApp設定をしよう

まずはTwitterのAPIを使う準備をしましょう。
TwitterDeveloperサイトよりDeveloperのアカウントを作成します。(もうおなじみでしょうか)

https://developer.twitter.com/ja

アカウントを作成したらTwitterアプリを作成し、API Key、API secret keyを取得しましょう。 ※新規だといつの間にかレイアウト等々変更されていますね。

f:id:korokoro-vc:20201018211115j:plain

API Key等々のキーをプラグインの設定で利用しますので、上の囲っている4つのキーをコピーしておきましょう。

また、Access levelは「Read and write」にしておきます。

プラグインのインストールをしよう

Bubbleではプラグインをインストールしましょう。

f:id:korokoro-vc:20201018201700p:plain

さらに、Twitterアプリを作成した時に取得したキーを設定します。

ConsumerKey、ConsumerSecret、AccessTokenKey、AccessTokenSecret全てそれぞれ設定してください。

プラグイン使用してみよう

使用方法に関してはとても簡単です。

ツイートを行いたいワークフロー内でPluginから「Tweet」のアクションを選択します。

f:id:korokoro-vc:20201019162529j:plain

設定内容は以下のとおりです。

  • Message:ツイートする本文
  • Image URL:画像のURL

f:id:korokoro-vc:20201024181753p:plain

Image URLで設定する場合は、フルURLにしてください。
BubbleのImageからURLを取得すると、スキームなしの「//s3.amazonaws.com/・・・・」というアドレスになるので、「https:」つけるようにしてください。

画像はなくてもツイートできます。

これで、ツイートできるようになります!
TwitterDeveloperで利用したアカウントのTwitterにツイートされます。

まとめ

IPasS を使用せずに Bubble から直接ツイートするプラグインを作成/紹介いたしました。

是非、使用してみてください!!
もし不具合等ございましたらご連絡ください。

ここまで読んでいただきありがとうございました!