ノーコード ラボ

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

Bubble で Twitter API を使ってみよう!(OAuth 2.0)

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

本記事は、弊社の Bubble の個別指導プログラムである Bubble camp の中で、しゅんすけ@【Adalo】爆速兄さんNoCode開発 (@parkinsonbro) | Twitter さんから多くのヒントをいただき、OAuth 2.0 での Twitter API の使い方について調査、まとめたものです。
しゅんすけさん、ありがとうございました!

Bubble で Twitter API を使ってみよう!

こんにちは!
今まで当ブログ内では Twitter API は Bubble のAPI Connector プラグイン経由では使えない、としてきましたが、実は一部機能は使えるんです!
そんなわけで今回は、Bubble で Twitter API を使ってみましょう!

Twitter API について

Twitter API は Twitter が用意してくれている API です(そのまんまですね)。
API には様々な機能があり、ツイートをしたり、検索したり、と Twitter でできることがほぼ用意されているのではないでしょうか。

前述のとおり、Bubble でも Twitter API を使うことができます!ただ、残念ながら Bubble ではできること、できないことがあります。

そもそも Twitter API は認可方法が OAuth 1.0aOAuth 2.0 の2種類が用意されています。
どちらも認可方法が違うだけ・・・というのではなく、Twitter では、OAuth 1.0a だとアカウントの認証まで可能ですが、OAuth 2.0 だとアカウント認証ではなく、アプリケーション認証までとなっています。
そのため、OAuth 1.0a ではすべての Twitter API が使えますが、OAuth 2.0 だと一部の機能のみしか使えません。
例えば、ツイートしたり、DM関連や、ホームタイムラインを取得したりは OAuth 2.0 だと使えません。


f:id:toka-xel:20200805145821p:plain 出典:Overview — Twitter Developers

そして、Bubble では API に接続するとき「API Connector」プラグインが必要になりますが、API Connector は OAuth 2.0 には対応していますが、OAuth 1.0a には残念ながら対応していません
そのため、Bubble では API Connector 経由では Twitter API の一部の機能しか使えません。しかしながら、逆にいうと一部の機能(検索とユーザータイムライン)は使えるわけで、これだけでもアプリを作る上で十分役に立つ場面はありそうです。
そこで、今回は API Connector を使って、OAuth 2.0 での Twitter API を試して記事にしました!

ちなみに、Twitter のソーシャルログインを行いたい場合は Bubble のプラグインがあるので、そちらをご利用ください。
ソーシャルログインについては、以下の記事にまとめていますので、ご覧ください。

blog.nocodelab.jp

なお、Integromat 経由でもよろしければ、Bubble から Tweet することも可能です。こちらの記事もご覧ください。

blog.nocodelab.jp

また、どうしても Bubble で Twitter の OAuth 1.0a を使いたいという人には、zeroqode さんが有料のプラグインを出していますのでご検討ください。

zeroqode.com

サンプルを作ろう

今回は、Twitter の検索(デフォルトで「ノーコードラボ」)及び、ノーコード ラボのタイムラインを表示させます。

サンプルアプリはこちら↓

https://nocodelab-twitterloginsample.bubbleapps.io/twitter-search

前準備をしよう

Twitter Developer

Twitter API を使用するには、まず Twitter Developer のアカウントを取得しましょう。

developer.twitter.com

Twitter アプリを作成し、API Key、API secret keyを取得しましょう。 ※英語でアプリの説明等の入力が求められます・・・。

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

API Connector のインストール

Bubble 側では「API Connector」プラグインをインストールします。
このプラグインは API を使うためのプラグインです。これを使うと簡単に API が使用できるようになります。

API Connector が初めての方は、こちらも参考にしてください。

blog.nocodelab.jp

実際に試してみよう

今回のサンプルは、Twitter の検索とタイムラインを表示する画面を作ります。

API Connectorの設定

まずは API Connector の設定を行いましょう。

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

共通設定項目は以下のとおりです。

パラメータ名
API Name Twitter API ※違う名称でも結構です
Authentication OAuth2 Custom Token
Token endpoint(POST) https://api.twitter.com/oauth2/token?grant_type=client_credentials
Key:Authorization Basic 【TwitterのAPI KeyとAPI secret key】

