ノーコード ラボ

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

Bubble から Integromat 経由でツイートする方法

f:id:toka-xel:20200402081424p:plain

こんにちは! ノーコード ラボの岡崎です。

bubble を使っていると、標準機能やプラグインを使ってもできないことって良くあるのですが、そういった時は zapier や integromat を経由するとうまくできることがあります。 例えば、Twitter。Twitter の API は bubble の API Connector 経由では操作ができません。 ではどうしたら良いか?zapier や integromat を経由すれば Tweet も可能です。

以前、次の記事で zapier 経由でのツイートの方法を紹介しました。

blog.nocodelab.jp

当時は zapier 経由でも無料で利用できていたのですが、現在は zapier の webhook が有料プランのみでしか使えなくなってしまいました。そこで、最近では integromat を使うケースが増えてきました。

以下、Integromat 経由でのツイートのやり方について説明します。

Integromat 経由でツイートする方法

1. Integromat でシナリオを作成する

やりたいこと

  • integromat の webhook にアクセスし、integromat 経由で tweet する
  • tweet する内容は文字と画像

1.1 Webhook を作成する

まずは Integromat にログインして左メニューから「Scenario」を選択し、右上の「Create a new scenario」を選択します。

f:id:toka-xel:20200401154301p:plain

webhook と入力し、Webhooks を選択します。

f:id:toka-xel:20200401154436p:plain

同様に Twitter も選択します。

f:id:toka-xel:20200401154534p:plain

続いて画面右上の Continue ボタンをクリックします。

f:id:toka-xel:20200401154659p:plain

画面中央の?をクリックします。

f:id:toka-xel:20200401154827p:plain

サービスの選択画面が表示されるので、Webhooks を選択します。

f:id:toka-xel:20200401154957p:plain

Trigger の選択画面で Custom webhook を選択します。

f:id:toka-xel:20200401155104p:plain

「Add」を選択します。Webhook name を入力して Save ボタンをクリックします。

f:id:toka-xel:20200401160602p:plain

ピンクで囲まれたところが Webhook の URL になります。

f:id:toka-xel:20200401161320p:plain

1.2 Integromat のシナリオでツイートする

続いて Integromat のシナリオでツイートする部分を作成します。 Add another module をクリックします。

f:id:toka-xel:20200401162614p:plain

Twitter を選択します。

f:id:toka-xel:20200401162712p:plain

Create a Tweet を選択します。

f:id:toka-xel:20200401162811p:plain

Connection name を入力して Continue をクリックします。

f:id:toka-xel:20200401163240p:plain

問題なければ「連携アプリを認証」ボタンをクリックします。

連携アプリを認証したら、そのアカウントでツイートすることになりますので、ご注意ください

f:id:toka-xel:20200401163251p:plain

Status はツイートする文字列です。ここは何らか入れておいてください。

f:id:toka-xel:20200401163624p:plain

1.3 レスポンスを返す

続いてレスポンスを作ります。

Add another module をクリックします。

f:id:toka-xel:20200401222551p:plain

Webhooks を選択します。

f:id:toka-xel:20200401222731p:plain

Webhook response を選択します。

f:id:toka-xel:20200401222910p:plain

とりあえず、そのまま OK ボタンを押します。

f:id:toka-xel:20200401222922p:plain

後ほど Integromat の設定はし直しますが、一旦ここまでとします。

2. bubble 側の API Connector の設定を行う

plugins から API Connector をインストールして、次のように設定します。

f:id:toka-xel:20200401224719p:plain

ここまで設定したら Integromat の画面に戻ります。

Run once ボタンをクリックします。そうすると一度だけこの Webhook が動作します。

f:id:toka-xel:20200401225219p:plain

再び bubble のAPI Connector の画面に戻り、Initialize call ボタンをクリックします。 なお、一度 Initialize call が成功すると、次回以降は Modify call types になります。

f:id:toka-xel:20200401225443p:plain

うまく動作すれば、次のようにレスポンスが返ってきます。

f:id:toka-xel:20200401230826p:plain

bubble 側はこれで OK です。

3. Integromat 側の再設定を行う

Integromat 側では次のような画面になっているはずです。

f:id:toka-xel:20200401231012p:plain

それでは設定を変更していきます。

3.1 Twitter の設定

Twitter をクリックし、Show advanced settings のチェックボックスにチェックを入れます。

Status 及び Image ファイルを次のように設定します。

f:id:toka-xel:20200401231559p:plain

3.2 Response の設定

右側の Webhooks をクリックします。

Body に Expanded URL を入れておきます。

f:id:toka-xel:20200401232755p:plain

Expanded URLは、画像ファイルの Twitter上のパスになります。

これを bubble 側に返して、twitter シェアボタンに埋め込めば、ユーザーが画像付きツイートをすることができるようになります。

画像付きツイートが不要であれば、この設定も不要です。

これで設定は終了です。

問題なければ、シナリオを Active にしてください。

以降、API Connector → Integromat でツイートすることができるようになります。

まとめ

今回は Bubble から Integromat 経由で Twitter を動かしましたが、この方法は Twitter に限った話ではなく、API Connector では接続できないサービスを Bubble から使う汎用的な方法になります。筆者は同じような流れで twitter ではなく、IBM の Watson に接続したりもしています。もし Bubble から接続できないサービスがありましたらこの方法試してみてください。

また、ここで説明した方法についてはセキュリティ面が心配です。この手順だと Webhook が全世界に向けて開放されています。IPアドレス制限をかけられたら良いのだと思うのですが、Bubble などを利用する場合はこの方法は取れません。代わりに何か認証のようなものを入れる必要があるでしょう。

本当は Integromat を経由しないで直接 API Connector を使ってアクセスできるのが一番なので、Bubble 側の対応が進まないかなと願っています!

では、また!