うたつなぎ

今さらですが、4月のステイホーム期間中にTwitterで流行っていた「うたつなぎ」の関係をたどるWEBアプリを作ったときのことを書きます。

きっかけ

4月上旬頃から「#うたつなぎ」のハッシュタグが付いたツイートをちょろちょろ見かけるようになって、他に誰がやってるんだろう？って気になってました。
細美武士さんや菅田将暉さん、矢井田瞳さんがやっているのを見て、どういう思いで歌ってて、誰から繋がってきて、誰に繋げたのかまとめて見たい！と思って、そういうまとめサイトもなかったので、自分で作ってみました。

仕組みのイメージ

下記は作る前のイメージ。

Twitter API使って、Lambdaでデータ引っこ抜いて、DynamoDBに突っ込んでちょっと加工すれば、簡単にできんじゃね？
フロントエンドはReact.jsとネットワーク図はD3.jsで遊んでみよう！
さくっと作れるかと思ったら、めちゃくちゃ苦労した。。。

完成イメージ

うたつなぎ関連図 ： http://www.eonet.ne.jp/~moonbase2020/

右側にネットワーク図があって、青い円→ピンクの円→緑の円 と繋がっています。青い円は濃いほど選択している人に近く、薄いほど遠いことを表しています。緑の円は1階層下までに限定しています。
左側はツイートを埋め込んでるんですが、キャプチャは著作権に引っかかる可能性ありなんで、塗りつぶしてます(笑)
ちなみに円をクリックすると、円が赤色になり、左側のその人のツイートに変わります。もう一回クリックすると、その人中心のネットワーク図に切り替わります。
右側の上部のUSER LISTタブを選択すると、つぶやいた人を検索できます。

苦労した点

1. Twitterからきれいにデータが抜けない
　下記のツイートのみを取りたいがうまく取れない
　・動画がついてる
　・うたつなぎのハッシュタグが付いてる
　恐らく文字長が関係していると思われる。
　同様にメンション相手も取れるものと取れないものがある
　後、つぶやく人がハッシュタグ間違ってるとか、
　TwitterID間違ってるとか。。。
　結局、メンテ画面作って、手メンテしました＿|￣|○

2.つぶやきが多すぎる
　うたつなぎツイート数が多すぎて、表示がごちゃごちゃした。
　フォロワー数が10,000人以上のユーザから繋がるツイートに制限。。。

感想

好きなアーティストのうたつなぎ動画が簡単に見れるようになって目的は達成！
後、技術に飢えてるので、AWSとReact.JSで遊べたので、大満足(笑)