当サイトは、アフィリエイト・アドセンス広告を掲載しています。消費者庁が、2023年10月1日から施行予定である景品表示法の規制対象(通称:ステマ規制)にならないよう、配慮して記事を作成しています(記事はこちら、消す方法はこちら

参考:令和5年10月1日からステルスマーケティングは景品表示法違反となります。 | 消費者庁

ウェブサイトをピクチャーインピクチャー表示にする拡張機能

2021年12月8日Chrome拡張機能

「Picture-in-Picture any site」のアイコン

この記事では、動画ではなく、ウェブサイトをピクチャーインピクチャー表示にするChrome拡張機能「Picture-in-Picture any site(ピクチャー・イン・ピクチャー・エニー・サイト)」について書きます。

サイトを比較して見たい時に便利です。

「Picture-in-Picture any site」拡張機能のスクリーンショット

任意のウェブサイトをピクチャーインピクチャー表示(PIP)にできるChrome拡張機能です。

ピクチャーインピクチャー(PIP)にしたいサイトを開いて、ボタンをクリックすることでピクチャーインピクチャー表示にできます。ページをスクロールすると、一緒にPIP内の画面もスクロールされます。自由に配置、自由に拡大縮小できます。

ウェブサイトを比較しながら、作業したい時に便利です。PIPといえば動画のイメージがありますが、本拡張機能は、サイトをPIPモードにできます。「Picture-in-Picture Extension (by Google)」の拡張機能が使えないサイトでも、本拡張機能だとできる場合があります。

本拡張機能は、Chrome拡張機能のみでFirefoxアドオンはリリースされていません。類似アドオンを探してみましたが、見つけられませんでした。

サイト上の動画を小さな窓枠で表示する機能です。

「Picture-in-Picture Extension (by Google)」拡張機能のスクリーンショット

動画の「ながら見」に特化した機能です。例えば、Wordで大学の課題をやりながら、画面の右端にYouTubeを表示して再生するといったことができます。

PIPにした画面は常に最前面に表示されるので、他のページが邪魔することはありません。

動画だけを枠いっぱいにしてウィンドウにするので、他の要素が映らないのも特徴です。YouTubeだと上部のヘッダーやタイトル、コメント欄などの部分を、全部取り払った状態で純粋に動画を楽しめます。

リリース元:mtsmfm
記事執筆時のバージョン:0.4.1(2020年5月22日)

インストール方法

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

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

「Picture-in-Picture any site」拡張機能をインストールする手順画像1

「拡張機能を追加」をクリックします。

「Picture-in-Picture any site」拡張機能をインストールする手順画像2

ツールバーに追加されればOKです。

「Picture-in-Picture any site」拡張機能をインストールする手順画像3

使い方

ブラウザでPIPにしたいサイトを開きます。サイトを開いたら、インストールした「Picture-in-Picture any site」の拡張機能ボタン(「Picture-in-Picture any site」のアイコン)をクリックします。

「Picture-in-Picture any site」 で当サイトをピクチャーインピクチャーにする手順画像

現在開いているサイトが、ピクチャーインピクチャー(PIP)モードになります。

「Picture-in-Picture any site」 で当サイトをピクチャーインピクチャーにした画像

ピクチャーインピクチャーにすると、そのタブの右側にアイコンが表示されます。ピクチャーインピクチャーにしたからといって、開いているサイトのタブを閉じてはいけません。タブを閉じると、一緒にピクチャーインピクチャーウィンドウも消えます。

「Picture-in-Picture any site」でピクチャーインピクチャーにした場合のタブ画像

ピクチャーインピクチャーウィンドウの拡大縮小

ブラウザを最小化していても、PIPは最前面で表示されます。マウスで自由に配置、拡大縮小できます。ただし、縦横比はブラウザ本体側に左右されます。ピクチャーインピクチャー側での拡大縮小は、比率を維持したままの拡大です。

「Picture-in-Picture any site」 でピクチャーインピクチャーした画面を拡大縮小しているGIF画像

ブラウザウィンドウの拡大縮小

ブラウザ本体のウィンドウサイズを変更すると、合わせてピクチャーインピクチャーウィンドウの縦横比も変化します。縦長にすれば一緒に縦長になります。

「Picture-in-Picture any site」 でブラウザ側のウィンドウサイズを変更した画像

ウェブサイトのページ倍率の変更

PIPにしているサイトのページ倍率を変更すると、一緒にピクチャーインピクチャーウィンドウも変化します。見えにくい場合は、ページ倍率で調整します。拡大縮小は、サイト上でキーボードのCtrlとマウスのホイール回転でできます。

「Picture-in-Picture any site」 でスクロールしているGIF画像

ピクチャーインピクチャーウィンドウ側での拡大縮小はできません。ブラウザを開いて、ピクチャーインピクチャーにしているサイト側で調整する必要があります。

拡大縮小だけでなく、スクロールも同期されます。元のサイトを下にスクロールすると、ピクチャーインピクチャー内も下にスクロールします。

YouTubeなどの動画サイトのピクチャーインピクチャー

YouTubeなどの動画サイトもPIPにできます。ただし、動画に特化したPIPではないので、タイトルやヘッダーなど、不要な部分も一緒に映ります。

「Picture-in-Picture any site」 でYouTubeをピクチャーインピクチャーにした画像
動画をピクチャーインピクチャーしたい場合

ピクチャーインピクチャーの解除方法

PIPを解除したい時は、画面内の右上にある「×」ボタンをクリックするか、マウスオーバー時に表示される「タブに戻る」をクリックすると解除されます。

本拡張機能は、複数サイト同時のPIPはできません。1つのブラウザにつき、1つまでです。既にピクチャーインピクチャーを作成した状態で、別のサイトをピクチャーインピクチャーにしても、上書きされるだけです。

感想

以上、好きなウェブページをピクチャーインピクチャー(PIP)表示にできるChrome拡張機能「Picture-in-Picture any site(ピクチャー・イン・ピクチャー・エニー・サイト)」についてでした。

動画のピクチャーインピクチャーに対応していない動画配信サイトで、無理やりピクチャーインピクチャーにするといったことが可能です。

2021年12月8日Chrome拡張機能