Twitter API とGoogleAppsScript の連携  ※2020年4月時点の情報

# Google Formsに添付した写真、入力した内容をGoogle Apps Script を使って、Twitterに投稿する

##連携の最終形態イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/22d9a649-6315-f038-e6e6-fc7c0c4281fe.png)


#第1章 まずは、TwitterのAPI利用申請
事前に必要なもの
・電話番号認証済みのTwitterアカウント

##注意事項
デベロッパーツールの登録・API申請はすべて英文になります。
APIの利用申請には英文が必要になります。
ちょっと長いですが、2020年4月時点の手順を記載しておきます。

##
1. APIを使うアカウントでTwitterにログインした状態にします。

2. [Twitter Developerサイト](https://developer.twitter.com/en/apps/)へアクセスします。
https://developer.twitter.com/en/apps/

3. Create an app ボタンをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/40f990b6-e849-25cc-726f-3da9cd8e2516.png)

4. Apply をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f0f6858b-88d4-a482-eb25-877161e43908.png)

5. デベロッパーツールを使用する目的を選択します。
今回は、APIを使うので、<b>Exploring the API </b> を選択して、Nextボタンをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f21ad0e2-0446-7bcb-a4a4-f460938a18eb.png)

6. 住んでいる国とニックネームを記入して、次へボタンをクリックします。
※ 電話番号による認証が済んでない場合は、ここで登録が必要になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/11c041c8-9138-9b64-0eb2-016b6eb10dc0.png)

APIに関する更新情報のメールで受信したい場合は、
Send me product updates & occasional promotional emails about the Twitter API.
にチェックを入れる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f7784cd4-d3f8-9433-1592-1ef22afe7ea5.png)
7. Twitter APIを使用する目的・理由を200文字以上の英文で回答します。

#### Q1
```
' 日本語訳
API、Twitterデータの利用方法を教えてください。

' 英文
In English, please describe how you plan to use Twitter data and/or APIs. The more detailed the response, the easier it is to review and approve.
```

#### A1
```
'日本語
1.私のGoogleFormsに投稿した記事をTwitterのAPIを利用して、Twitterのタイムラインにも自動的に表示されるようにしたい。
2.APIを利用しTwitterからのコンテンツを取得して、Twitter以外で表示させることはありません。

'英文
1.I want to use Twitter API to automatically display articles posted from my GoogleFomrs onto Twitter timeline.
2.Even if I use Twitter's API to get contents from Twitter, I will not display them outside of Twitter.
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/0956ca9a-0db9-6b3c-1dba-14d861ef4b81.png)


#### 詳細な質問
#### Q2
分析しないのでNo

#### Q3 
```
' 日本語訳
アプリはツイート、リツイート、いいね、フォロー、ダイレクトメッセージ機能を使用しますか？

' 英文
Will your app use Tweet, Retweet, like, follow, or Direct Message functionality?
```

#### A3
```
' 日本語訳
はい。
このBotはツイート機能のみを使用します。具体的には、BotはGoogleフォームの値を読み取ってツイートします。

