X APIを設定する
X系のアクションを実行する為に必要なX API設定について説明します
BoosterでXキャンペーンを開催する為には、Twitter Developer Portal(開発者ポータル)でBasic以上のプランへの加入と、X API用のプロジェクト及びApp登録を行う必要があります。
ここではTwitter Developer Portal(開発者ポータル)の申請、Basicプラン加入方法、Twitter API用のプロジェクト及びApp設定方法についてご説明します。
1. Basicプランの加入
Twitterアカウントにログインした状態でTwitter Developer Portal(開発者ポータル)を開きます。
画面右上の開発者ポータルクリックしてください。
![Twitter Developer Portal(開発者ポータル)](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F3c3da2a4-a3f1-4ad7-9de7-d9733d21f759%2F1.png?table=block&id=ccf42b3a-f423-40ca-bcc4-77ec5c48b989&cache=v2)
ここではBasicに表示を切り替えてSubscribeをクリックします。
![APIプランの選択](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F27b4ed5c-97b9-443e-9f55-217e84c4ee21%2F2.png?table=block&id=c47b1c7e-408e-4ced-ab8d-18363ff315db&cache=v2)
Twitterのデータ及びAPIの使用例について、説明文を入力します。
規約同意のチェックボックスを全てチェックし、Submitをクリックします。
※説明文に関しては、こちらを参考にしてください。
![Developer agreement & policy](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb7adc143-e0d2-444e-a72d-1058da972dfa%2F3.png?table=block&id=2d83278b-becc-4f76-82b6-248e0baf9853&cache=v2)
クレジットカード情報を入力し、Add card & Subscribeをクリックして決済します。
![Credit card details](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0943becb-6275-4489-8a62-af9cd409653f%2F4.png?table=block&id=c9f99523-2f74-48a5-ba34-23348fc764b7&cache=v2)
決済が完了すると、以下のような表示になります。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fa48611e0-b1c5-4c15-a6bf-aff63340e8e1%2F5.png?table=block&id=588e1dc6-4f26-428d-a88d-3373ce1ded25&cache=v2)
2. プロジェクトの作成
開発者ポータルでは、デフォルトのプロジェクトがすでに作成されている為、そのプロジェクトの名前等を変更すれば問題ありません。
プロジェクトの編集
![プロジェクトの編集](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb40b3d99-ae0d-4623-a53e-37af5a6c1953%2F%25E3%2583%2595%25E3%2582%259A%25E3%2583%25AD%25E3%2582%25B7%25E3%2582%2599%25E3%2582%25A7%25E3%2582%25AF%25E3%2583%2588%25E7%25B7%25A8%25E9%259B%2586.png?table=block&id=1069a036-bf82-4d03-ac32-0848e36abcd7&cache=v2)
左サイドメニューのProjects & Appsを開きデフォルトプロジェクトをクリックします。上部中央に表示されているプロジェクト名の下のSettingsをクリックしてEditをクリックします。
Project nameとProject useを入力、選択してSaveをクリックします。応募者へは表示されない為、サービス名等を入力しておけば問題ありません。
3. Appの作成
プロジェクトが作成できたら、Appを作成していきます。Appはプロジェクトと同様にデフォルトのAppがすでに作成されている為、それを使用します。
左サイドメニューのProjects & Appsを開きプロジェクト下のAppをクリックしてApp detailsを表示します。
Appの編集
![App編集](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F12b6d352-e9a9-409d-9919-75eff2163465%2FApp%25E7%25B7%25A8%25E9%259B%2586.png?table=block&id=1e048cbd-dfe2-4804-90c8-7881a26613f6&cache=v2)
App detailsのEditをクリックして、App編集画面を表示します。App name、App icon、Descriptionを入力及びアップロードします。EnvironmentはProductionを選択して、最後にSaveをクリックして保存します。
※App name、App icon、Descriptionは応募者がTwitter認証する際に表示される項目です。後からでも変更は可能ですが、必ず入力するようにしてください。
User authentication settings
Appの編集が完了した後、User authentication settingsのSet upをクリックして、Twitter認証の設定を行います。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fe2c0038f-bb5c-4e84-aec3-a6140b63f7b2%2F1.png?table=block&id=d8c13109-c3d4-4268-9c7c-75ef8e6a4816&cache=v2)
フォームの内容は以下を参考にして入力してください。
項目 | 必須/任意 | 回答 |
App permissions | 必須 | Read |
Type of App | 必須 | Web App, Automated App or Bot |
App info
Callback URI /Redirect URL | 必須 | https://booster.me/accounts/auth/twitter/callback/ |
App info
Website URL | 必須 | 対象サービスのウェブサイトURLを入力してください |
App info
Organization name | 任意 | 主催者の会社名を入力してください |
App info
Organization URL | 任意 | 主催者の会社ホームページを入力してください |
Terms of service | 任意 | 対象サービスの利用規約を入力してください |
Privacy policy | 任意 | 対象サービス又は主催者のプライバシーポリシーを入力してください |
入力が完了したら、Saveをクリックして保存してください。保存後に、以下の画面が表示されます。
Client IDとClient Secretをそれぞれコピーして、大切に保管してください。特にClient Secretはこの画面以外で表示できない為注意してください。 ※もしClient Secretを忘れたり紛失した場合はRegenerateをクリックして再生成してください。その場合必ずBoosterのTwitter API設定も新しい値で保存し直すことを忘れないでください。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F7708fec5-7cde-4511-8a4b-65dcdb337ced%2FFrame_1.png?table=block&id=c8757a67-72c2-4cbc-8fe2-192c86465779&cache=v2)
ProjectとAppの紐付け方法
作成したProjectにAppが紐づいていない場合、必ず紐付けを行なう必要があります。 確認するためには、左サイドバーに表示されているProject名(先ほど作成したProject)をクリックしてください。
以下は、紐付けされていない場合の表示です。もしこのような状態になっている場合は下記のフローに沿って紐付けを実施してください。
まず、画面下部にあるAdd Appをクリックします。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fc4063768-6f84-4d59-ba97-6dc9b3a36282%2FUntitled.png?table=block&id=d7d82fec-1db0-4afa-bb2b-a5c49d4aadc1&cache=v2)
Add on existing Appをクリックします。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F833f2287-6e67-461a-a465-ff8cc31c2519%2FUntitled.png?table=block&id=d5901bd3-5bba-46b8-9db4-d6b747dffd2c&cache=v2)
先ほど作成したAppを選択して、Nextをクリックします。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fbc0eb294-993a-44aa-95e5-f909629099cf%2FUntitled.png?table=block&id=16d49cb0-6526-4723-b9c5-cf2c97ef84ee&cache=v2)
Productionを選択して、Nextをクリックします。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F22e9aaf1-af50-4104-9383-ff3af6115b2c%2FUntitled.png?table=block&id=4ba46756-d3eb-4383-b5f3-22cac1434c57&cache=v2)
以下の表示になれば紐付け完了です!
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fb752200c-cc4b-4eaf-8017-f8f110fb1e8a%2FUntitled.png?table=block&id=80e34230-4573-4d90-8872-63e903dd658f&cache=v2)
ProjectとAppが紐付けされている場合は以下のような表示になります。
![Notion image](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2Fddbd7625-0107-47be-ac88-745631678f49%2FUntitled.png?table=block&id=99a71a35-f52d-472a-b70e-28bb3cdd915b&cache=v2)
4. Twitter API設定
Twitter Developer Portal(開発者ポータル)で取得した情報を元に、BoosterのTwitter API設定画面で情報を入力します。
Twitterアプリケーション名
まずはTwitterアプリケーション名を入力して保存します。応募者に表示される為、サービス名・ブランド名などを入力して保存をクリックしてください。
![Twitter API設定](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F1144faed-7653-4862-af49-e94c99c93c16%2FTwitter_API%25E8%25A8%25AD%25E5%25AE%259A.png?table=block&id=f7508345-a83c-4a20-a277-cadd5e72c9e4&cache=v2)
OAuth 2.0
この認証は、3で作成したTwitterアプリケーションに応募者がTwitterログインできるようにする設定&認証です。
3で保存したClient IDとClient Secretを入力してTwitter認証して設定するをクリックしてください。
API v2用Twitter認証
この認証は、Twitterキャンペーンツイートの予約投稿などPOST系の機能を実行する為に必要な認証です。 Twitter認証して設定するをクリックしてください。
API v1.1用Twitter認証
この認証は、Twitterキャンペーンツイートの予約投稿などで画像や動画などのメディアを添付する為に必要な認証です。 Twitter認証して設定するをクリックしてください。
Twitterアプリケーション名、OAuth2.0、API v2用Twitter認証、API v1.1用Twitter認証の入力及び認証が全て完了したら、下記のように全てのステータスバッジが有効の表示になります。
![Twitter API設定](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F26d934e7-6a97-4ae7-9f8b-a7e13f9774de%2FTwitter_API%25E8%25A8%25AD%25E5%25AE%259A-API%25E6%259C%2589%25E5%258A%25B9.png?table=block&id=64c571de-495c-4539-bf99-d66151ba2317&cache=v2)
この状態になればTwitter API設定は完了です。