【無料記事】noteとTwitterをもっと身近なモノに。その１：Twitter連携アプリの枠組みを作る

2023年3月6日 22:22

API利用申請の必要がなくなり、５分ほどで連携アプリが作れてしまうようになった新TwitterAPIv2のfreeアクセス。作成するために必要なものは、
・Twitterアカウント（電話番号認証済みの必要あり）
・Googleアカウント
があればどなたでも作成出来ます。
プログラミングの知識は必要ありません。（ソースコード公開します。）

大まかには、４つの作業行程に分かれています。

①Googleスプレッドシートを新規作成する。
②作成したGoogleスプレッドシートの拡張機能「Google Apps Script（以下、GASと表記します）」のオブジェクトを新規作成し、必要なライブラリの追加、自動生成された「スクリプトID」の確認を行う。
➂実際にTwitterに書き込みを行うTwitterアプリを作成し、②で生成した「スクリプトID」をアプリ埋め込む。そのアプリで自動生成された「OAuth2.0認証キー」を確認する。（GASスクリプトに埋め込んで使用します。）
④GASを使用して、Twitter連携アプリを認証するスクリプトを作成する

では実際にやっていきたいと思います。

①Googleスプレッドシートを新規作成する

【Googleスプレッドシートの作成】

GASを作成したいGoogleアカウントで、新規の「Googleスプレッドシート」を開きます。

新規スプレッドシートが開いたら、まず「無題のスプレッドシート」の部分をクリックして分かりやすい名前をつけておきましょう。

このGoogleスプレッドシートはシートをいくつも作ることができ、シート毎に別のデータを扱うことができます。

①の作業は以上です。

②作成したGoogleスプレッドシートの拡張機能「GAS」のオブジェクトを新規作成し、必要なライブラリの追加、自動生成された「スクリプトID」の確認を行う

【GASオブジェクトの新規作成】

①で作成したスプレッドシートの「拡張機能」メニューから「Apps Script」を選択します。

すると、GASのプロジェクトが新規で作成され、スクリプトエディタが開きます。スクリプトエディタが開いたら、まず「無題のプロジェクト」と書かれた部分をクリックして、これは自分のプロジェクトだ！とすぐに分かるような名前を付けておきましょう。ここ、とても大事です。

【ライブラリの追加】

このプロジェクトに必要な「TwitterWebService」「OAuth2」という2つのライブラリを導入します。スクリプトエディタの左側にある「ライブラリ」の「＋」マークをクリックします。

下記のプロジェクトキーを「スクリプトID」の欄に貼り付けて「検索」ボタンをクリックします。

1rgo8rXsxi1DxI_5Xgo_t3irTw1Y5cxl2mGSkbozKsSXf2E_KBBPC3xTF

「TwitterWebService」プロジェクトキー

すると画面下部の「バージョン」欄に「2」(2023年4月時点での最新のバージョン)、「ID」欄に「TwitterWebService」が表示されるので、確認し「追加」をクリックします。

同様に、下記のプロジェクトキーを「スクリプトID」の欄に貼り付けて「検索」ボタンをクリックします。

1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF

「OAuth2」プロジェクトキー

すると画面下部の「バージョン」欄に「43」(2023年4月時点での最新のバージョン)、「ID」欄に「OAuth2」が表示されるので、確認し「追加」をクリックします。

【スクリプトファイルの作成】

スクリプトエディタの左側にある「ファイル」の「＋」マークをクリックし、「初回認証用.gs」「OAuth.gs」という名前のスクリプトファイルを作成します。今後、追加する機能ごとにスクリプトを分けて追加することで、管理しやすくなります。

【「スクリプトID」の確認】

スクリプトエディタの左側にある「プロジェクトの設定（歯車マーク）」をクリックします。

表示される「スクリプトID」をコピーしておきます。

②の作業は以上です。

➂実際にTwitterに書き込みを行うTwitterアプリを作成し、そのアプリで自動生成された「OAuth認証キー」を確認する

【Twitterアプリの新規作成】

アプリケーション連携させたいTwitterアカウント（メールアドレス登録済、電話番号認証済の必要あり）にログインした状態で、Twitter developer platformにアクセスします。

画面の「開発者ポータル」をクリックします。

「＋Create Project」をクリックします。

プロジェクト名を入力し、「Next」をクリック。

「Making a bot」を選択し、「Next」をクリック。

プロジェクト内容を入力し、「Next」をクリック。
任意の文章でOKです。

アプリケーション名を入力し、「Next」をクリック。

すると、「API key」「API key secret」「Bearer token」が表示されます。

注意：これらのキーは他人に知られると悪用される可能性がある情報のため、他人に知られないように厳重に管理してください。

３つのキーをコピーし保存したら、「App settings」をクリックします。

アプリケーション設定画面が表示されます。

【アプリの権限設定】