' 英文
Yes.
Bot uses only Tweet function. Specifically, Bot will tweet by reading the value of Google Forms.
```

#### Q4、Q5
質問の内容がよくわからんけどNo で良いと思う…

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/afcf7d22-e67d-a4f2-9853-3394e534579a.png)

#### 問題なければLooks Good!をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/ba6ba67d-8c80-8bbd-6250-b53da423557e.png)

#### 利用規約にチェックを入れて<b>Submit Applicationボタン</b>をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/74bb865d-f553-8a5e-4d75-67ad287a96a9.png)

#### Twitter Developerアカウントの申請完了
登録したメールアドレス宛てにDeveloperチームからメールが来ます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/1db01bbe-a531-c404-0c67-de64d22d3021.png)

#### Twitter Developerからのメール
Confirm your email をクリックしてDeveloperアカウントの登録完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/21bf449d-5a52-e950-2a07-43827de62cea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/b3f434de-c06f-e214-6c7c-4a2e49878f4b.png)

##第2章 Twitterアプリケーションの登録

### Create an appボタンをクリックして、アプリケーション登録を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/0e01dd17-aa4a-6545-118a-43b5bb612e6c.png)

####アプリケーション名(App name)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/c47aed64-acfd-2c34-1cd4-60a1ce8e5978.png)

####アプリケーションの説明(Application description)
私の猫とあなたの猫に関する記事を自動的にツイートします。
I automatically tweet articles on my cat and your cat.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/fb48e5a7-ef57-cf65-4872-2ced89675f72.png)


#### WebサイトのURL(Website URL)
ランディングページなどなにかしらのURLを入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/c3920d5b-1052-c996-d0d9-836c69d87e11.png)

#### アプリの利用にはTwitterにサインインが必要か
(Allow this application to be used to sign in with Twitter)
チェックを入れる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/1077f55c-57bc-49a4-d1a9-685b8b1dfabc.png)


#### コールバックURL(Callback URLs)
※後ほど設定することになるため、ブランクにしておく。
適当なURLだとエラーになる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/5476fb1b-f75e-91bd-14a5-637a65815f39.png)


下記の設定はすべてブランクでOK。
・利用規約のURL(Terms of Service URL)
・プライバシーポリシーのURL(Privacy policy URL)
・組織名(Organization name)
・組織のウェブサイトのURL(Organization website URL)


#### アプリの使用方法の説明
(Tell us how this app will be used)
※100文字以上必須になるため、ちょっと頑張る必要がある。

例：アプリはGoogle Appsスクリプトを使用して、動物の写真などのコンテンツをTwitterタイムラインに投稿します。
(The app uses Google Apps scripts to post content, including animal photos, to the Twitter timeline..)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/e0047fb2-3942-1b71-eff8-502300fcac4d.png)


#### すべて入力が完了したら<b>Createボタン</b>をクリックします。

#### 利用規約を確認して<b>Createボタン</b>をクリックします。

これでTwitterアプリの登録は完了になります。

### APIキーの取得
<b>Keys and tokensタブ</b>をクリックするとAPIキーを確認することができます。
後ほど、Google Apps Script内に記載する必要があるため、どこかにメモしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/d8f0a9b3-a631-1c5e-9b3c-2a65ef3c907e.png)


## 第3章 Google Apps Scriptからツイートする

※準備するもの
・Google Forms、
例：
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/d066f5b1-a08c-3397-832c-1fd72dc0e962.png)

#### Formsにいくつかテストデータを投入し、結果のスプレッドシートを開く。
※GoogleFormsから作った場合は、項目順に列が並びます。

A列にタイムスタンプ、B列に写真のURLを入力し、B列のURLの写真をツイートするようにします。
#### スプレッドシートのメニューからツール→スクリプトエディタを開きます。
※ここでは、GoogleAppsScriptのプロジェクト名はsampleCatsにしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/48cffa6c-611b-99b9-77dc-954c94fdc054.png)


#### ライブラリの追加
1. TwitterAPIを利用するため、ライブラリ追加画面を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/c0870a32-9323-8cf1-7231-e39a2e20a2e3.png)

2. ライブラリに TwitterWebService の最新版を追加する必要があります。

3. 下記の[リンク](https://script.google.com/d/1rgo8rXsxi1DxI_5Xgo_t3irTw1Y5cxl2mGSkbozKsSXf2E_KBBPC3xTF/edit)を開き、TwitterWebService の基ファイルを開きます。
https://script.google.com/d/1rgo8rXsxi1DxI_5Xgo_t3irTw1Y5cxl2mGSkbozKsSXf2E_KBBPC3xTF/edit

4. 上部メニュー → ファイル → コピーを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/ab188a28-3423-e0d7-cf46-d1286892087b.png)


5. プロジェクト名を TwitterWebService に上部メニュー → リソース → ライブラリ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/b1036628-e76a-eeb7-f54a-6f513ba90efe.png)


6. 「OAuth1」のバージョンで 18 を選択し、保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/f16e2978-86d2-3635-583a-80e3abf08199.png)

7. 上部メニュー → ファイル → 版を管理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/95863088-d9a9-238f-cfc2-25d115203a28.png)
8. Save new version ボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/6db5ed24-8251-0a52-4486-314a66fa06c9.png)
9. 上部メニュー → ファイル → プロジェクトのプロパティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/556028e1-52f0-0152-75d8-2fa7a126433b.png)
10.「スクリプト ID」の値をコピー

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/a3b77cfe-cc46-36d2-91b5-61eda4cf4a25.png)
11. 手順 No1のsampleCatsプロジェクトのライブラリ追加画面からAdd a library 欄へコピーした「スクリプト ID」の値を貼り付け、追加して、バージョン1を選択、「無効」となっているスイッチをクリックして「ON」にして保存
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/79a49c80-7cbf-bfc7-8c44-292477ca07e1.png)

ライブラリの登録は以上です。

### コールバックURLの登録
「Twitter側のログイン認証が終わったらこのURLに戻して」というURLをTwitterアプリ側に指定します。
sampleCatsプロジェクトのスクリプトIDをメモしておきます。
上部メニュー → ファイル → プロジェクトのプロパティ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/2db0fb17-5c7e-4b8d-8f9f-9f1e8e1e2ff9.png)


### Twitter Developerサイトにアクセスし、作成済みのアプリを編集モードで開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/36857d09-a010-0575-77be-105e9027239f.png)

### アプリ作成時にブランクだったコールバックURLsに下記のURLを指定します。
※sampleCatsプロジェクトのスクリプトIDをURL内に埋め込みます。
```
https://script.google.com/macros/d/スクリプトID/usercallback
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/840f76bc-17c1-766f-e319-13729b132d91.png)
入力後は、忘れずに<b>Saveボタン</b>をクリックします。

### 連携認証の確認
sampleCatsプロジェクトの画面に下記のソースを貼り付けます。

