Twitch配信をミニプレーヤーで、お試し視聴できる拡張機能

FireFoxアドオン,Twitch関連

Twitch Previewsのアイコン

この記事では、Twitchのサイドバーにあるライブ配信者にマウスを乗せて、ライブ配信の画像・動画をポップアップ(ミニプレーヤー)で表示するChrome拡張機能「Twitch Previews」について書きます。

ミニプレーヤー機能以外にも、沢山のオプションが用意されています。

Twitch Previewsのスクリーンショット

Twitchのサイドバーにマウスホバーすると、その配信者のライブ配信されている動画をミニプレーヤーで表示するChrome拡張機能です。

本拡張機能を導入した状態で、サイドバーにあるおすすめチャンネルや、登録しているチャンネルのアイコン・名前の上にマウスを置きます。マウス下にあるチャンネルが現在ライブ配信している場合、右側にミニプレーヤーとしてポップアップ表示されます。

配信を見る前に、YouTubeのサムネイルプレビューのように、お試し視聴できるというイメージです。デフォルトでは、静止画になっていますが、設定から動画に変更できます。

ポップアップのサイズは、自由に変更できます。

ミニプレーヤー以外にも、以下のような機能が用意されています。Twitchを便利にする機能ばかりです。

  • マルチストリーム&マルチチャット(同一タブ内で複数のTwitch配信を視聴する機能)
  • ピクチャーインピクチャーのボタンを動画内に追加
  • 早送りボタンを動画内に追加
  • スクショ・録画ボタンを動画内に追加
  • 画面の明るさ調整ボタンの追加
  • チャットのクリアボタンの追加
  • お気に入り機能の追加
  • 検索ボックスの追加
  • フォローしているチャンネル以外のおすすめチャンネルを非表示にする
  • 自動画質変更の防止

Twitchをヘビーに使っている方に、おすすめの拡張機能です。Chrome拡張機能だけでなく、Firefoxアドオンも用意されています。

