ピクチャー イン ピクチャーで堕落した作業環境を作る

公開:2020/12/06
更新:2021/02/06
4 min読了の目安(約4400字IDEAアイデア記事

はじめに

Chrome にはバージョン 70 から ピクチャー イン ピクチャー(PiP) という機能が追加されました。ピクチャー イン ピクチャーとは動画コンテンツなどを画面から切り離して独立した形で配置して見ることができる機能になります。少し前に Twitter で Youtube を小窓で再生できる方法として流行っていましたね。

ピクチャー イン ピクチャーを最前面に固定した仮想デスクトップです。これが完成形となります。
ピクチャー イン ピクチャーで動画を再生する様子

上の例ではピクチャー イン ピクチャーを最前面に固定したまま仮想デスクトップで画面を切り替えています。これは Chrome が提供するピクチャ イン ピクチャーという機能と Windows10 の仮想デスクトップを組み合わせて実現しています。仮想デスクトップ機能は Windows10 以降で使える機能です。 Windowsキー + D で仮想デスクトップの追加、Windowsキー + 左右キーで移動して作業できるものになります。シングルモニターでの環境でも仮想デスクトップを使うことで複数のモニターを使っているかのように使えるため、うまく活用することで作業効率が上がります。

2021/1/27 MacOS で実現させる方法について追記しました。
MacOS をお使いの方は、項目「MacOS でのピクチャー イン ピクチャー」をご覧ください

ピクチャー イン ピクチャーについて

まず Chrome にてピクチャー イン ピクチャー機能を利用する方法を紹介します。
Youtube でピクチャー イン ピクチャー機能を使うには、再生している動画の上で 2 回右クリックして現れるメニューから ピクチャー イン ピクチャーを選択します。(1 回の右クリックでは表示されないので注意) また Chrome の右上、ログインユーザー隣のアイコンからもピクチャー イン ピクチャーを選ぶこともできます。
ピクチャー イン ピクチャーをオンにする様子

前からこの機能をよく利用していたので、この機能が意外と知られていないことに驚きました。私は普段仮想デスクトップ機能を使い複数のデスクトップを開いた上で作業しているのですが、ピクチャー イン ピクチャーを使ったときに 1 つのデスクトップの中でしかウインドウを動かすことができず、仮想デスクトップで他のデスクトップに切り替えるとピクチャー イン ピクチャー化した動画が見えなくなってしまうのが不便だと感じていました。(この時点でかなり堕落していますが...)

今回は仮想デスクトップで最前面にピクチャー イン ピクチャーのウインドウを配置して仮想デスクトップを切り替えても表示を保持する方法について紹介します。悪用厳禁です。作業効率が落ちて仕事がままならなくなる可能性もあります。(笑)

動画で学習できるコンテンツやライブコーディング動画も増えてきているので、仮想デスクトップと動画を組組み合わせることでストレスなく動画コンテンツを流せるのはメリットもあるのかなと感じます。それぞれのスタイルで活用してみてください。

ピクチャー イン ピクチャーを簡単に切り替えられるようにする

Chrome の標準ではピクチャー イン ピクチャーの有効・無効を切り替えるショートカットが存在しません。そこで拡張機能を使ってピクチャー イン ピクチャーを有効にするショートカットキーを追加します。まず Picture-in-Picture Extension (by Google) という拡張 chrome ウェブストアからインストールします。(Google が提供している純正拡張機能なので安心して使うことができます)

Picture-in-Picture Extension (by Google)のストアページ画像

この拡張機能を有効化すると動画再生時に Alt + P で簡単にピクチャー イン ピクチャーモードへ切り替えられるようになります。(一部対応していないサイトもあります。) 動画再生ウインドウに戻すときはもう一度ショートカットキーを入力することでもとに戻ります。

仮想デスクトップ機能をツールで拡張する

Windows 標準の仮想デスクトップに機能を追加していきます。
これには「SylphyHorn」というユーティリティを使います。無料で使えて、かつ動作が軽いためおすすめです。

https://www.microsoft.com/ja-jp/p/sylphyhorn/9nblggh58t01?activetab=pivot:overviewtab
上記のリンクからインストールできます。(Microsoft Store に遷移します)
このツールを使うことで仮想デスクトップの自由度がぐっと広がります。
例えば、Windowsキー + Ctrl + 左右キー でアクティブなウインドウをそのまま他のデスクトップに移動することが可能になります。デフォルトでは Windowsキー + Tab でウインドウ管理画面を開いてからドラッグ&ドロップしなければなりませんが、このツールを有効化することで、1 回のキーボード操作だけでスムーズに行うことができます。他にも現在作業しているデスクトップの番号を表示させたりできます。

ウインドウを常に最前面で固定する

今回は SylphyHorn に含まれているタブのピン留め機能を使います。タブのピン留めとは、現在アクティブになっているウインドウを最前面に固定する機能です。ただ固定するだけでなく、この機能では仮想デスクトップをまたいでの最前面固定が可能になります。固定されたウインドウは固定解除がされるまで必ず最前面に固定された形で表示されるようになります。

このピン留め機能、ピクチャー イン ピクチャーで分割したウインドウにも適用できるんです。

設定方法

設定方法はシンプルで、SylphyHorn の設定画面を開き。
SylphyHorn設定画面の画像
キー設定 2 となっているところにショートカットキーを設定するだけです。私は両方設定していますが、Youtube などの動画を固定するだけなら上にあるウインドウをすべてのデスクトップに表示(ピン留め)の部分だけで機能します。画像の設定だとウインドウをアクティブにし Shift + Pauseでウインドウを最前面に固定し、外すときは Shift + Ctrl + Pause で固定化を解除するようにしています。(画面上では Cancelとなっていますが Pause キーと同じキーになります。普段キーボードの Pause を使わないため、3つ目のキーとして割り当てています。) これでピクチャー イン ピクチャー化した再生ウインドウを常に最前面に保持したまま他の作業もできるようになりました。

活用例 [ドットインストール]

この方法は Youtube 以外の動画サイトにも活用できます。例えば、有名なプログラミング動画学習サイトであるドットインストールで動画を再生したまま VScode でコーディングをするなど工夫次第ではより効率的に学習する環境を作るのにも使えます。
ドットインストールで使用する様子
他の仮想デスクトップでドキュメントを参照しながら動画を見るなどに使えそうですね。

ドットインストールでは連続再生を有効にしていても動画ごとにピクチャーインピクチャーが解除されてしまったので 1 本の動画が短いドットインストールでは動画ごとの要点確認程度に使うのが良さそうです。

MacOS でのピクチャー イン ピクチャー

MacOS の環境で試したところ、画面の固定化をしなくとも Chrome 拡張機能 Picture-in-Picture Extension (by Google)の導入だけでピクチャー イン ピクチャーショートカットの導入、複数のデスクトップをまたいでの動画再生ができることを確認できました。

Windows と比べて、画面をすべてのデスクトップの最前面へ固定化する必要が無いのはかなり便利です。

さいごに

今回は、ピクチャー イン ピクチャーと仮想デスクトップをツールを使い組み合わせることでながら作業ができる環境を作りました。ながら作業はあまり良くないのですが、最近はライブコーディング動画など動画を見ながら一緒にコーディングできるコンテンツも多くあるため、一概に動画を流しながらの作業や開発は悪とは言えないのではないかと、記事を書いていて感じました。

ピクチャー イン ピクチャー機能は Windows・Mac 関係なく使うことができる、とても便利な機能なので知らなかった方はこの機会にぜひとも試してみてください。動画の楽しみ方がぐっと広がります。また Windows・Mac 関係なく、もっと便利な方法や活用方法があれば教えていただけると幸いです。

最後まで読んでいただきありがとうございました。