``` sampleCats.gs
//認証用インスタンスの生成
var twitter = TwitterWebService.getInstance(
  'xxxxxxxxxx',//Twitter API Key
  'xxxxxxxxxx'//Twitter API secret key
);
 
//アプリを連携認証する
function authorize() {
  twitter.authorize();
}
 
//認証を解除する
function reset() {
  twitter.reset();
}
 
//認証後のコールバック
function authCallback(request) {
  return twitter.authCallback(request);
}
```

Twitter API Key、Twitter API secret keyはDeveloperツールの作成済みアプリケーションの
Keys and tokensのタブから取得します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/a30acf4c-c97a-6607-7eaf-15c7c3668a20.png)


### 関数authorize()を実行して本人確認のURLが発行する
エラーが表示されなければOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/a719a474-623a-17ee-63be-2bfda02fdb1e.png)

###実行結果のログに本人認証用URLが表示されます。
上部メニューの表示→ログから確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/15dee898-091f-7471-82aa-2bb5544401a0.png)

###本人認証用URLにアクセスして、連携アプリを認証をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/dfdcdcd3-46e8-5b3b-8ad2-0051f62020e2.png)

### ブラウザ上に Successが表示されると連携認証は完了になります。


``` コード.js

//認証用インスタンスの生成
var twitter = TwitterWebService.getInstance(
  '################',//API Key
  '##############################'//API secret key
);
 
//アプリを連携認証する
function authorize() {
  twitter.authorize();
}
 
//認証を解除する
function reset() {
  twitter.reset();
}
 
//認証後のコールバック
function authCallback(request) {
  return twitter.authCallback(request);
}

// 投稿テスト用
function TweetTest() {
  
  var service  = twitter.getService();
  var endPointUrl = 'https://api.twitter.com/1.1/statuses/update.json';
  var response = service.fetch(endPointUrl, {
    method: 'post',
    payload: {
      status: 'ねこをツイートするよ。#ねこ'
    }
  });
}

```

### 実行した結果がツイートされればOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/1c3f175c-954d-9c93-2048-484690e34f66.png)




### Googleスプレッドシートの値をツイートする
下記のサンプルコードでは、Googleスプレッドシートの値をGAS側で読み込みツイートを行います。

#### Google DriveAPIの有効化
Google Apps Scriptの上部メニューからリソース→Googleの拡張サービスを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/aefeb3df-1aef-cd32-f21a-81b3e701801a.png)

#### Googleスプレッドシート連携のサンプルコード
``` コード.js
  //認証用インスタンスの生成
var twitter = TwitterWebService.getInstance(
  '##########',//API Key
  '###########################'//API secret key
);
 
//アプリを連携認証する
function authorize() {
  twitter.authorize();
}
 
//認証を解除する
function reset() {
  twitter.reset();
}
 
//認証後のコールバック
function authCallback(request) {
  return twitter.authCallback(request);
}


// ツイートを投稿
function postTweet() {
  
 
  var service  = twitter.getService();
  var endPointUrl = 'https://api.twitter.com/1.1/statuses/update.json';
  var endPointMedia  = 'https://upload.twitter.com/1.1/media/upload.json';
      
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('フォームの回答 1');
  var lastRow = sheet.getLastRow();
  
  //スプレッドシートの最終行の行番号をしているする
  var row = Math.ceil(lastRow);
  
  //スプレッドシートの最終行のタイトルとURLを取得
  var title = sheet.getRange(row, 1).getValue();
  var url = sheet.getRange(row, 2).getValue();
 var strID = url.slice(33);
  
  var imgUrl = "https://drive.google.com/uc?export=view&id=" + strID ;
  Logger.log(imgUrl);
  
  //GoogleDriveのURLから画像をBLOB形式に変換する
  var imgBlob = UrlFetchApp.fetch(imgUrl).getBlob();
  var img_64  = Utilities.base64Encode(imgBlob.getBytes());
   
  var img_option = { 
    'method' : "POST", 
    'payload': {
      'media_data': img_64
    } 
  };
   
  //スプレッドシートの最終行の住所列を取得
  var address = sheet.getRange(row, 3).getValue() + 'の ねこ。';  

  //今日の日付、曜日を取得
  var header = getDateInfo() ;  

  //最後に固定のハッシュタグ
  var footer ='#てすとたぐ';
  
  var postMessage = header + '\n\n' + address+ '\n\n' + footer;
  
  
  var image_upload = JSON.parse(service.fetch(endPointMedia, img_option)); 
   
  var sendoption = { 
    'status'   : postMessage, 
    'media_ids': image_upload['media_id_string']
  };
 
  service.fetch(endPointUrl, {method: 'post', payload: sendoption});
}
```




### Google Apps Scriptの実行トリガー
Google Apps Scriptのメニューから時計アイコンのメニューをクリックすると
Google Apps Scriptのトリガー設定が可能です。
Googleスプレッドシートに行が追加されたタイミング等で実行することも可能です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/399986/cfc20698-448a-3848-58c5-80beb6ed800d.png)

以上が、TwitterとGoogle Apps Scriptとの連携手順になります。