提供元:MarkM(Twitterはこちら
記事執筆時のバージョン:4.1(2022年6月30日)

インストール方法

Chromeウェブストアからインストールできます。

Firefoxをご利用の場合

「Chromeに追加」をクリックします。

Twitch Previews - Chrome ウェブストア

拡張機能のオーバーフローメニュー内に、拡張機能ボタンが追加されればOKです。

使い方

Twitchにアクセスします。既に開いている場合は、ページをリロードします。

初回アクセス時は、本拡張機能の設定画面が表示されます。右上の「×」で閉じられます。上部にある「English」の部分で、別言語に変更できます。残念ながら、日本語は用意されていませんでした。

Twitch Previewsの設定画面

ミニプレーヤー機能

サイドバーの登録チャンネル、及びおすすめチャンネルにマウスカーソルを当てると、すぐ右にミニプレーヤーを表示します。静止画になっていて、簡単ですが、動画のざっくりした雰囲気を知ることができます。

ミニプレーヤー機能のGIF画像

設定から、動画に変更できます。

設定画面の表示方法

次回以降、右上のプロフィールアイコンの右側に、専用のボタンが表示されます。こちらから、いつでもTwitch Previewsの設定画面にアクセスできます。

右上のTwitch Previewsアイコンをクリックすると設定画面が表示される

それぞれの設定項目の右横には、矢印ボタンがあります。クリックすると、より詳しい解説を表示します。 

設定項目の横にある矢印ボタンを示した画像

解説文の右横にある翻訳ボタンをクリックすると、新しいタブで、Google翻訳を開きます。

Twitch Previewsの設定項目をGoogle翻訳にかけた画像

翻訳した表を書いておきます。一部項目については、さらに詳しく解説します。解説していない項目については、僕自身、何のことか不明な項目です。僕は、英語が壊滅的なので、さっぱり理解不能です。

右側の設定項目Sidebar Previewsミニプレーヤー機能のオンオフ
Image Preview
Video Preview
ミニプレーヤーを静止画にする
ミニプレーヤーを動画にする
Preview Sizeミニプレーヤーの画面サイズ
PreviewsDirectory Previewsディレクトリプレビュー
Streaming(See Your Own Live Stream Thumbnail)ストリーミング(自分のライブストリームのサムネイルを確認)
MiscAuto Channel Points Clicker自動チャンネルポイントクリッカー
Multi-Stream&Multi-Chatマルチストリーム&マルチチャット
Advanced Video Embeds高度なビデオエンベッド
Clip Download Buttonクリップダウンロードボタン
Mute Auto-Playing Videos In Various Pages様々なページで自動再生されるビデオをミュートする
SidebarSidebar Favorite Channelsサイドバーに、お気に入りチャンネルを追加する
Sidebar YouTube Channelsサイドバーに、YouTubeチャンネルを追加する
Sidebar Facebook Gaming Channelsサイドバーに、Facebookゲームチャンネルを追加する
Sidebar Search Buttonサイドバー上部に検索ボックスを設置する
Hide All Sidebar Sections Except The Followed Channelsフォローしているチャンネル以外のサイドバー項目を非表示にする(おすすめチャンネルなど)
PlayerAuto Refresh On Twitch Player ErrorTwitch上でエラーが発生した場合に、自動的にプレーヤーをリフレッシュ(更新)する機能
Prevent Auto Video Quality Change When In Backgroundバックグラウンドでの自動画質変更防止機能
Full Screen+Chat Buttonフルスクリーン+チャットモードのボタンを動画内に追加
Picture In Picture Buttonピクチャーインピクチャーのボタンを動画内に追加
Fast-Forward Button早送りボタンを動画内に追加
Seek Streams Using Keyboard Arrow Keysライブ配信中、キーボードの矢印キーで動画を5秒戻し、5秒進み
Screenshot Stream Buttonスクリーンショットボタンを動画内に追加
Record Stream Button録画ボタンを動画内に追加
FlashBang Defender Button画面の明るさ調整ボタンを動画内に追加
Chrome-Cast -> Close Tab ButtonChrome Castで画面を共有
ChatClear Chat Buttonチャットのクリアボタンを追加
Incognito Chat Buttonシークレットモードのチャット?
PredictionsPredictions Notifications予測通知?
Predictions Sniper予測スナイパー?
SettingsImport/Export Settings本拡張機能の設定のインポート/エクスポート

注意点ですが、全ての設定項目は、基本的に変更後、ページをリロードする必要があります。リロードしないと正常に反映されない場合があります。

ミニプレーヤー機能のオンオフ

「Sidebar Previews」をオフにすると、一時的に本拡張機能のミニプレーヤー機能を無効化できます。

ミニプレーヤーを動画にする

「Video Preview」にスイッチすると、ミニプレーヤーが静止画から動画に切り替わります。ミニプレーヤー内で、配信を閲覧できます。

実際にどんな感じなのか、動画を貼っておきます。

注意点ですが、動画にすると、ミニプレーヤーの読み込みに時間がかかります。静止画の数倍かかってしまったので、こだわりがない方は、そのまま静止画でいいかなと思います。

ミニプレーヤーの画面サイズ

「Preview Size」で、ミニプレーヤーのサイズを変更できます。

スライダーを右に持っていくほど、大きくなります。あんまりでかすぎても、意味がないかなと思います。デフォルトでは、440pxになっています。

「Preview Size」でミニプレーヤーのサイズを大きくした画像

マルチストリーム&マルチチャット

「Multi-Stream&Multi-Chat」をオンにすると、複数のTwitch配信を同一タブ内で、同時視聴できるようになります。

ヘビーユーザーさんにありがたい機能だと思います。「Recommended(おすすめ)」と緑文字で書かれているだけあって、すごい機能です。

オンにした状態だと、Twitchの配信動画の下に専用のカラムアイコンが追加されます。

「Multi-Stream&Multi-Chat」をオンにすると、カラムアイコンが同接の横に表示される

クリックすると、新しい専用のページが表示されます。このページ内だと、マウスで自由自在に配置、サイズ変更できます。

「Multi-Stream&Multi-Chat」のページ
ポイント

僕の環境だと、専用のページに追加した数秒後に、動画の再生が途切れて、下記の文章が表示されました。

Twitchで、別の拡張機能を用いて再生した際に表示される警告メッセージ

翻訳してみると、サードパーティー製の拡張機能、広告ブロッカーなどを使っていると警告として表示されるようです。「ちゃんとTwitch公式で見てね~」ということでしょうか。

右下にカウントダウンが表示されていて、0秒になると、正常に動画が再生されます。

新しく、別の配信を追加したい場合は、サイドバーに表示されているチャンネルにマウスを置いて、同時視聴者数の下にあるカラムアイコンをクリックします。

チャンネルの横に表示されるカラムアイコン画像

上部の検索ボックスで検索して、追加することもできる…みたいなことが記載されていましたが、よく分かりませんでした。

チャットも表示したい場合、動画内にマウスを乗せて、右上の一番左のアイコンをクリックします。

動画内の右上に表示されているチャットボタン

チャットがオーバーレイで表示されます。配信動画2つ、チャット2つを表示してみました。同時に視聴できます。片方の音声をミュートにするといったことも可能です。(配信動画の左下の音量アイコン)

「Multi-Stream&Multi-Chat」で、配信動画を2つ、チャットを2つ表示した画像

手動配置も可能ですが、自動整理機能も用意されています。

上部の検索ボックスの左側にあるカラムアイコンをクリックして、配置方法を選択します。「Save current layout as preset」から、配置のプリセットを保存できるようです。試していないので、詳しくは不明です。

検索ボックス横の自動整理機能のボタン

分かりやすいように、一連の流れを動画にしてみました。

サイドバーのお気に入りチャンネル

「Sidebar Favorite Channels」をオンにすると、サイドバーの上部に、お気に入りチャンネルが表示されます。

お気に入りに登録するには、動画下の通知ベルアイコンの右にあるお気に入りマーク(星)をクリックします。

「Sidebar Favorite Channels」をオンにして、通知ベルの横にお気に入りボタンを表示した画像

お気に入りマークは、そのチャンネルをフォローしていないと表示されないので注意です。お気に入りは、フォローしているチャンネルの中でも、特に見たい方を登録しておくと便利です。

「お気に入りボタン」は、フォローしていないと表示されないので注意

お気に入りに登録すると、サイドバーの「FAVORITE CHANNELS」項目内に追加されます。フォローしているチャンネルよりも、トップに表示されます。

サイドバーの「FAVORITE CHANNELS」画像

サイドバーのYouTubeチャンネル

「Sidebar YouTube Channels」をオンにすると、サイドバーに登録しているYouTubeチャンネルを追加します。YouTubeのデータを読み取るため、オンにした時、アクセス許可するかのダイアログが表示されます。本機能を利用したい場合は、許可します。

サイドバーに「YOUTUBE CHANNELS」項目が表示されます。

現在、チャンネル登録しているアカウントでライブ配信しているチャンネルがあれば、表示されます。僕がチェックした時は、誰も配信していなかったので、「No live youtubers」と表示されています。

サイドバーの「YOUTUBE CHANNELS」画像

サイドバーの検索ボックス

「Sidebar Search Button」をオンにすると、サイドバーの上部に、検索ボックスが追加されます。大量にチャンネルをフォローしている方におすすめです。

サクッと検索して、絞り込むことができます。

サイドバーに検索ボックスを追加した画像(Sidebar Search Button)

フォローしているチャンネル以外をサイドバーから排除

「Hide All Sidebar Sections Except The Followed Channels」をオンにすると、「おすすめのチャンネル」、及び「〇〇さんの視聴者が視聴」項目がごっそり非表示になります。

フォローしているチャンネル、本拡張機能で追加した項目以外は、消えるのでスッキリします。

フォローしているチャンネル以外を非表示にした画像(Hide All Sidebar Sections Except The Followed Channels)

参考:Twitchのサイドバーのおすすめチャンネルを非表示にする方法

フルスクリーン+チャットモードのボタンを追加

「Full Screen+Chat Button」をオンにすると、動画内の右下に、専用のボタンが表示されます。2つのフルスクリーンモードが用意されていて、それぞれクリックした配置にしてくれます。

「Full Screen+Chat Button」をオンにした画像

ピクチャーインピクチャーのボタンを動画内に追加

「Picture In Picture Button」をオンにすると、動画内右下にピクチャーインピクチャーのボタンを追加します。ワンクリックで、Twitchの配信動画をピクチャーインピクチャー表示にできます。

「Picture In Picture Button」をオンにした画像

ピクチャーインピクチャー(PiP)とは、最前面で余計な要素が一切表示されないミニプレーヤーのことです。ブラウザを最小化していても、自由に配置できます。

Twitchの動画を、ピクチャーインピクチャーで表示した画像

早送りボタンを動画内に追加

「Fast-Forward Button」をオンにすると、早送りボタンが一時停止・再生ボタンの右に追加されます。ライブ配信中の動画ではなく、アーカイブの動画で利用できます。

「Fast-Forward Button」をオンにした画像

ライブ配信中、キーボードの矢印キーで動画を5秒戻し、5秒進み

「Seek Streams Using Keyboard Arrow Keys」をオンにすると、左右の矢印キーでの5秒戻し・進みができるようになります。

アーカイブ動画については、元々10秒前後の戻し・進みが有効になっています。一方、ライブ配信中の動画については、矢印キーを押しても、何も変化がありません。

本項目をオンにすることで、ライブ配信動画についても、矢印キーで5秒戻し・5秒進みが使えるようになります。ただし、ライブ配信はあくまでリアルタイムの映像なので、戻せる限度があります。大体30秒程度かなと思います。戻した分だけ、キーで進めます。

「Seek Streams Using Keyboard Arrow Keys」をオンにして、動画を5秒戻している画像

録画ボタンを動画内に追加

「Record Stream Button」をオンにすると、動画内に録画ボタンを追加します。クリックで動画内を録画します。一緒に音声も録音されます。

「Record Stream Button」をオンにした画像

個人的に、かなり便利だと思いました。切り抜き動画を作成する際に便利です。

赤いマークになっている間が、録画中です。再度、ボタンをクリックすると停止します。

「Record Stream Button」アイコンが赤くなっている画像(録画中)

停止すると、新しいタブで録画した動画がプレビュー表示されます。「Download Recording」でPC内に保存できます。

Twitch Previews Download Recording

拡張子は、WEBMになっています。

ダウンロードした録画ファイルのプロパティ画面

画面の明るさ調整ボタンを動画内に追加

「FlashBang Defender Button」をオンにすると、動画内に、画面の明るさ調整のボタン・スライダーを追加します。配信者が、白くて眩しい画面を表示した時に、暗くすると、目がチカチカせずに済みます。

「FlashBang Defender Button」をオンにした画像

チャットのクリアボタンを追加

「Clear Chat Button」をオンにすると、ライブ配信中の動画のチャット欄に、チャットクリアボタンを追加します。下部の設定ボタン横に表示され、クリックで表示されているチャットをリセットします。チャットがごちゃごちゃし始めた時に便利です。

「Clear Chat Button」をオンにした画像

アーカイブ動画では、表示されません。また、自分だけの環境で、同時に見ている他の視聴者さんには、影響されません。

本拡張機能の設定のインポート/エクスポート

「Settings」で、本拡張機能の設定をインポート(ロード)・エクスポート(セーブ)できます。

設定を保存したい場合、「Export」をクリックします。

Settings Import/Export Settings項目

ダイアログが表示されるので、「OK」をクリックします。

www. twitch.tvからのJavaScript Twitch Previewsの設定のエクスポート

設定が、JSONファイルとして保存されます。

twitch _previews_ v4.1_settings_2022-07-17_00-11ファイルの画像

感想

以上、Twitchにお試し視聴できるミニプレーヤー機能、その他の便利な機能を追加するChrome拡張機能「Twitch Previews」についてでした。

かなり設定項目が豊富で、驚きました。すごいです。

Posted by ナポリタン寿司