ウェブサイトをピクチャーインピクチャー表示にする拡張機能
![「Picture-in-Picture any site」のアイコン](https://www.naporitansushi.com/wp-content/uploads/2021/12/picture-in-picture-any-site_01.jpg)
この記事では、動画ではなく、ウェブサイトをピクチャーインピクチャー表示にするChrome拡張機能「Picture-in-Picture any site(ピクチャー・イン・ピクチャー・エニー・サイト)」について書きます。
サイトを比較して見たい時に便利です。
![「Picture-in-Picture any site」拡張機能のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_17-1000x563.png)
任意のウェブサイトをピクチャーインピクチャー表示(PIP)にできるChrome拡張機能です。
ピクチャーインピクチャー(PIP)にしたいサイトを開いて、ボタンをクリックすることでピクチャーインピクチャー表示にできます。ページをスクロールすると、一緒にPIP内の画面もスクロールされます。自由に配置、自由に拡大縮小できます。
ウェブサイトを比較しながら、作業したい時に便利です。PIPといえば動画のイメージがありますが、本拡張機能は、サイトをPIPモードにできます。「Picture-in-Picture Extension (by Google)」の拡張機能が使えないサイトでも、本拡張機能だとできる場合があります。
本拡張機能は、Chrome拡張機能のみでFirefoxアドオンはリリースされていません。類似アドオンを探してみましたが、見つけられませんでした。
サイト上の動画を小さな窓枠で表示する機能です。
![「Picture-in-Picture Extension (by Google)」拡張機能のスクリーンショット](https://www.naporitansushi.com/wp-content/uploads/2021/10/picture-in-picture_12.jpg)
動画の「ながら見」に特化した機能です。例えば、Wordで大学の課題をやりながら、画面の右端にYouTubeを表示して再生するといったことができます。
PIPにした画面は常に最前面に表示されるので、他のページが邪魔することはありません。
動画だけを枠いっぱいにしてウィンドウにするので、他の要素が映らないのも特徴です。YouTubeだと上部のヘッダーやタイトル、コメント欄などの部分を、全部取り払った状態で純粋に動画を楽しめます。
リリース元:mtsmfm
記事執筆時のバージョン:0.4.1(2020年5月22日)
インストール方法
Chromeウェブストアからインストールできます。
「Chromeに追加」をクリックします。
![「Picture-in-Picture any site」拡張機能をインストールする手順画像1](https://www.naporitansushi.com/wp-content/uploads/2021/12/picture-in-picture-any-site_03.png)
「拡張機能を追加」をクリックします。
![「Picture-in-Picture any site」拡張機能をインストールする手順画像2](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_11.png)
ツールバーに追加されればOKです。
![「Picture-in-Picture any site」拡張機能をインストールする手順画像3](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_12.png)
使い方
ブラウザでPIPにしたいサイトを開きます。サイトを開いたら、インストールした「Picture-in-Picture any site」の拡張機能ボタン()をクリックします。
![「Picture-in-Picture any site」 で当サイトをピクチャーインピクチャーにする手順画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_15.png)
現在開いているサイトが、ピクチャーインピクチャー(PIP)モードになります。
![「Picture-in-Picture any site」 で当サイトをピクチャーインピクチャーにした画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_16-1000x559.png)
ピクチャーインピクチャーにすると、そのタブの右側にアイコンが表示されます。ピクチャーインピクチャーにしたからといって、開いているサイトのタブを閉じてはいけません。タブを閉じると、一緒にピクチャーインピクチャーウィンドウも消えます。
![「Picture-in-Picture any site」でピクチャーインピクチャーにした場合のタブ画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_22.png)
ピクチャーインピクチャーウィンドウの拡大縮小
ブラウザを最小化していても、PIPは最前面で表示されます。マウスで自由に配置、拡大縮小できます。ただし、縦横比はブラウザ本体側に左右されます。ピクチャーインピクチャー側での拡大縮小は、比率を維持したままの拡大です。
![「Picture-in-Picture any site」 でピクチャーインピクチャーした画面を拡大縮小しているGIF画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_14.gif)
ブラウザウィンドウの拡大縮小
ブラウザ本体のウィンドウサイズを変更すると、合わせてピクチャーインピクチャーウィンドウの縦横比も変化します。縦長にすれば一緒に縦長になります。
![「Picture-in-Picture any site」 でブラウザ側のウィンドウサイズを変更した画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_18-1000x536.png)
ウェブサイトのページ倍率の変更
PIPにしているサイトのページ倍率を変更すると、一緒にピクチャーインピクチャーウィンドウも変化します。見えにくい場合は、ページ倍率で調整します。拡大縮小は、サイト上でキーボードのCtrlとマウスのホイール回転でできます。
![「Picture-in-Picture any site」 でスクロールしているGIF画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_20.gif)
ピクチャーインピクチャーウィンドウ側での拡大縮小はできません。ブラウザを開いて、ピクチャーインピクチャーにしているサイト側で調整する必要があります。
拡大縮小だけでなく、スクロールも同期されます。元のサイトを下にスクロールすると、ピクチャーインピクチャー内も下にスクロールします。
YouTubeなどの動画サイトのピクチャーインピクチャー
YouTubeなどの動画サイトもPIPにできます。ただし、動画に特化したPIPではないので、タイトルやヘッダーなど、不要な部分も一緒に映ります。
![「Picture-in-Picture any site」 でYouTubeをピクチャーインピクチャーにした画像](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_19-1000x660.png)
動画専用のピクチャーインピクチャーは、「Picture-in-Picture Extension」がおすすめです。動画だけがピクチャーインピクチャーになるので、余計な要素が入りません。
ピクチャーインピクチャーの解除方法
PIPを解除したい時は、画面内の右上にある「×」ボタンをクリックするか、マウスオーバー時に表示される「タブに戻る」をクリックすると解除されます。
![](https://www.naporitansushi.com/wp-content/uploads/2023/05/picture-in-picture-any-site_21.png)
本拡張機能は、複数サイト同時のPIPはできません。1つのブラウザにつき、1つまでです。既にピクチャーインピクチャーを作成した状態で、別のサイトをピクチャーインピクチャーにしても、上書きされるだけです。
感想
以上、好きなウェブページをピクチャーインピクチャー(PIP)表示にできるChrome拡張機能「Picture-in-Picture any site(ピクチャー・イン・ピクチャー・エニー・サイト)」についてでした。
動画のピクチャーインピクチャーに対応していない動画配信サイトで、無理やりピクチャーインピクチャーにするといったことが可能です。