ヘッダーの Authorization の値の【TwitterのAPI KeyとAPI secret key】は単純につなげるだけではありません。 Twitter の API Key と API secret key を:(コロン)でつなげ、Base64 でエンコードしたものになります。 さらに「Basic」と半角スペースを前につけた値が Authorization の値になります。

Twitter 検索のAPIを設定

実際に Twitter 検索の API を設定しましょう。
「Add another call」ボタンから追加します。

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

パラメータ名
Name SearchTweet※違う名称でも結構です
HTTPメソッド GET
URL https://api.twitter.com/1.1/search/tweets.json
Key:q ノーコードラボ ※検索キーワード
Privateのチェックボックスなし
Key:lang ja
Key:count 50 ※最大検索結果件数

設定したら「Initialize Call」ボタンを必ずクリックしましょう。 エラーが出ず、以下のような検索結果が取得できていればO.K.です。

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

ここではレスポンスで取得する項目の設定が可能です(名称は変えられません)。項目はたくさんあるため、何にどんな内容が設定されるのか、必要/不要等もここで確認してください。

必ず「SAVE」ボタンもクリックしましょう!Saveしないと、画面側で API を呼ぶことができませんので、ご注意ください。
SAVE すると、「Initialize call」ボタンが「Reinitialize call」の名称に変更されます。

タイムライン取得の API を設定

同じように「Add another call」ボタンから追加します。

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

パラメータ名
Name SearchTweet※違う名称でも結構です
HTTPメソッド GET
URL https://api.twitter.com/1.1/statuses/user_timeline.json
Key:screen_name nocodelab ※タイムラインを表示したい Twitter 名
Key:count 50 ※最大検索結果件数

Twitter 検索と同様に「Initialize call」ボタンをクリックし、レスポンスの設定を行いましょう。

画面を作成しましょう

それでは画面の方も簡単に説明しましょう。

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

Twitter検索と、タイムラインを表示します。

  • キーワード入力欄:Input
  • 検索結果:Repeating Group
  • タイムライン:Repeating Group
検索結果

Type of contentに、「SearchTweet statuse」を設定、 Data source に API Connectorで設定した「Twitter API - SearchTweet」の statuse を設定します。 Data sourceは「Get data from an external API」より選択します。
※API の名前をサンプルとは別の名称でつけた場合は、その名前になっているのでご注意ください。

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

q には検索キーワードの value を設定します。

表示内容はAPIでのレスポンスの内容をみたらわかると思いますが、サンプルでは以下の内容を表示しています。いずれも「SearchTweet statuse」にあります。

表示
ユーザの画像 user_profile_image_url_https
名前 user name
ユーザ名 user screen_name ※「@」はレスポンスではついていません
ツイート内容 text
タイムライン結果

タイムラインも同じように設定した API を呼ぶようにします。
Type of content に、「Get Timeline」を設定、 Data source に API Connector で設定した「Twitter API - Get Timeline」を設定します。 Data source は「Get data from an external API」より選択します。
※API の名前をサンプルとは別の名称でつけた場合は、その名前になっているのでご注意ください。

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

表示内容は API でのレスポンスの内容をみたらわかると思いますが、サンプルでは以下の内容を表示しています。いずれも「Get Timeline」にあります。

表示
ユーザの画像 user_profile_image_url_https
名前 user name
ユーザ名 user screen_name ※「@」はレスポンスではついていません
ツイート内容 text

これで Twitter API を Bubbleで使うことができました!

まとめ

今回は Twitter API の使用方法について説明しました。全ての API が使えるわけではないというところは残念なのですが、検索やユーザータイムラインを表示するような場面であれば十分利用できるかと思いますので、ご参考いただけたら幸いです。
ちなみに、Twitter API はここでは無料版を使用していますが、有料版(Premium版、Enterprise版)もあります。検索だと、検索対象が無料版は過去7日間、有料版は過去30日間等になっています。使用する場合は、API の仕様もよく確認してくださいね。

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