AbemaTV のコメントがニコ動風に流れる(+α) Chrome 拡張機能

少し前にこのブログにこっそりと Google Analytics を導入しました。検索エンジンからやってくる人はどんな検索ワードを入力したのかなと調べていたら、「abematv chrome 拡張」とか「abematv chrome」とか「abematv 拡張機能」とか、とにかく AbemaTV の拡張機能に関するワードがほとんどでした。

そこでぼくも気になって AbemaTV の拡張機能を探してみたら、とっても素敵な拡張機能を作っている人がいたので、少し興奮気味ですが紹介したいと思います。

どんな拡張機能?

某人気動画サイト「ニ○ニ○動画」では、コメントが動画上に流れていくシステムが有名ですよね。それを AbemaTV でもできるようにする拡張機能がありました!

_bem_tv ext - Chrome ウェブストア

実はぼくもさっき気づいてインストールしたのですが、なんとこの拡張機能が Chrome Web Store に公開されたのは昨日です。

それまではソースコードが公開されていて、自分でダウンロードして読み込んでね、って感じだったのですが、ストアに公開されたので、誰でもストアから簡単にダウンロードできるようになりました!

ちなみに、現時点で対応しているのは Google Chrome だけらしくて、Firefox ではまだパッケージ化されていないようです。

某動画サイト風にコメントが流れる!

AbemaTV ニコニコ風

↑こんな風に、AbemaTV のコメントが動画上に流れているのがわかります。

昼間(1時)に取ったスクショなので、コメント数が少ないですが、夜の時間帯のアニメ放送になると、すごい量のコメントが流れてとてもにぎやかです。

AbemaTV はリアルタイムでコメントが反映されるのでコメントを観ながら楽しめるのですが、更新ボタンをクリックしないと表示されなかったり何気に不便なんですよね。でもこれがあればそんな手間をかけることもなくコメントも楽しめるので、すごく楽しいです!

コメントが流れる速度を変えることもできるので、自分の好みに合わせた速度で観ることができます。

ほかにも便利な機能がたくさん

これだけでも十分便利ですが、この拡張機能にはほかにも便利な機能がたくさんあります。ざっと紹介します。

  • ウィンドウサイズに合わせて映像の端が切れないようにリサイズ
  • ダブルクリックで全画面表示に切り替え
  • エンターでコメント送信
  • 古いコメントを非表示 (コメント欄のスクロールバーがなくなる)
  • コメントを CSS の animation で流す
  • 流れるコメントから規定の単語を除去 (顔文字、連続する単語など)
  • 設定した単語が含まれるコメントを流さない
  • コメント入力欄の位置を下へ・コメント一覧を逆順・下へスクロール
  • 投稿ボタン削除・入力欄1行化
  • マウスホイールによる番組移動を禁止
  • コメント入力欄の近くに番組残り時間を表示
  • 常にコメント欄を表示

この拡張機能を知る前に最も望んでいた機能は、ウィンドウサイズを合わせてくれる機能です。現状の AbemaTV は全画面表示しないと動画の下端が切れてしまいます。テロップの文字が切れて見えるのは、ウィンドウサイズが合っていないからです。それをぴったり合わせてくれる機能もあったので大満足です。

AbemaTV のコメント入力欄は複数行になっていますが、実際に投稿するときには改行は無視されるので、わざわざ複数行にしなくても1行でいいじゃないか! という細かい工夫もされていて良いです (本当は違う意味かも…)。そしてエンターキーを押すと改行ではなくコメント送信できるなど、かゆいところに手が届く機能もあります。

不具合も少しある

この拡張機能はまだリリースされたばかりなのでちょっとした不具合もあります。

ぼくが使っている環境だけかもしれませんが、コメント欄を常に右端に表示させておかないと某動画サイト風にコメントが流れませんでした。

設定で最初から常にコメント欄を表示させることができるのでそれほど不便ではないですが、コメント欄は表示させずに動画上に流すことができたら最高です。

あとは、AbemaTV のコメントは上が最新となっていて、拡張機能の設定で下を最新にすることができるのですが、下を最新にしておかないとコメントが流れませんでした。

チャンネル切り替えをしたりするとまれにコメントが流れなくなりますが、更新すると流れるようになります。

でも、まだリリースされたばかりなので、これからどんどん改善されていくことを期待しています。

また、この拡張機能のソースコードは GitHub で公開されているので、もしコードが読めて修正できるようであれば、ぼくも上記の不具合を直してプルリク送りたいなと思います。

AbemaTVChromeExtension - GitHub

まとめ

この拡張機能 (リリース前のソースコード) をダウンロードしたのは、昨日のことで、これはぜひ紹介しよう! と思って README を見たらちょうどリリースされていたので、慌てて記事を書き始めました。

ぼくも去年から今年にかけて ニコ動の拡張機能 を作って公開したので、AbemaTV の拡張機能 (主にウィンドウサイズの調整) 作りたいなーと思っていたところに、もっと高機能な拡張機能を作っている人がいたのでちょっと悔しい部分もありますが、取り入れたい機能があったら、自分で新しく作るよりもこの拡張機能を支援したほうが良いのかなと思いました。

これからも YouTube, ニコ動とあわせて AbemaTV を楽しみたいと思います。

_bem_tv ext - Chrome ウェブストア
AbemaTVChromeExtension - GitHub