AbemaTVのながら見に必携!Picture in Picture Viewer拡張 - 適宜覚書-Fragments

AbemaTVのながら見に必携!Picture in Picture Viewer拡張

      2016/05/08

AbemaTV面白いですよね!オンデマンドではなく、普通のテレビ放送と同じストリーミングで番組表の時間通りに放送されます。国内でインターネットが繋がるのであれば、ユーザ登録不要で誰でも視聴できます。

AbemaTV(アベマTV) | インターネットテレビ局
AbemaTVは無料でテレビ番組が見れるインターネットテレビ局です!

しかし、このAbemaTVを視聴するとき悩ましいことがあります。PCのWebブラウザで視聴するとまるまる一画面占有してしまうのです。外部モニタを繋げてマルチモニタ化している場合は画面を分けられますが、ノートPC単体だとどうしようもありません。何かWebで検索したり、巡回したり、書き物をしたい場合、タブを切り替えることになります。オンデマンドならそれでも良いですが、ストリーミングだと切り替えた間に放送された内容は見逃してしまいます

筆者もこれは何とかならんのかとイライラしながら、PCはWebブラウザ、iPhoneでAbemaTVを映して使っていました。でも、これだとiPhoneがAbemaTVの専用機になってしまい、TwitterやFacebookその他に支障が出ました。アホ丸出しです。実は対策がありました。Youtubeのスマートフォン視聴で動画を子パネルに表示されたのと同じです。

今回は同時並行に両方を一画面に収めて使えるPicture in Picture Viewer拡張を紹介します。

Picture in Picture Viewer拡張の導入

事前準備

  1. Google Chromeを開き、アドレスバーに「Chrome://flags#enable-panels」と入力し、Enterキーを押下します。
  2. 表示されたflags画面の「パネル」にあるプルダウンリストで「有効」を選択します。
    flagsのパネル有効化

    flagsのパネル有効化

  3. 画面下部に表示された「今すぐ再起動」をクリックし、Chromeを再起動します。これによりパネル機能が有効になります。
    今すぐ再起動

    今すぐ再起動

インストール

  1. ChromeウェブストアでPicture in Picture Viewer拡張ページを開きます。
    Picture in Picture Viewer
    Docks your favourite stuff in a floating mobile-view window! Including Facebook chatting, Youtube videos and Hangouts calls
  2. ページ右上の「Chromeに追加」をクリックします。
    Chromeに追加

    Chromeに追加

  3. ポップアップしたウィンドウで
    拡張機能を追加

    拡張機能を追加

  4. Chromeのメニューバー右端に拡張機能のボタンが出来ます。
    拡張ボタン

    拡張ボタン

設定

  1. 拡張ボタンを右クリックし、メニューを表示して、「オプション」を選択します。
  2. 通常利用であれば既定のままで良いですが、今回はAmebaTVに特化した設定をします。一番上にある「Enable Mobile View for Most Sites」をオフにします。これによりモバイルビュー(スマートフォン等での表示)適用が無効化されます。適用されたままだと、パネルが開かず別の空ウィンドウが表示されてしまいます。
    モバイルビュー適用を無効化

    モバイルビュー適用を無効化

  3. 設定画面のタブを閉じます。

尚、その他の設定項目は今回特に変更しませんが、それぞれの意味を簡単に書きます。(今一つ自信がないので間違えてたらすみません)

  • Enable Mobile View for Most Sites:スマートフォン用などのMobile画面が用意されている場合それをパネルに表示
  • Enable Embed View for Video Sites:動画サイトの埋め込みをパネルに表示
  • Open Current Tab On Click:拡張ボタンをクリックした際、現在表示しているタブをラベルで開く
  • Don't show Popup: ポップアップ表示を開くようなページをパネル化した際、ポップアップを表示しない

早速AbemaTVを見る

とりあえず見る

  1. 早速AbemaTVを開きます。筆者は丁度やっていた一挙放送アニメを見たかったので「深夜アニメ」チャンネルを開きました。
    深夜アニメチャンネル | AbemaTV
    AbemaTVは無料でテレビ番組が見れるインターネットテレビ局です!
  2. ページを開いてから、メニューバーの拡張ボタンをクリックします。
  3. すると、同じページ内の右下のパネルに同じ内容が表示されます。
  4. このパネルは別タブに移動しても変わらず、常に表示されます。
    別タブでパネル内のAbemaTV視聴

    別タブでパネル内のAbemaTV視聴

サイズを変える

  1. 普通に表示されたパネルはこのように右下にちんまり表示されています。しかし、小さい画面ですし、画面の上下にシネスコ画面みたいな黒枠エリアが表示されて少し残念です。(AbemaTVのメニュー類は暫く放置すると消える筈ですが、次の操作をすると併せてパネルサイズ一杯に表示できます)
  2. パネルの左辺、上辺、左上端の境界面をドラッグすると画面サイズを変更できます。拡大縮小ともです。
    パネルのサイズ変更

    パネルのサイズ変更

  3. また、縦横比も自由に変えられます。動画の場合元の画像の縦横比に合わせれば奇麗にパネルにハマる表示になります。逆に合わせない場合、余った領域が黒枠エリアとして表示されます。
    パネルを拡大してみた

    パネルを拡大してみた

