自作のTwitterBotでGoogleドライブの画像をアップロードする方法

そろそろTwitterBotの記事に一区切りしようと思っていた折、こんなコメントを頂きました。

画像を一緒にツイートする時はどの様にすれば良いでしようか？

コメントより

確かにTwitterBotを運用する上で画像の投稿は必要不可欠ですね…！！（コメント助かります😭）

今回は画像をアップロードする機能を作ったので、紹介＆解説をしたいと思います！

関連記事
自分専用のTwitterBotを作り方を完全公開します【コピペOK】 
全ての始まり
スプレッドシートの順番通りにツイートするTwitterBotの作り方
今回の記事のベースになっている「順番通り」の処理について解説しています
【爆速】自作のTwitterBotを簡単に作るライブラリを作った話【初心者向け】
今回はこちらのライブラリを利用しています。詳しい使い方はこちら。

画像をアップロードするTwitterBotの作り方

細かいことは気にせずに画像を投稿するTwitterBotを作りたい方向けにライブラリを改造しましたのでご利用ください。

スプレッドシートを用意する

新しいスプレッドシートを用意して以下のシートの内容をコピーしてください

画像を順番に投稿するためのサンプルスプレッドシート

• A列 投稿内容
• B列 回数（0でOK）
• C~F列 一緒にアップロードしたい画像のGoogleドライブのURL

を入れてください。

GoogleドライブのURLは https://drive.google.com/drive/u/0/my-drive を入れがちですが、ファイルごとにちゃんとURLが存在します。

画像を開いたら右上のメニューから『新しいウィンドウで開く』を選択します。

表示されたページのURLが https://drive.google.com/file/d/****************/view の形式となっていると思うのでそのURLをスプレッドシートに貼り付けてください。

これでスプレッドシートの用意はOKです。

GASを用意する

ここからはいつものようにGASを用意してコードを書いていきます。

まずはGASを用意します。先程作ったスプレッドシートから『ツール』→『スクリプトエディタ』でGASを用意しましょう。

GASの編集ページが開かれたら以下の画像を参考にライブラリを登録していきます。

ライブラリのIDは以下をコピペしてください。

MtWJFxCibKiP9SvrKBk8a0_EqweE_tvXn

下記コードをコピペする

コード.gsに以下のコードをコピペします。

cunsumerKeyとconsumerSecretは使用するTwitterアプリのものに上書きしてください。（初めての方はこちら）

これで完成です！（使い方は こちら を参考に postTweetWithMedia を実行するように設定してください）

次の章からは具体的にどのような仕組みで動いているかの解説を行います。

単純に仕組みが気になる人、少し改造したい人、怪しい処理が行われていないか不安な人はもう少しお付き合いください！

画像をアップロードするTwitterBotの仕組み

大まかな流れ

4つの処理を順番に実行しています。

1. 画像の場所（URL）を取得する
2. Googleドライブの画像を取得する
3. Twitterに画像をアップロードする
4. アップロードした画像を含めてツイートする

人が画像を投稿する順番を代わりにプログラムが行っているようなものなのでそこまで複雑ではありません。

① 画像の場所を取得する

スプレッドシートからdriveURLを取ってきます。

これまでの投稿の処理と同じようにテキストとしてURLを取得すればOKです。

Googleのファイルの場所は

https://drive.google.com/file/d/******/view

の******の部分だけでファイルを識別しています。

******をGoogleドライブのFileIdと言い、これが今回必要です。

FileIdを直接シートに書いてもらってもいいのですが、今回は使いやすさを重視してURLから抽出するようにしました。

Utility.gs のpickUpTweetInOrderに処理を書いているので参考にどうぞ。

② Googleドライブの画像を取得する

ここからは TwitterClient.gs の postTweetWithMedia の内部の処理の説明になります。

GoogleドライブのFileIdを取得したら、次に投稿する画像を取得します。

GASではGoogleのサービスと連携するためのAPIが用意されているのでそれを利用しましょう。

// ファイルのデータをドライブから取得
const fileByApp = DriveApp.getFileById(fileId)

Drive Service  |  Apps Script  |  Google Developers

developers.google.com

上記のリンクに細かい使い方が解説されていますが、その中で『DriveApp』というクラスの『getFileById』を使ってファイルの情報を取ってきます。

新しい画像を作ってGoogleドライブに保存したり、Googleドライブ以外のGoogleのサービス（カレンダーやメールなど）と連携することも出来るので興味のある方はここから色んなものをアレンジして作ってみてください！

③ Twitterに画像をアップロードする

次にTwitterAPIを実行してファイルをアップロードします。

Twitterに画像をアップロードするAPIを実行することになります。

media か media_data をパラメータにセットしてアップロードするのですが、Googleドライブでは画像そのものを取得できなかったので（やり方がわからなかった…）、base64という形式の文字列のデータに変換して送ります。

// ファイルのデータをbase64形式に変換
const base64Data = Utilities.base64Encode(fileByApp.getBlob().getBytes());

// 画像アップロードのAPIを実行
const uploadUrl = 'https://upload.twitter.com/1.1/media/upload.json'

const uploadParam = {
    media_data: base64Data // base64形式なので media_data にデータを入れる
}

// uploadResult にアップロードした画像の参照IDなどが入っている
const uploadResult = this.postRequest(uploadUrl, uploadParam)

④ アップロードした画像を含めてツイートする

③でアップロードした際にuploadResultにアップロードされた画像の参照IDが含まれています。

ツイートのAPIを実行時にそのIDを入れると③でアップロードした画像を紐付けてツイートされます。

// アップロードしたファイルを添付して投稿
const postUrl = 'https://api.twitter.com/1.1/statuses/update.json'
const postParam = {
    status: postData.message, // 画像と一緒に投稿する文章
    media_ids: mediaIds // カンマ区切りで書く
}

const postResult = this.postRequest(postUrl, postParam)

これで画像を付けて投稿するTwitterBotの処理は完成です。

あとは時間の設定などを行えば自動で画像を投稿することも出来るようになります。

この方法を使えばTwitterで画像を予約投稿することも

某TwitterBotサービスでは画像をアップロードすることが出来ないようで、小技として一度画像をアップロードした際のリンクをBotで投稿することで画像つきツイートをしているようです。

確かに参照先が一致していれば画像は表示されますが、日付が変わる瞬間に情報を開示したい場合などにあらかじめ画像を投稿しておくのは難しいので実用性はイマイチです。

今回紹介した方法であれば処理の中で画像のアップロードを行うので、元のツイートを用意する必要はなく、事前に投稿内容がバレることはありません。

画像を知らない外部のサーバーに置かないのでセキュリティ的にも安心ですね！

Twitterに予約投稿機能は付いたのですが、1つ1つ設定する必要がなく、スプレッドシートなので簡単に大量に作れるので色々とメリットはこちらのほうが多そう(*´∀｀)

めっちゃ良い！と思った方は是非参考に作ってみてください！

投げ銭・拡散頂けると喜びます＼(^o^)／

ここまで読んでいただきありがとうございました！