設定画面を下にスクロールし、「User authentication settings」の「Set up」をクリック。

アプリの権限を「Read and Write（読み取りと書き込み）」に設定します。

アプリのタイプを「Web App, Automated App or Bot」に変更します。

「Callback URI / Redirect URL」の欄に、下記のアドレスを入力します。アドレス内の「スクリプトID」の部分には、②の作業で確認・コピーした「スクリプトID」を当てはめます。

https://script.google.com/macros/d/スクリプトID/usercallback

「Website URL」の欄に任意のURL（https://note.comなどでよいでしょう）を入力します。

その他URLは任意入力なので、何も入力せずに「Save」をクリックします。

すると、OAuth2.0認証に必要な「Client ID」「Client Secret」が表示されます。これらは今後作成するOAuth2.0認証スクリプトで使用します。

注意：これらのキーは他人に知られると悪用される可能性がある情報のため、他人に知られないように厳重に管理してください。

２つのキーをコピーし保存したら、「Done」をクリックします。

キーを保存したかどうかの確認画面が表示されるので、確認し「Yes, I saved it」をクリックします。

権限設定が完了すると、緑のチェックマークが付きます。

【GASオブジェクトにOAuth2.0認証キーを埋め込む】

②の作業で作成したGASオブジェクトを開き、スクリプトエディタの左側にある「プロジェクトの設定（歯車マーク）」をクリックします。

画面を一番下までスクロールし、「スクリプトプロパティを追加」ボタンをクリック。

Twitterアプリ作成時に生成された「Client ID」「Client Secret」の２つのキーを、プロパティ値として埋め込みます。プロパティキーはそれぞれ、「CLIENT_ID」「CLIENT_SECRET」と、すべて英大文字で、半角スペースが入らないように「_（アンダーバー）」で繋げて定義しておきます。

➂の作業は以上です。

④GASを使用して、Twitter連携アプリを認証するスクリプトを作成する

作成するアプリの認証をTwitterに対して依頼するスクリプトを、GASオブジェクト内に作成していきます。作業②で作成したスクリプトファイル「初回認証用.gs」「OAuth.gs」それぞれに、以下のスクリプトを貼り付けて保存ボタンをクリックします。

「OAuth.gs」

function getService() {
  pkceChallengeVerifier();
  const userProps = PropertiesService.getUserProperties();
  const scriptProps = PropertiesService.getScriptProperties();
  const clientId = scriptProps.getProperty('CLIENT_ID');
  const clientSecret = scriptProps.getProperty('CLIENT_SECRET');

  return OAuth2.createService('twitter')
    .setAuthorizationBaseUrl('https://twitter.com/i/oauth2/authorize')
    .setTokenUrl('https://api.twitter.com/2/oauth2/token?code_verifier=' + userProps.getProperty("code_verifier"))
    .setClientId(clientId)
    .setClientSecret(clientSecret)
    .setCallbackFunction('authCallback')
    .setPropertyStore(userProps)
    .setScope('users.read tweet.read tweet.write offline.access')
    .setParam('response_type', 'code')
    .setParam('code_challenge_method', 'S256')
    .setParam('code_challenge', userProps.getProperty("code_challenge"))
    .setTokenHeaders({
      'Authorization': 'Basic ' + Utilities.base64Encode(clientId + ':' + clientSecret),
      'Content-Type': 'application/x-www-form-urlencoded'
    })
}

function authCallback(request) {
  const service = getService();
  const authorized = service.handleCallback(request);
  if (authorized) {
    return HtmlService.createHtmlOutput('Success!');
  } else {
    return HtmlService.createHtmlOutput('Denied.');
  }
}

function pkceChallengeVerifier() {
  var userProps = PropertiesService.getUserProperties();
  if (!userProps.getProperty("code_verifier")) {
    var verifier = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";

    for (var i = 0; i < 128; i++) {
      verifier += possible.charAt(Math.floor(Math.random() * possible.length));
    }

    var sha256Hash = Utilities.computeDigest(Utilities.DigestAlgorithm.SHA_256, verifier)

    var challenge = Utilities.base64Encode(sha256Hash)
      .replace(/\+/g, '-')
      .replace(/\//g, '_')
      .replace(/=+$/, '')
    userProps.setProperty("code_verifier", verifier)
    userProps.setProperty("code_challenge", challenge)
  }
}

function logRedirectUri() {
  var service = getService();
  Logger.log(service.getRedirectUri());
}

「初回認証用.gs」

function authorize() {
  const service = getService();
  if (service.hasAccess()) {
    Logger.log("Already authorized");
  } else {
    const authorizationUrl = service.getAuthorizationUrl();
    Logger.log('Open the following URL and re-run the script: %s', authorizationUrl);
  }
}

Twitterにアプリ認証を依頼するために、実行するメソッドに「authorize」を選択して実行ボタンをクリックします。