![見出し画像](https://assets.st-note.com/production/uploads/images/96824337/rectangle_large_type_2_04d65021983fd2196ff0a8438e987726.png?width=800)
【無料記事】noteとTwitterをもっと身近なモノに。その1:Twitter連携アプリの枠組みを作る
API利用申請の必要がなくなり、5分ほどで連携アプリが作れてしまうようになった新TwitterAPIv2のfreeアクセス。作成するために必要なものは、
・Twitterアカウント(電話番号認証済みの必要あり)
・Googleアカウント
があればどなたでも作成出来ます。
プログラミングの知識は必要ありません。(ソースコード公開します。)
大まかには、4つの作業行程に分かれています。
①Googleスプレッドシートを新規作成する。
②作成したGoogleスプレッドシートの拡張機能「Google Apps Script(以下、GASと表記します)」のオブジェクトを新規作成し、必要なライブラリの追加、自動生成された「スクリプトID」の確認を行う。
➂実際にTwitterに書き込みを行うTwitterアプリを作成し、②で生成した「スクリプトID」をアプリ埋め込む。そのアプリで自動生成された「OAuth2.0認証キー」を確認する。(GASスクリプトに埋め込んで使用します。)
④GASを使用して、Twitter連携アプリを認証するスクリプトを作成する
![](https://assets.st-note.com/img/1680874890183-TkQtQV0t4L.png?width=800)
では実際にやっていきたいと思います。
①Googleスプレッドシートを新規作成する
【Googleスプレッドシートの作成】
GASを作成したいGoogleアカウントで、新規の「Googleスプレッドシート」を開きます。
![](https://assets.st-note.com/img/1680874886845-IbmWPr0MLm.png?width=800)
新規スプレッドシートが開いたら、まず「無題のスプレッドシート」の部分をクリックして分かりやすい名前をつけておきましょう。
![](https://assets.st-note.com/img/1680874885604-F41BZNhFhp.png?width=800)
このGoogleスプレッドシートはシートをいくつも作ることができ、シート毎に別のデータを扱うことができます。
①の作業は以上です。
②作成したGoogleスプレッドシートの拡張機能「GAS」のオブジェクトを新規作成し、必要なライブラリの追加、自動生成された「スクリプトID」の確認を行う
【GASオブジェクトの新規作成】
①で作成したスプレッドシートの「拡張機能」メニューから「Apps Script」を選択します。
![](https://assets.st-note.com/img/1680874889839-TNP1lC6K7c.png?width=800)
すると、GASのプロジェクトが新規で作成され、スクリプトエディタが開きます。スクリプトエディタが開いたら、まず「無題のプロジェクト」と書かれた部分をクリックして、これは自分のプロジェクトだ!とすぐに分かるような名前を付けておきましょう。ここ、とても大事です。
![](https://assets.st-note.com/img/1680874887785-ebQq1zVNoG.png?width=800)
【ライブラリの追加】
このプロジェクトに必要な「TwitterWebService」「OAuth2」という2つのライブラリを導入します。スクリプトエディタの左側にある「ライブラリ」の「+」マークをクリックします。
![](https://assets.st-note.com/img/1680874886209-1Gki0Q7EF7.png?width=800)
下記のプロジェクトキーを「スクリプトID」の欄に貼り付けて「検索」ボタンをクリックします。
1rgo8rXsxi1DxI_5Xgo_t3irTw1Y5cxl2mGSkbozKsSXf2E_KBBPC3xTF
すると画面下部の「バージョン」欄に「2」(2023年4月時点での最新のバージョン)、「ID」欄に「TwitterWebService」が表示されるので、確認し「追加」をクリックします。
![](https://assets.st-note.com/img/1680874888759-ISGJVXnuny.png?width=800)
同様に、下記のプロジェクトキーを「スクリプトID」の欄に貼り付けて「検索」ボタンをクリックします。
1B7FSrk5Zi6L1rSxxTDgDEUsPzlukDsi4KGuTMorsTQHhGBzBkMun4iDF
すると画面下部の「バージョン」欄に「43」(2023年4月時点での最新のバージョン)、「ID」欄に「OAuth2」が表示されるので、確認し「追加」をクリックします。
【スクリプトファイルの作成】
スクリプトエディタの左側にある「ファイル」の「+」マークをクリックし、「初回認証用.gs」「OAuth.gs」という名前のスクリプトファイルを作成します。今後、追加する機能ごとにスクリプトを分けて追加することで、管理しやすくなります。
![](https://assets.st-note.com/img/1680874893320-1KQxaztIkn.png?width=800)
【「スクリプトID」の確認】
スクリプトエディタの左側にある「プロジェクトの設定(歯車マーク)」をクリックします。
![](https://assets.st-note.com/img/1680874887316-WQr09sreMJ.png?width=800)
表示される「スクリプトID」をコピーしておきます。
![](https://assets.st-note.com/img/1680874887124-fWbhYkiYq3.png?width=800)
②の作業は以上です。
➂実際にTwitterに書き込みを行うTwitterアプリを作成し、そのアプリで自動生成された「OAuth認証キー」を確認する
【Twitterアプリの新規作成】
アプリケーション連携させたいTwitterアカウント(メールアドレス登録済、電話番号認証済の必要あり)にログインした状態で、Twitter developer platformにアクセスします。
画面の「開発者ポータル」をクリックします。
![](https://assets.st-note.com/img/1680874895639-atCCPCUIz1.png?width=800)
「+Create Project」をクリックします。
![](https://assets.st-note.com/img/1680874895023-Q4yN9TG22M.png?width=800)
プロジェクト名を入力し、「Next」をクリック。
![](https://assets.st-note.com/img/1680874896529-wSqd9NL4ZB.png?width=800)
「Making a bot」を選択し、「Next」をクリック。
![](https://assets.st-note.com/img/1680874894145-H5WoyP8o3Q.png?width=800)
プロジェクト内容を入力し、「Next」をクリック。
任意の文章でOKです。
![](https://assets.st-note.com/img/1680874895954-4mYkqTLl8m.png?width=800)
アプリケーション名を入力し、「Next」をクリック。
![](https://assets.st-note.com/img/1680874890565-ixT0oJfBkL.png?width=800)
すると、「API key」「API key secret」「Bearer token」が表示されます。
注意:これらのキーは他人に知られると悪用される可能性がある情報のため、他人に知られないように厳重に管理してください。
3つのキーをコピーし保存したら、「App settings」をクリックします。
![](https://assets.st-note.com/img/1680874897124-jR7kYQMH65.png?width=800)
アプリケーション設定画面が表示されます。
![](https://assets.st-note.com/img/1680874897907-nE7DZJLK5D.png?width=800)
【アプリの権限設定】
設定画面を下にスクロールし、「User authentication settings」の「Set up」をクリック。
![](https://assets.st-note.com/img/1680874897485-TD8nYxrGoK.png?width=800)
アプリの権限を「Read and Write(読み取りと書き込み)」に設定します。
![](https://assets.st-note.com/img/1680874892288-J70SzFUQRH.png?width=800)
アプリのタイプを「Web App, Automated App or Bot」に変更します。
![](https://assets.st-note.com/img/1680874885707-cZwQjicjxV.png?width=800)
「Callback URI / Redirect URL」の欄に、下記のアドレスを入力します。アドレス内の「スクリプトID」の部分には、②の作業で確認・コピーした「スクリプトID」を当てはめます。
「Website URL」の欄に任意のURL(https://note.comなどでよいでしょう)を入力します。
![](https://assets.st-note.com/img/1680874892795-w4pjqvELw7.png?width=800)
その他URLは任意入力なので、何も入力せずに「Save」をクリックします。
![](https://assets.st-note.com/img/1680874887585-bSJmC3BPvt.png?width=800)
すると、OAuth2.0認証に必要な「Client ID」「Client Secret」が表示されます。これらは今後作成するOAuth2.0認証スクリプトで使用します。
注意:これらのキーは他人に知られると悪用される可能性がある情報のため、他人に知られないように厳重に管理してください。
2つのキーをコピーし保存したら、「Done」をクリックします。
![](https://assets.st-note.com/img/1680874894401-H9PQP0TudZ.png?width=800)
キーを保存したかどうかの確認画面が表示されるので、確認し「Yes, I saved it」をクリックします。
![](https://assets.st-note.com/img/1680874889501-Vu4tWxftET.png?width=800)
権限設定が完了すると、緑のチェックマークが付きます。
![](https://assets.st-note.com/img/1680874885785-afJlqMw5vh.png?width=800)
【GASオブジェクトにOAuth2.0認証キーを埋め込む】
②の作業で作成したGASオブジェクトを開き、スクリプトエディタの左側にある「プロジェクトの設定(歯車マーク)」をクリックします。
![](https://assets.st-note.com/img/1680874889205-mteyqDoeJL.png?width=800)
画面を一番下までスクロールし、「スクリプトプロパティを追加」ボタンをクリック。
![](https://assets.st-note.com/img/1680874889899-B4TRexkISH.png?width=800)
Twitterアプリ作成時に生成された「Client ID」「Client Secret」の2つのキーを、プロパティ値として埋め込みます。プロパティキーはそれぞれ、「CLIENT_ID」「CLIENT_SECRET」と、すべて英大文字で、半角スペースが入らないように「_(アンダーバー)」で繋げて定義しておきます。
![](https://assets.st-note.com/img/1680874892573-Z3JJn22vYs.png?width=800)
➂の作業は以上です。
④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」を選択して実行ボタンをクリックします。
![](https://assets.st-note.com/img/1680874895313-F39s1MIjvd.png?width=800)
実行すると、初回のみ以下の承認確認画面が表示されるので、「権限を確認」をクリック。
![](https://assets.st-note.com/img/1680874886459-HQ6lxgShpx.png?width=800)
アカウント選択画面が表示されるので、自分のGoogleアカウントを選択。
![](https://assets.st-note.com/img/1680874893131-XVDi6fiOzJ.png?width=800)
赤い三角で警告されると「安全なページに戻る」をクリックして戻りたくなりますよね。その意識は正しいです。普段、もしこんな状況に遭遇する事があったら、迷わず安全なページに戻ってください。
ただ今回に限っては、自作アプリですので、左下の「詳細」をクリック。
![](https://assets.st-note.com/img/1680874888106-EoJqDYhMp2.png?width=800)
「xxxxx(安全ではないページに移動)」をクリック。
(xxxxxには、自分で名前を付けたプロジェクト名が入ります。)
![](https://assets.st-note.com/img/1680874891043-TMN326ezxU.png?width=800)
アクセス許可画面が表示されるので、「許可」をクリック。
![](https://assets.st-note.com/img/1680874888911-k3AxaaJ69B.png?width=800)
成功するとエディタ画面上に実行ログ画面が表示され、認証確認画面のURLが出力されます。コピーしてアクセスしてみましょう。
![](https://assets.st-note.com/img/1680874893625-2RO4flT5Ge.png?width=800)
「アプリにアクセスを許可」ボタンをクリック。
![](https://assets.st-note.com/img/1680874886049-7NsNNfLGG6.png)
ブラウザの画面に「Success」と表示されれば、アプリ認証は完了です!
![](https://assets.st-note.com/img/1680874885598-YjfB8zXHMh.png)
以上で、全作業終了となります。ありがとうございました。
ここから先は
![](https://assets.st-note.com/production/uploads/images/67337828/profile_8f313ee82b90b6254ae8b00c5b8a8fe2.jpg?fit=bounds&format=jpeg&quality=85&width=330)
noteとTwitterをもっと身近なモノに。Google Apps ScriptとTwitterAPI(2023/4/6現在、新Twit…
頂いたサポートは、クリエイターとしての活動費として使用させていただきます!