【WEB】TwitterAPIで抽出したツイートをTL形式にしてサイトに埋め込む

12407 ワード
Twitter Web Twitter テキストリンク

ウェブサイト作った

基本インフラなのですが、ちょっとだけHTMLとかCSSを学ぶ機会があったので、勉強がてらオンゲグループ(主にスプラ)のウェブサイト的なのを作ってみました。(作りやすかった)
CSSデザインに関してはネット上にいくらでもシャレオツなテンプレートが転がってるので便利ですねぇ！

外部公開してないけどスクショだとこんな感じ。。。
トップ

メンバーのページ

メインが"メンバー"のページで、リストからメンバーを選択するとその人のウデマエなんかのプロフィールと、右側にプレイ動画の再生画面をタイムライン形式で表示してそのまま再生できるようにしました。

ゲーム動画だけのツイートをTL形式で埋め込むには…

動画ツイートも含め、ツイートにはすべて固有のIDがついていて、HTML埋め込み用のURLに変換できるサイト(https://publish.twitter.com/#)
にIDかURLをいれると変換してくれます。ただ、特定の複数ツイートをまとめたTLを埋め込もうとすると少しめんどくさい。

やりたいことは、
「固定のアカウントごとにスプラトゥーンの動画投稿のみで絞り込んだツイートをTL形式で表示させるURLを取得すること」。長いわ。

ツイートの検索欄に、

#Splatoon2 from:アカウントID exclude:retweets filter:videos

といれると、検索自体はできます。

※検索オプション解説
Splatoon2は、switchからtwitterに連携して投稿すると自動でこのハッシュタグがつくことを利用したもの。要はここを変えれば対象も変えれるし、なくせば抽出から外すことができます。ツイートする人次第にはなりますが。。
from:でツイッターアカウント指定
exclude:でリツイートを除外
filter:で動画のみを指定する。
他にもいろいろ→　https://mag.app-liv.jp/archive/81735/

最近まではtwitterそのものの機能で、この検索結果のTLをそのまま埋め込み用URLに変換してくれる”検索タイムラインウィジェット”なるものがあったけど、もう廃止してるらしいです。あれば解決やないか！
おどりゃクソ鳥

TweetDeckでコレクション機能を使う

Twitterにはブックマークみたいな「collection」って機能があって、更にTL形式で埋め込めるとのこと。
ただよく使われているスマホアプリやWEBでは使えないので、Twitter公式のクライアント「TweetDeck」を使います。
↓
https://decoy284.net/tweetdeck/
カラム表示とかアカウント一括管理とかヘビーなツイッタラーにはもってこいな機能があります。
で、collectionはブックマークを複数作れるイメージ。「いいね」みたいに通知いかないし、フォロワーのTL上で晒されることもないし便利だと思います。えっちなやつとか

これで、
・メンバーごとにコレクションを作成する
↓
・作成したコレクションのIDをhttps://publish.twitter.com/#
で変換して埋め込む
↓
・サイトに表示させたいツイートをコレクションに追加する

コレクションのIDは不変なので、ツイートを追加すれば逐一サイト上の表示も更新してくれます。
あれ？できた？？

・・・・・・・・・・。

・・・・・。

・・。

敵「メンバーがツイートするたびにいちいち検索して手動でコレクションに追加する気か？？」
ぼく「なんだァ？てめェ...」

TwitterAPIを使ってツイートをコレクションに追加する

さすがにそれはめんどくさいので、TwitterAPIを使って自動化します。
APIって何？って方はググってどうぞ。僕にもよくわからん。

①Twitterのデベロッパー登録

APIを使用するためには認証情報を取得する必要があるので、Twitterデベロッパーサイトに登録申請します。
詳細は↓
https://qiita.com/kngsym2018/items/2524d21455aac111cdee
3日ほどで登録完了のメールが届き、ログインできるようになりました。

Appsの画面から、

API Key
API Secret Key
Access token
Access token secret

を控えておきます。後に使うことになります。

②使用するAPI

リファレンスに行くと使用できるAPI一覧がずらっと載っています。
https://developer.twitter.com/en/docs/api-reference-index
今回使うAPIは"Standard search"と、"POST collections /entries/curate"。

"Standard search"で検索したツイートのIDを抽出して、
"POST collections /entries/curate"でコレクションに追加する。

これでTweetDeckを使わずに、ノー操作で検索と追加を行います。
ちなみに、"Standard search"は他にも"Premium"や"Enterprise"がありますが、
これらは有償のガチ研究者か企業向けのやつ。抽出できるツイートの数や対象期間が違うらしいです。

③検索APIを実行する

リファレンスにあるプログラム例を流用したいので、とりあえずPHPを使えるようします。(phpコマンドが打てればOK)

seach.php(一部)
"q" => "#Splatoon2 from:xxx exclude:retweets filter:videos",
//   "geocode" => "35.794507,139.790788,1km",
//   "lang" => "ja",
//   "locale" => "ja",
//   "result_type" => "popular"
   "count" => "100",
//   "until" => "2017-01-01",     
   "since_id" => "115265957126xxxxxxxx",
//   "max_id" => "643299864xxxxxxxxx",
//   "include_entities" => "true",

"q"に検索クエリを入力する。検索オプションがそのまま使えます。
"count"で引っ張ってくるツイートの上限数を指定します。
"since_id"は特定のツイートのIDより後のものを持ってきてくれます。

認証情報を入れ込んでいざぁ….実行！

php C:work¥search.php | python -m json.tool | findstr https://twitter.com/xxx/status/ > idlist_bf.txt

そのまま実行だとオブジェクト数が多すぎる上に改行もされてなくて見れたもんじゃないので、
パイプでpython -m json.toolをいれています。※PCにpythonいれておきましょう。
findstrでidが入っている行のみ抜き出します。xxxはアカウントのIDが入ります。


結果

idlist_bf.txt
"expanded_url": "https://twitter.com/xxx/status/117105153803xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117102058451xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117071670412xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117071588150xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117071563243xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117000835700xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/117000754589xxxxxxxx/video/1",
"expanded_url": "https://twitter.com/xxx/status/116964628069xxxxxxxx/video/1",

11....から始まる数字がツイートID。欲しいのはIDだけなので、色々使って周りの邪魔な文字を消してリスト化します。
また、上から順にcollectionに追加するので、このままだとTL上で古いツイートの方が上にきてしまいます。sortコマンドで昇順にします。

sort idlist_bf.txt > idlist.txt

結果

idlist.txt
116964628069xxxxxxxx
117000754589xxxxxxxx
117000835700xxxxxxxx
117071563243xxxxxxxx
117071588150xxxxxxxx
117071670412xxxxxxxx
117102058451xxxxxxxx
117105153803xxxxxxxx

これでID抽出は完了。

④コレクション追加APIを実行する

検索と同じくリファレンスにあるプログラム例を流用する。

add_collection.php(一部)
$request_json = json_encode( [
    "id" => "custom-114050705358xxxxxxxx",
    "changes" => [
      [ "op" => "add", "tweet_id" => "11612955030xxxxxxxx" ] ,  // 追加

"id"の数字はcollection作成時にできる不変のコレクションIDをいれます。
でその下の"tweet_id"の行にツイートのIDをいれて、

php C:work¥add_collection.php

で追加します。
複数ツイートを追加したい場合は
[ "op" => "add", "tweet_id" => "xxxxxxxxxxxxx123" ]
[ "op" => "add", "tweet_id" => "xxxxxxxxxxxxx456" ]
というように下に追記していきます。

⑤リスト化したIDをadd_collectionのphpファイルに入れ込む

最後に、add_collectionに作成したIDリストのエントリを入れていきます。
qiita大先生より、https://qiita.com/wagase/items/2180d8911dcc2a748fd3

add_id.bat
set INPUT_FILE=C:work¥idlist.txt
set OUTPUT_FILE=C:work¥collection.php
setlocal enabledelayedexpansion
for /f "delims=" %%a in (%INPUT_FILE%) do (
set line=%%a
echo [ "op" =^> "add", "tweet_id" =^> %%a ] , >>%OUTPUT_FILE%
)

要は["op" =^> "add", "tweet_id" =>にリストのIDを順に付け加えてphpファイルに追記するバッチです。

後はこの流れをまとめて一つの実行ファイルにすれば、ワン実行で検索・collection追加をやってくれると！
スケジューラに仕込めば完全自動化！敵は死んだ！もういない！

WSLでsedだのawkだの使えればもっとスマートにできるなあ…とは思ったけど時間なくてやめました。あんまイケてないですね。
あと当然、鍵付きアカウントだとできないので注意です。

いじょ