Twitter APIのAccount Activity API&web hookを使用する方法 

<h1>Twitter APIのAccount Activity API&web hookを使用する方法</h1>

<h2>投稿の動機</h2>
この度初めてTwitter APIを使用し、通知機能を実装することとなり、
リアルタイムで通知を受け取るにはTwitter APIのAccount Activity APIを使用する必要があるらしく、
ネットで色んな情報を探しましたが、どの情報も目的を実現できるものではありませんでした。(途中まで行けるけど、結局エラー)
最終的に自力で解消することとなったため、僕以外にも同じように詰まる方がいるのではないかと思い投稿することにしました。(今後のメモでもありますが)

<h2>結局公式ドキュメントを読み込むこと！</h2>
僕は最初Twitterの公式ドキュメントをさらっとしか読んでネットで実現方法を簡単に解説してる情報がないか探しに行きました。
なぜかと言うと、Twitterの公式ドキュメントを英語で、翻訳しても直訳みたいな日本語でわかりにくかったからです。
でも最終的に公式ドキュメントをゆっくり読み返すと答えが書いてありました、、、

<h2>本題！ Account Activity APIの使いたか</h2>

<h3>前提</h3>
①Twitter APIの利用申請かアクセストークンの取得までできている
　※まだの場合はこの記事を参考にしてください(https://www.itti.jp/web-direction/how-to-apply-for-twitter-api/)

<h5>上の①ができたら、アプリのアクセスレベルを設定する</h5>
1、ダッシュボードののアプリ名のタブを選択(https://developer.twitter.com/en/portal/dashboard)
2、「App premissions」の「Edit」ボタンを押下
3、アクセスレベルを「Read,Write,and Direct Messages」に変更
![スクリーンショット 2020-11-18 13.48.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/387ca747-1476-ca94-49e9-9a3e8f34b3e1.png)


<h3>Account Activity APIの開発環境の登録</h3>
Account Activity APIを使用するために開発環境の登録が必要です。
以下に手順を記載します。

1、ダッシュボードのProduct->Premium->Dev Environmentsページを開く(https://developer.twitter.com/en/account/environments)
![スクリーンショット 2020-11-18 13.58.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/ede236d3-8f77-ecfc-7739-5aa6886e9b36.png)

2、一番下の「Account Activity API/Sandbox」の「Set up dev environment」ボタンを押下
![スクリーンショット 2020-11-18 14.00.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/d618311d-1dfb-7f56-9a4e-d2bc53ef003c.png)

3、「Dev environment label」に開発環境名を入力し、「App」で紐付けたいアプリを選択して「Comlate setup」ボタンを押下
![スクリーンショット 2020-11-18 14.04.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/9b52518b-4750-6d2e-954d-6efeb5200b22.png)

<h3>Webアプリ側でCRCチェックの準備</h3>
これに関しては分かりやすい記事がありますので、こちらの記事の「webアプリの設置」と「Webhookの登録・設定作業->webアプリの設置」を参考にしてください(https://qiita.com/sbtseiji/items/7957de5db0987d9a6891)

記事と同じ内容ですが、こちらにも記載しておきます。

```webhook.js
// Twitter Challenge Response Checkに対処する
const crypto = require('crypto');

app.get("/webhook", function (request,response) {
  var hmac = crypto.createHmac('sha256', process.env.[コンシューマーシークレット]).update(request.query.crc_token).digest('base64');
  response.send('{"response_token":"sha256='+hmac+'"}');
});

// webhookの処理
app.post("/webhook", function (request, response) {
  response.setHeader('Content-Type', 'text/plain');

  ... ここに処理（最初は空でも問題ない） ...

  response.sendStatus(200);
});
```

<h3>web hook URLの登録</h3>
ここが他の記事では実現できなかったところです。

手順を記載しておきます。
1、公式ドキュメントのTwitter API v1.1->Users->Subscribe to account activityの「
Quick Start」タブを開く(https://developer.twitter.com/en/docs/twitter-api/v1/accounts-and-users/subscribe-account-activity/quick-start/enterprise-account-activity-api)

2、「Manage webhooks and subscribed users」の下の「Github repo here」を押下しGithubのページへ遷移
![スクリーンショット 2020-11-18 14.16.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/bdcdbac0-f39b-cfc9-fc5c-a441e943c34c.png)

3、Githubページの「README」に書かれてる手順にそって作業を行えば問題なくweb hook登録が行えてリアルタイムの通知を受け取ることができました。
![スクリーンショット 2020-11-18 14.20.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/8da07e6b-39cf-18f4-816a-29f6d0bd8c85.png)

4、実際操作するアプリケーションはこんな感じです！！
　すごくシンプルでわかりやすかったです！
![スクリーンショット 2020-11-18 14.22.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/fdf30802-9bb4-393b-9470-14d07a407876.png)

<h3>補足</h3>
・READMEの「Setup & run the Node.js web app」までで問題ないかと思います
・「Setup & run the Node.js web app」項目の5、6項目あたりでアプリケーションのURLをトンネル設定してからコールバックURLに登録するよう記載されてますが、僕はlocalhostでも問題なく動いたので、localhostのままコールバックURLに登録していいと思います。
※要するに(http://localhost:5000/callbacks/addsub) と (http://localhost:5000/callbacks/removesub) をダッシュボードのアプリケーション設定の「Authentication settings」項目内の「CALLBACK URLS」に登録すると言うことです。
![スクリーンショット 2020-11-18 14.32.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/887460/9204dd97-c9bb-3e9b-12a2-7528b86096ce.png)

<h2>最後に</h2>
ネットでしたべた内容はコマンドでweb hook URLを登録しようとしていたために、エラーが発生し、デバックもしにくかったのですが、Twitterが公式の使いやすいUIを用意してくれてたので、こちらを使うと簡単ですよ、、、っと言う内容でした！！
バタバタっと書いたので、内容にわかりにくい箇所などあるかもしらません、、、
最後まで読んでいただいてありがとうございます。