NoCodeでTwitterボットを作ってみました（Twitter API連携）
こんにちは、タデです。
前回の投稿で、NoCodeのツールであるIntegromatを使って定期実行させるTwitterボットの作り方を紹介しましたが、今回はリアルタイムでDMの送受信をするTwitterボットの作り方を紹介したいと思います。
- 作るもの
- 使用する開発ツール
- 必要なもの
- Twitter：開発者アカウントの登録
- Twitter：アプリの登録
- Integromat：Twiiterの送受信処理を実装
- Twitterボットの実行
- Twitter：URLの削除
- おわりに
作るもの
今回は、ユーザーがDMで都市名（例えばtokyo）を送ると、明日の天気をDMで返信するボットを作ります。
実現方法ですが、まずIntegromatでTwitterから転送されるDMを処理するWebサービスを作成します。そして、そのWebサービスのURLをTwitter APIに登録しDMを受信した時に呼んでもらいます。これで、IntegromatでのDMの処理が実現できます。
使用する開発ツール
開発ツールとしてIntegromatを使用します。
ここで紹介した方法を試すだけなら、無料のFreeプランで実行できます。
必要なもの
必要なものは以下のものです。
- Twitterアカウント(２つ)
- Integromatアカウント
Twitterアカウントは２つ必要になります。Twitterボットで使用するアカウントと、開発中にDMをボットに送信するためのアカウントが必要になります。
Twitterアカウントは両方とも普通のユーザーのアカウントで大丈夫です。この後でTwitterボット用のアカウントは開発者アカウントとして登録します。もしアカウントを持っていないようであれば、作成をお願いいたします（Twitterのアカウント作成）。
また、TwitterアカウントのユーザーIDも必要になります（TwitterのユーザーIDの確認）。
Integromatを使うのでこちらもアカウントが必要になります。別投稿でアカウント作成方法（Integromatのアカウント作成）を書いているので、よろしければご覧ください。
Twitter：開発者アカウントの登録
TwitterのApply for accessを開きます。「Apply for a developer account」をクリックします。
Twitterにログインします。
使用目的を聞かれるので、ここではボットを作るので「Making a bot」を選択し、「Next」をクリックします。
このアカウントについて確認と質問に答えます。入力したら「Next」をクリックします。
Twitter APIと取得したデータの使い方についての質問に答えます。文章については英語で書く必要があり、最低文字数が設定されています。入力したら「Next」をクリックします。
入力確認が表示されるので、「Looks good!」をクリックします。
契約内容の確認があるので、確認したらチェックボックスをチェックし、「Submit Application」をクリックします。
メールを確認するように求める画面が表示されるので、Twitterからのメールを確認します。
メールの「Confirm your email」をクリックします。
これで開発者アカウントの登録は完了です。
Twitter：アプリの登録
Twitterでアプリというものを登録します。
このアプリに対してDMを処理するためのWebサービスのURLを登録します。
参考資料： Getting started with webhooks
Get Started を開きます。「Create an app」の「Apps」をクリックします。
「Create an app」をクリックします。
「App name」「Application description」「Website URL」「Tell us how this app will be used」を入力し、「Create」をクリックします。
「Create」をクリックします。
アプリが作成されると、登録内容が表示されます。今の状態だとDMが使えないので、設定を変更します。「Permissions」をクリックします。
「Edit」をクリックします。
「Access permission」の「Read, write, and Direct Messages」を選択します。「Save」をクリックします。
「Keys and tokens」をクリックします。「Access token & access token secret」の「Generate」をクリックします。
「Consuper API Keys」の「API key」「API secret key」、「Access token & access token secret」の「Access token」「Access token secret」は後で使用するので、メモします。
「Access token & access token secret」の２つは生成した時しか内容が表示されないので、わからなくなった場合「Regenerate」で再作成します。
「Apps」をクリックします。
「App ID」をメモします。
Dev environmentsを開きます。「Account Activity API / Sandbox」の「Set up dev environment」をクリックします。
「Dev environment label」に名前を入力し、「App」で先ほど作成したアプリを選択します。「Complete setup」をクリックします。ここでは「Dev environment label」には「dev」と入力したとして話を進めます。
Integromat：Twiiterの送受信処理を実装
Twitter APIではDMを受信した時に呼ぶWebサービスのURLを登録した時に、そのURLが正しいかのチェックをします。
方法としては、Twitter APIがそのURLを呼び出し、返信として想定した内容が返ってくるかをチェックします。
ここではIntegromatで、Twitterから呼ばれた時に、求められている内容を返すための処理を作ります。そして、TwitterにそのURLを登録します。
参考資料
Securing webhooks > Challenge-Response Checks
シナリオの作成
Integromatでプログラムを作るには、シナリオという機能を使います。
新しいシナリオを作るには、ダッシュボード画面の「+ Create a new scenario」をクリックします。
「Skip」をクリックします。
TwitterへのURL登録のための処理を追加
まず、Twitterから呼ばれた時に受信できるようにwebhookというものを追加します。「？」をクリックします。するとモジュールの一覧が表示されるので「Webhooks」をクリックします。
機能の一覧が表示されるので、「Custom webhook」をクリックします。
新規にwebhookを作るので、「Add」をクリックします。
webhookの設定を行います。非表示の入力項目も表示したいので、ダイアログの下にある「Show advanced settings」にチェックを付けてください。
以下のように入力し終えたら、「Save」をクリックします。
| Webhook name | Twitter API webhook |
| IP restrictions | 199.59.148.0/22,199.16.156.0/22 |
| Get request headers | チェック |
| Get request HTTP method | チェック |
| JSON path-through | チェック |
webhookが受信待ちの状態になるので、送信の準備ができるまで一旦受信待ちを止めます。「Stop」をクリックしてください。
また、受信待ちするURLを後ほどTwitterに登録するので、「Copy address to clipboard」をクリックし、URLをメモしておいてください。
次はTwitterへURLを登録します。登録にはTwitterへの通信を行う必要があるため、ここではPOSTMANというツールを使います。「Download the App」をクリックします。
「Download」をクリックします。ダウンロード後、インストール、POSTMANの起動、ユーザー登録を行ってください。
「＋」をクリックします。
新しいタブが開くので、「Authorizatioin」をクリックし、送信内容を入力します。
| 「Untitled Requst」の下にあるドロップダウン（HTTPメソッド） | POST |
| 「Send」の左側のテキストボックス(URL)※1 | https://api.twitter.com/1.1/account_activity/all/dev/webhooks.json |
| TYPE | OAuth 1.0 |
| Add authorization data to | Request Headers |
| Consumer Key | Twitterの「Keys and tokens」の「API Key」 |
| Consumer Secret | Twitterの「Keys and tokens」の「API secret key」 |
| Access Token | Twitterの「Keys and tokens」の「Access token」 |
| Token Secret | Twitterの「Keys and tokens」の「Access token secret」 |
※1 URLの中の「dev」はTwitterの「Dev environments」で指定した名前です
「Body」をクリックし、送信内容を入力します。
「x-www-form-urlencoded」を選択し、「KEY」に「url」、「VALUE」にIntegromatでTwitterからの受信待ちするURLを入力します。
Integromatに戻り、先ほど受信待ちを止めたのを、開始させます。「Re-determine data structure」をクリックします。
POSTMANに戻り、先ほど設定した内容をTwitterに送信します。「Send」をクリックします。
入力欄を下にスクロールすると通信結果が表示されています。通信結果はエラーとなります。今回の通信はまだIntegromatで返信内容を作る処理を作成していないので問題ありません。
IntegromatでTwitterへの返信内容を作る処理を追加します。先ほどの受信処理を行うと、受信内容を変数として参照できるようになるので、この後の処理で受信内容を使用できるようになります。
Integromatが「Successfuly Determined.」になっていたら、「OK」をクリックします。
次の処理を追加するためにWebhooksのアイコンの右側にある半球をクリックします。
検索条件に「flow control」と入力し、一覧に表示されたらそれをクリックします。
機能一覧が表示されるので、「Router」をクリックします。
Routerの右上に伸びている線をクリックします。設定画面が表示されるので、「Label」に「GET」と入力します。
「Condition」の下にあるテキストボックスをクリックします。新たな吹き出しが表示されるので、「Method」をクリックします。
「Equal to」の下には「GET」と入力します。「OK」をクリックします。
GETと書かれている線の先にある「？」をクリックし、「Webhooks」の「Webhook response」を選択します。
設定画面が表示されるので以下のように入力します。Bodyの「<<API secret key>>」はTwitterの「Keys and tokens」の「API secret key」で置換してください。「sha256」はBodyをクリックした時に表示される吹き出しのタグ「A」の中にあります。入力し終えたら、「OK」をクリックします。
Integromat側はURL登録の準備ができたので、再度、POSTMANで送信をします。
まず、Integromatを受信待ちの状態にします。右下にある「Run once」をクリックします。
POSTMANに戻り、先ほど設定した内容をTwitterに送信します。「Send」をクリックします。
POSTMANの処理が成功すると、以下のような表示になります。「id」は後ほどURLの登録解除の時に使うのでメモしておいてください。
Twitterへ受信するアカウントを登録
次は、TwitterにDMを受信するアカウントを登録します。登録にはPOSTMANを使います。
まず新しいタブを開いてください。「Authorizatioin」をクリックし、送信内容を入力します。
| 「Untitled Requst」の下にあるドロップダウン（HTTPメソッド） | POST |
| 「Send」の左側のテキストボックス(URL)※1 | https://api.twitter.com/1.1/account_activity/all/dev/subscriptions.json |
| TYPE | OAuth 1.0 |
| Add authorization data to | Request Headers |
| Consumer Key | Twitterの「Keys and tokens」の「API Key」 |
| Consumer Secret | Twitterの「Keys and tokens」の「API secret key」 |
| Access Token | Twitterの「Keys and tokens」の「Access token」 |
| Token Secret | Twitterの「Keys and tokens」の「Access token secret」 |
※1 URLの中の「dev」はTwitterの「Dev environments」で指定した名前です
「Send」をクリックします。登録が成功すると、通信結果が「Status: 204 No Content」となります。
これでアカウント登録は完了です。
DMの受信処理の追加
IntegromatでDMの受信処理を追加します。
まず、TwitterからのDMを受信し、受信内容を変数として取れるようにします。
「Router」の右下の「？」をクリックし、JSONモジュールを選択してください。
機能一覧が表示されるので「Parse JSON」をクリックします。
Parse Jsonの編集ダイアログが表示されるので、「JSON string」に仮の値を入力し、「OK」をクリックします。
「Router」から「JSON」へ繋がるリンクをクリックし、Labelに「POST」、Conditionに「Method」と「POST」を入力してください。入力後、「OK」をクリックします。
開発者アカウントとして登録していない方(DM送信用)のTwitterアカウントでメッセージを入力し、あとは送信ボタンを押すだけの状態にします。
Integromatを受信待ちの状態にします。右下にある「Run once」をクリックします。警告が表示されますが「Run anyway」をクリックします。
この時に受信待ちのデータが残っていた場合、以下のようなメッセージが表示されます。その時は「Listen for new」をクリックします。
DM送信用のTwiiterアカウントから送信します。
すると、Integromatが受信し、受信待ちが終了します。
DMを受信した時の変数が使用できるようになったので、受信処理を追加していきます。
「JSON」をクリックし、編集ダイアログを表示します。「JSON string」に変数「value」を指定し、「OK」ボタンをクリックします。
JSONモジュールを実行させたいので、またTwitterからDMを送信します。
DM送信用のTwitterアカウントでメッセージを入力し、あとは送信ボタンを押すだけの状態にします。
Integromatを受信待ちの状態にします。右下にある「Run once」をクリックします。警告が表示されますが「Run anyway」をクリックします。
DM送信用のTwiiterアカウントから送信します。
すると、Integromatが受信し、受信待ちが終了します。
RouterモジュールとJSONモジュールを繋ぐリンクにメッセージがTwitterから送られたものかをチェックする処理を追加します。
新たに２つの条件を追加します。条件の入力欄を追加する時は「Add AND rule」をクリックします。
最後の条件の黒塗りの部分は、Twitterの「Keys and tokens」の「API secret key」が入ります。
入力し終えたら、「OK」をクリックします。
JSONモジュールから先に処理を追加していきます。
メッセージを元に天気予報を取得するWeatherモジュールを追加します。JSONモジュールの右側の半球をクリックし、「Weather」を選択し、「Get daily weather forecast」をクリックします。
編集ダイアログが表示されるので、「Days」では「Tomorrow」を選択し、「City」には変数のJSON>direct_messageevents>message_create>message_data>textを選択してください。
入力し終えたら、「OK」をクリックします。
JSONモジュールから先へは自分宛のメッセージのみを通すように制限をかけます。JSONモジュールとWeatherモジュールを繋ぐリンクをクリックします。
指定する条件は２つです。
１つ目の「８.direct_message_events[]」はメッセージが送られてきた通信のみに制限しています。
２つ目の「8.direct〜 sender_id」は送信者が自分以外の通信のみに制限しています。
入力し終えたら、「OK」をクリックします。
「Not equal to」の下のテキストボックスにはボットのTwitterアカウントのユーザーIDを指定してください。
次は、DMの返信を送るモジュールを追加します。
Weatherモジュールの次にTwitterの送信モジュールを追加します。モジュールの「Twitter」>「Send a Message」を選択してください。
編集ダイアログが表示されます。まず、Connectionを追加します。Connectionでは送信元のTwiiterアカウントを指定します。今回であればTwitterボットで使用するTwitterアカウントになります。
「Add」をクリックします。
Connection名を指定できます。今回は変更せずに進めるので、そのまま「Continue」をクリックします。
Twiiterからアカウントへのアクセス許可を求められるので、ユーザ名、パスワードを入力し、「連携アプリを認証」をクリックします。
Twitterモジュールに送信内容を設定していきます。
設定内容に変数を使用するのですが、もし使用したい変数が表示されない場合、Twiiterモジュールには仮の値（User IDにはTwiiterボットのユーザーID,メッセージには「TEST」など）を入力したうえで、TwitterからDM（英語で都市名、例えば「tokyo」など）を送り、変数が再設定されたのちに送信内容を指定してください。
「User ID」にはDMの送信者、「Message Text」には変数Statusを設定します。
これで、DMの受信処理は作り終わりました。Integromatの処理は次のような形になっています。
動作確認は「Run once」を実行し、TwitterでDMを送り、天気のメッセージが返って来れば完成です。
開発環境の後始末
開発環境の後始末が必要になることがあります。
先の手順でTwitterからDMを受信していますが、受信待ちのDMなどが残っていることがあるので、それを削除します。
左上にある矢印のボタンをクリックします。
受信待ちのDMなどが残っていた場合、上の方に「There are 2 records in the queue waiting to be processed.」のメッセージが表示されています。消すためには「Show queue」をクリックします。
受信待ちの一覧が表示されるので「Delete all」を２回クリックすると削除されます。
Twitterボットの実行
今までは「Run once」を使って１回の受信だけ実行してきましたが、実際に運用するために常時実行させる必要があります。
常時実行させるためには「Run once」の下にある、「SCHEDULING」のスイッチを「ON」の状態にします。停止する時は「OFF」にしてください。
Twitter：URLの削除
Twitterボットを廃止する時はTwitterに登録しているURLを削除します。
削除するときもPOSTMANを使います。
まず新しいタブを開いてください。「Authorizatioin」をクリックし、送信内容を入力します。
| 「Untitled Requst」の下にあるドロップダウン（HTTPメソッド） | DELETE |
| 「Send」の左側のテキストボックス(URL)※1 | https://api.twitter.com/1.1/account_activity/all/dev/webhooks/<<URLを登録した時のID>>.json |
| TYPE | OAuth 1.0 |
| Add authorization data to | Request Headers |
| Consumer Key | Twitterの「Keys and tokens」の「API Key」 |
| Consumer Secret | Twitterの「Keys and tokens」の「API secret key」 |
| Access Token | Twitterの「Keys and tokens」の「Access token」 |
| Token Secret | Twitterの「Keys and tokens」の「Access token secret」 |
※1 URLの中の「dev」はTwitterの「Dev environments」で指定した名前です
「Send」をクリックします。Statusに「204 No Content」と表示されていたら削除成功です。
おわりに
Integromatを使ってDMを受信し、返信する方法をご紹介しました。
今回は最低限の処理しか書いていませんが、実際に運用する時はエラー処理が必要になると思います。