EZO -いいぞ-

1分で考えたブログ名。特に、意味はない。

統合型オタク支援特化Chrome Extentionを作った

最近VTuberにハマりました。たのしいです。

しかし、コラボなどを見ているときに「この人面白いな、チャンネル登録しようかな、Twitterだけでも見てみようかな」と思った時、そのリンクは概要欄にあります
概要欄を開くために下にスクロールし、リンクを探すという手間がかかります。面倒です。さらにたいてい概要欄は超長いので、その作業中は推しの姿が画面外です。

無駄ですね。
というわけで、それをいい感じにするChrome拡張機能を作りました。
Githubはこちら↓

github.com

概要欄のリンクをプレイヤー下に

概要欄にはたくさんのリンクがあります。
特に僕がよく見るVTuberの配信・動画の場合は

  • それぞれのチャンネルのリンク
  • それぞれのTwitterなどのリンク
  • (個人勢以外は)所属の企業Webのリンク
  • 場合によっては使用素材についてのリンク
  • ものによっては案件についてのリンク

などが有り、サクッと目的のものを探すのは難しいです。

色分けして上の方に置いとけばいいじゃん。というわけでこうなりました。

f:id:clank0920:20190904201655p:plain
水色:Twitter系 赤色:Youtube系 緑色:その他
このようにプレイヤーの下にまとめてリンクを置いておくことで、例えば

今日も葉加瀬は面白いなあ
コラボ相手の夜見さん……ってどんなツイートしてるんだろう
とりあえずTwitter見に行ってみよう

という一連の流れが、配信から目を離すことなく可能になります。

Youtubeリンクの場合は動画タイトルやチャンネル名、再生リスト名が出るようになっています。
ニコニコ動画のタイトル・チャンネル名にも対応しています。
TwitterAPIも挑戦しようかと思ったのですが、登録諸々が面倒そうでやめました(Youtube Data APIは以前から登録してあったのですぐ使えました)。

pixivのUIも上書きできた

せっかくなので、微妙にUIが……と日頃から思っているWebサービスCSSを書き換えてみました。
Chrome拡張機能ってすげー。

神絵師たちをたくさんフォローして毎日のようにpixivを見ている僕ですが、そのUIには疑問がありました。

  • 絵の全体を見るためにちょこっとスクロールが必要
  • 漫画などをスクロールしたら作者情報は上にあるまま
  • スクロールしたらいいねもブックマークもできない(ちょっと上にスクロールすれば復活しますが)
  • クリックして拡大表示しようとすると原寸大で出てくるので大きすぎて見えなあああああい!(じっくり細部を見たい方には良い機能だと思うのですが、僕は細部の描き込みより全体を大きく見て楽しみたい派です)

というわけで、これらを解決するいい感じのCSSを書きました。
下の画像だとわかりませんが、クリックして拡大表示した時は最大でも100vw・100vhを超えないようにしてます。

f:id:clank0920:20190904205028p:plain
どこまでぼかせばいいのかわからない
ゴリ押しもいいところというコードなので、何か起きたらすぐに動かなくなると思います。その場しのぎです。
ですが、イラストを見る効率は飛躍的にアップした…気がします。

ニコ動のUIも少しだけ

どこかのアップデートで、サムネイルにマウスオーバーすると右上に「とりあえずマイリスト」ボタンが出るようになっていました。
しかし僕はこれを使わないので(見てからじゃないと面白いのかわからないしマイリスしない)、ボタンを消すCSSを書きました。
これで誤爆マイリスを回避できます。

既知の不具合というか問題点

まずバックグラウンドでタブを開いた場合にjavascript系が動作しません。原因不明です。
content_script兄貴がどういうタイミングで動作するのか自分はよくわかっておらず、対策のしようがない状態です。もっとちゃんと調べ物して出直してきます。(ググろうとするとBackground Pageの話がいっぱい出てきてググり方に困ってたり)
一応リロードすれば動作はするので、実行タイミングの問題だと思います。

また、Youtubeの概要欄にあるリンクでTwitterハッシュタグYoutube系リンク・ニコ動以外のもの(緑色)はURLが出てくるようになっていますが、URLを指定して名前を変更できる機能をつけています。
が、現状なぜか動いていません。
例えば「https://www.google.com/」というリンクがあったとしたら、表示名を「Google」にできるということです。本来は。

それと、pixivでイラストのタブをたくさん開いたときにたまに画面に何も表示されないタブが出てきてしまいます。 こちらも原因不明です。多分javascript系なんだろうな…と思っています。

これからやりたいこと

Youtubeの機能に関しては概ね完成しているので、バグ直しがメインになります。なんで表示名が変わらないんだーという件です。 さらにYoutube系リンク(赤い字)でチャンネル名なのか動画のタイトルなのかパッと見てわからない部分があるので、頭にアイコンか何かを付けられたらいいかなと思っています。

pixivの方も同様で、バグを直したいなあという感じです。

一番気になっているのは、Youtubeもpixivも動的サイトなので、javascriptの読み込みタイミングが微妙だということです。
目的のDOMが出てくるまで実行を待っててほしいのですが、今はそれをとりあえず2秒待つというゴリ押しで実装しているので、なんとかしたいです。
なんとかなりそうなQiita記事はあったのであとはなんとかするだけ…のはず…。

qiita.com

コードが汚いのもなんとかしないといけませんかね。多分有識者から見たらめちゃくちゃ無駄なことしてるコードだと思います。

普段プログラミングなんてしない人間が3週間くらいjavascriptって何だよ(哲学)」とかjavascript完全に理解した」とか言いながら作ったものとしてはこれくらいが限界でした。

あと他のオタク系Webサービスを便利にする機能もつけられたらいいですね。僕が普段使ってるのはこの3つかなと思ったんですが、他にも応用させれば色々便利になりそうです。

まとめ

ともあれ、僕のブラウザでは動いているからとりあえずいいやという感じです。あくまで自分用なので。
Githubからダウンロードすれば誰でも使える…と思います。Youtube Data APIのkeyは上げるとマズイらしいので別ファイルに分離しました(これも地味に大変だった)。ご自分でご用意ください。

この拡張機能を使って起きたヤバいことには一切責任を持てませんので、あくまで自己責任でお願いします。
これを使って起きた良いことについては教えてもらえると嬉しいです。褒められて伸びるタイプなので。

ではまた。