Twitterの高度な検索が不便すぎる

みなさんご存知のTwitter.僕は最近ユーザー層の調査とかでTwitterの検索を使う機会が多いんだけどマジでこれ使いにくい．

使いにくい点

1回検索しないとこの表示が出ない
検索が毎回リセットされるので前の検索からちょっと変えるのが大変
コマンドで検索に打ち込んでもいいけどそれもかなりめんどくさい
縦に長くて使わない項目も表示されていて見にくい

ということでこれらを解決していく．

作っていくぜ〜

完成品

まずは完成品を見てほしい
https://nyanko3141592.github.io/TwitterCustomSearch/

Twitterっぽいデザインにして公式感を出した．Bootstrapは偉大

検索の仕組み

Twitterの検索は検索の入力をそのままURLに反映しているだけなので，すごく簡単．
「あ」って検索すると"https://twitter.com/search?q=%E3%81%82&src=typed_query"
%E3%81%82は「あ」をURIエンコードしてるだけ．JSはencodeURI(string)で簡単にこれがあるので作るのも楽．「あ」を入れたくないときは「-あ」として-を入れるとその後ろのワードを除外できる．これもそのままエンコードしてURLにしてるだけなので簡単．詳しい検索のコマンドなどは自分でググってみよう．

検索の種類

Keyword

キーワード検索
除外キーワード検索
ORキーワード検索
ハッシュタグ検索
Username
@検索
from検索
to検索
Date
since until検索
Engagement
いいね数検索
RT数検索
返信数検索
Filter
リンクについて
返信について

こんなかんじのそれぞれについて検索のURLをみながらJSでいい感じにURLを作る．

コード

全部公開してるのでこっち見て
https://github.com/nyanko3141592/TwitterCustomSearch.git

完成！

PC

スマホ

おわり

SCSS初めて使ったけどめちゃめちゃ便利だな