表示位置を変える

  1. 実はこのパネル右下に張り付いているだけではなく自由に位置を変えられます。
  2. ウィンドウの上側の枠部分をドラッグするとパネルウィンドウごとどこでも自由に配置できます。
    パネルの自由配置

    パネルの自由配置

  3. 但し、この操作をするとパネル自体が画面から見えなくなってしまう場合があります。その場合、タスクバー上にあるアイコンをクリックすると再度パネルが表示されます。
  4. また、パネルを再度初期の右下に表示したい場合、パネルをドラッグしてChromeのウィンドウ下部に触れさせると元に戻ります。

パネル化の方法

幾つかの方法があります。

  1. 拡張ボタンをクリックする:現在のタブに表示された内容をラベルに表示する。
  2. リンクを右クリックしてコンテキストメニューで「Open Link in Panel」をクリックする:リンク先をラベルに表示する。
    リンク先をパネルに表示

    リンク先をパネルに表示

  3. URLの最後に「#panel」を入力してEnterキーを押下する:現在のタブに表示された内容をラベルに表示する。ブックマークして普段使いのパネル表示を保存するには、この方法が最適です。
    パネル用URL

    パネル用URL

  4. (動作確認できず)http://の代わりにpanel://を入力してEnterキーを押下する:現在のタブに表示された内容をラベルに表示する。

パネルを複数表示する

パネルは一枚だけではなく何個でも開くことが出来ます。今回の動画の表示の場合、複数開くと音声が混じってしまって使い難いですが、その場合でも音声を一枚に限って他の音声を切れば、流しで他のストリーミング画像の進み具合を眺めることが出来ます。ストリーミングですから、見たかった内容が始まった時に見逃さず切り替える…なんて使いかたが出来ます

最後あたりにも書きますが、FacebookMessangerなど他のサービスのパネルを横に並べると色々と便利です。

公式のGitHubページ

GitHubにソースが公開されています。ここには使い方やサポートされているサービスも書かれています。

choniong/pipviewer
pipviewer - Picture-in-Picture Viewer Chrome Extension

まだ、これからも機能追加内容はここを参照すると良いでしょう。Chromeウェブストアに表示されているスクリーンショットだと、表示するパネル毎にオプション設定が可能なようですが、現状はパネル全般に適用されているのが実態です。仕組みが分かる人であれば、この辺を改善できるかもしれませんね。

AbemaTVとは

いきなり提供が開始された素敵な無料のインターネットストリーミング放送サービスです。無料サービスとは言え、侮ることはできません。

AbemaTVロゴ

AbemaTVロゴ

画質は帯域に依存しますが基本的に高画質で、チャンネル数やコンテンツ量が豊富です。既存の無料動画サービスは画質を下げて高画質の有償サービスへ誘導するのが常でした。また、テレビ放送の公式オンライン提供は未だコンテンツ数が少なく本腰が入っているとは言い難い状況でした。それと比べてAbemaTVはテレビと名に冠して恥じないコンテンツを提供しています。

特にアニメ系は充実の4チャンネルが用意されていて、ニコニコ動画でよく特集されるような一挙放送が頻繁に提供されています。流石に最新のものは無いまでも、勘所を抑えたセレクトも増えていて今後が楽しみです。

今はまだChromeCastなどテレビへの接続は画面のクローニングになってしまいますが、今後は正式に対応する予定です。更に使うシーンが増えますね。

類似アプリ:AtomでコーディングしてAmebaTVをながら見

おまけ…で紹介するのは勿体ないのですが、テキストエディタAtomでコーディングしながらAmebaTVをながら見できるアプリがあります。つい最近出来立てホヤホヤで、筆者はまだ使用していません。でも、同様の需要がきっとあると思います。

narikei/abema-pip
abema-pip - AbemaTV Picture-In-Picture Browser

終わりに

今回はAbemaTVに特化した紹介を行いましたが、実はPicture in Picture Viewer拡張はもっと汎用的なツールです。公式での紹介にありますように、Facebook MessangerやGoogle Keepをパネルで表示して使うのも便利です。これらには単体のツールや拡張機能も提供されています。

しかし、汎用ですからどんなWebページでも特別な仕掛けなくすぐにパネル表示させられます。紹介に書いたようにURLに追記するかボタンをポチリだけですから超お手軽です。まだ、弱点も色々ありますが、筆者はこれを導入して大満足でながら見をしています。

適宜覚書-Fragmentsは、筆者が興味をもった様々な情報やネタを筆者が忘れても後で思い出せるよう覚書として公開するBlogです。Google Chrome拡張、Facebook、Google、Twitter、Windows、各種Webアプリなどを扱うことが多いです。この覚書が、もし何かお役立ちになれば幸いです。

 - Facebook, Google, iPhone, Webサービス , , , , , , , , ,