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を利用する方法
- Integromatを利用する方法
もちろん、これらの方法でも問題ありませんが、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
※このサンプルは元号ジェネレータシリーズからの改良版のサイトになっています。
元号ジェネレータについて
元号ジェネレータは、入力した言葉(元号)で、下図のような画像を作成するアプリです。さらに作成した画像をツイートできるようにしています。
この記事では「Twitter Tweet」を利用する部分のみ説明します。
準備をしよう
TwitterのApp設定をしよう
まずはTwitterのAPIを使う準備をしましょう。
TwitterDeveloperサイトよりDeveloperのアカウントを作成します。(もうおなじみでしょうか)
https://developer.twitter.com/ja
アカウントを作成したらTwitterアプリを作成し、API Key、API secret keyを取得しましょう。 ※新規だといつの間にかレイアウト等々変更されていますね。
API Key等々のキーをプラグインの設定で利用しますので、上の囲っている4つのキーをコピーしておきましょう。
また、Access levelは「Read and write」にしておきます。
プラグインのインストールをしよう
Bubbleではプラグインをインストールしましょう。
さらに、Twitterアプリを作成した時に取得したキーを設定します。
ConsumerKey、ConsumerSecret、AccessTokenKey、AccessTokenSecret全てそれぞれ設定してください。
プラグイン使用してみよう
使用方法に関してはとても簡単です。
ツイートを行いたいワークフロー内でPluginから「Tweet」のアクションを選択します。
設定内容は以下のとおりです。
- Message:ツイートする本文
- Image URL:画像のURL
Image URLで設定する場合は、フルURLにしてください。
BubbleのImageからURLを取得すると、スキームなしの「//s3.amazonaws.com/・・・・」というアドレスになるので、「https:」つけるようにしてください。
画像はなくてもツイートできます。
これで、ツイートできるようになります!
TwitterDeveloperで利用したアカウントのTwitterにツイートされます。
まとめ
IPasS を使用せずに Bubble から直接ツイートするプラグインを作成/紹介いたしました。
是非、使用してみてください!!
もし不具合等ございましたらご連絡ください。
ここまで読んでいただきありがとうございました!