フォロワーのおもしろツイートをまとめたwebアプリを作って怒られよう #Vue.js

はじめに

みそまんじ氏というおもしろツイートを供給し続けている方がいらっしゃるので魚拓と拡散を兼ねて勝手にツイートをまとめたものをつくりました。ノリと勢いで作ったので備忘録として残しておきたいと思います。

完成したもの

作り方

材料

おもしろツイートをするフォロワー
IFTTT
GoogleSpreadSheet
GoogleAppScript
Vue.js

手順1：ツイートを取得してスプレッドシートにまとめる

それでは早速作っていきます。
今回は特定のアカウントのとある条件のツイートを取得したいのですが、お手軽にIFTTTを使用することにします。ただしIFTTTは15分ごとに実行されるためラグが生じます。GASとかをバリバリかける人はそっちで取得する方がいいかもしれません。

IFTTTに飛んでCreateからツイートを取得するAppletsをつくります。
If +This Then That の +ThisをクリックしてTwitterを選択します。
トリガーは特定の検索結果をまとめたいので「New tweet from serch」（画像右下）を選びます。

検索内容は自分が取得したい内容を入力しましょう。
ちなみに今回私が使った検索ワードは以下です。
...w from:unquitable exclude:retweets　-filter:replies
exclude:retweets　-filter:repliesの部分でリツイートとリプライを除外しています。ここは普通のTwitter検索と同じなので省略します。

次に+ThatをクリックしてGoogleSheetsを選択します。
トリガーは「Add row to spreadsheet」を選びます。（画像左側）

以下の情報を入力します。
Spreadsheet name：スプレッドシートの名前
Formatted row：取得するツイート情報
Drive folder path：スプレッドシートの保存先

Formatted rowはデフォルトで

CreatedAt：スプレッドシートに追加された時間
UserName：TwitterアカウントID
Text：ツイート本文
LinkToTweet：ツイートへのリンク
FirstLinkUrl：他のアプリと連携する用のリンク？（未検証）

が設定されています。取得したい情報以外は削除してしまいましょう。
また、UserImageUrlを追加することでTwitterアカウントのアイコン画像を取得できます。

こんな感じに設定しました。
作成完了すると新しいAppletsが追加されていると思います。
ちゃんと設定できているか確認するためには右上のSettingsからApplet Settingsを開きCheck nowを押せば即時実行させることが可能です。

しかし、問題点が1つありIFTTTを設定した後にツイートされた内容しか取得できません。1つでも取得するツイートがないとうまく実行されないため注意が必要です。
つまり収集したいアカウントの持ち主に取得条件のツイートをしてくれるように頼むかツイートしてくれるまで待つ必要があります。
私は頼みました

正常に動いていれば設定した保存場所にスプレッドシートが作成され、記録されている内容はともかくこんな感じで追加されているはずです。

ちなみに今回使用させていただいたコードでは一行目をkeyとして使用できるので自分でスプレッドシートを編集して追加しています。
下準備が整いましたので次の作業をしていきましょう。

手順2：スプレッドシートをAPI化する

さて、次はこのスプレッドシートに手を加えていきましょう。
上部メニューからツール > スクリプトエディターを選びます。
別タブでエディターが開くので以下のGASを入力します。

GoogleAppScript

function getData(id, sheetName) {
  let sheet = SpreadsheetApp.openById(id).getSheetByName(sheetName);
  let rows = sheet.getDataRange().getValues();
  let keys = rows.splice(0, 1)[0];
  return rows.map(function(row) {
    let obj = {}
    row.map(function(item, index) {
      obj[keys[index]] = item;
    });
    return obj;
  });
}

function doGet(e) {

  let data = getData('SpreadSheetID', 'SheetName');
  let output = ContentService.createTextOutput(JSON.stringify(data, null, 2));
  output.setMimeType(ContentService.MimeType.TEXT);
  return output;
}

私はGASを触ったことがなかったので以下の記事中のコードをお借りしました。

コピペでスプレッドシートをJSON形式のAPIにする方法

コード内のlet data = getData('SpreadSheetID', 'SheetName');に先ほどIFTTTで作成されたシートの情報を入力します。

「SpreadSheetID」はシートのURLの/edit#gid=0以前の文字列です。
例：https://docs.google.com/spreadsheets/d/スプレッドシートID/edit#gid=0

「SpreadSheetName」にはシートの名前を入力します。
間違えてスプレッドシート自体の名前を入力すると正常に情報を取得できないので注意しましょう。
今回の例で言えばSheet01が入ります。

コードを追加したら名前を付けて保存した後公開を行います。
メニューから公開 > ウェブアプリケーションとして導入を選びます。
一番下のWho has access to the appが公開範囲設定なのですがAnyone,even anonymousを選択しておかないと取得できないようです。
ただしAnyone,even anonymousにしてしまうと誰でも使用できてしまうので、他人に見られたら困るような情報を扱う場合は注意しましょう。

導入をクリックすれば「現在のウェブアプリケーションのURL」が表示されると思います。後で使うのでどこかに置いておきましょう。
ちなみにTest web app for your latest code.をクリックすると以下のように確認することができます。

手順3：ウェブアプリにする

Vue.jsとaxiosを使って表示していきましょう。
サンプル用にスプレッドシートを書き換えて以下のようにします。

続いてこんなHTMLを作成します。

index.html

<body>
    <div id="app">
        <div v-for="item in items" v-bind:key=item.tweet>
            <a v-bind:href="item.link" target="blank" rel="noopener noreferrer" class="itemList">
                <img v-bind:src="item.icon" alt="アイコン画像" loading="lazy">
                <div class="name">
                    <p class="id">{{ item.id }}</p>
                </div>
                <div class="text">
                    <p class="tweet">{{ item.tweet }}</p>
                    <p class="date">{{ item.date }}</p>
                </div>
            </a>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        const baseURL = '手順2の現在のウェブアプリケーションのURL';
        const app = new Vue({
            el: '#app',
            data: {
                items: null,
            },
            mounted() {
                this.getData();
            },
            methods: {
                getData() {
                    axios.get(baseURL)
                        .then(res => {
                            this.items = res.data.reverse()
                        })
                        .catch(err => {
                            console.log("error")
                        });
                },
            }
        });
    </script>
</body>

あとはいい感じにcssを書いてあげるとこんな風になると思います。

ポイントとしてはIFTTTで取得したツイートはスプレッドシートの一番下に追加されていくためそのままだと最新のツイートを見るには一番下までスクロールしないといけません。
そこでjsでthis.items = res.data.reverse()とすることで逆順にし最新のツイートが先頭に来るようにしています。
これを公開してあげれば完成です。
サンプルとして最初にも貼りましたが完成したものをもう一度貼っておきます。

みそまんじおもしろツイート大全

おわりに

果たして需要があるのかどうかわからない記事になってしまいました。
そもそもTweetDeckのカラムに検索キーワードぶち込んでおけばいいのでは？という話なのですが作っていて楽しかったのでヨシとしましょう。
また一度作ってしまえば取得するツイートのキーワードを変えるだけでいくらでも量産できるので、魚拓だけではなく推しのツイートを取集するとかなんかいろいろできると思います。（多分）
最後になりますがおもしろツイートをするフォロワーことみそまんじ氏のフォローをよろしくお願いいたします。

この投稿を読んでいるかはわかりませんが、みそまんじさんへ
勝手に作ったこと、記事にして公開したこと大変申し訳ございませんでした。快く投稿許可をいただきありがとうございます。今後ともおもしろツイートの供給をよろしくお願いいたします。