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

# はじめに

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

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

![ピクチャー イン ピクチャーで動画を再生する様子](https://i.gyazo.com/2a0fb8c4714ed273732842783eb7fb1c.gif)

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

macOSをお使いの方は、項目「macOSでのピクチャー イン ピクチャー」をご覧ください


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

まずChromeにてピクチャー イン ピクチャー機能を利用する方法を紹介します。
YouTubeにて機能を有効化するには、再生している動画上で2回右クリックすると現れるメニューからピクチャー イン ピクチャーを選択します。またChromeの右上、ログインユーザー隣のアイコンからもピクチャー イン ピクチャーを選ぶこともできます。

![ピクチャー イン ピクチャーをオンにする様子](https://storage.googleapis.com/zenn-user-upload/v8kja44l1r8ou1vxcjzr53rqb7un)

前からこの機能をよく利用していたので、この機能が意外と知られていないことに驚きました。普段仮想デスクトップ機能を使い複数のデスクトップで作業しているのですが、ピクチャー イン ピクチャー化したウィンドウを他のデスクトップに移動するのが不便だと感じていました。

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

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

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

Chromeの標準ではピクチャー イン ピクチャーの有効・無効を切り替えるショートカットが存在しません。そこで拡張機能を使ってピクチャー イン ピクチャーを有効にするショートカットキーを追加します。まず [Picture-in-Picture Extension (by Google)](https://chrome.google.com/webstore/detail/picture-in-picture-extens/hkgfoiooedgoejojocmhlaklaeopbecg) という拡拡張機能をインストールします（Googleが提供している純正拡張機能なので安心して使うことができます）。

![Picture-in-Picture Extension (by Google)のストアページ画像](https://storage.googleapis.com/zenn-user-upload/9xpo6ex85w2zvlmfy2wfcl0vgmlh)

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

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

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

https://www.microsoft.com/ja-jp/p/sylphyhorn/9nblggh58t01?activetab=pivot:overviewtab

上記のリンクからインストールできます。
このツールを使うことで仮想デスクトップの自由度がぐっと広がります。
例えば、`Windows`＋`Ctrl`＋`← →`でアクティブなウィンドウをそのまま他のデスクトップに移動することが可能になります。デフォルトでは`Windows`＋`Tab`で他のデスクトップにドラッグ&ドロップしなければなりませんが、このツールを有効化することで、1回のキーボード操作だけでスムーズに行うことができます。他にも現在作業しているデスクトップの番号を表示させたりできます。

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

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

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

## 設定方法

設定方法はシンプルで、SylphyHornの設定画面を開き。

![SylphyHorn設定画面の画像](https://storage.googleapis.com/zenn-user-upload/owvzichd66a4hqbj5w9huwfzlzhq)

キー設定2となっているところにショートカットキーを設定するだけです。私は両方設定していますが、YouTubeなどの動画を固定するだけなら上にあるウィンドウをすべてのデスクトップに表示（ピン留め）の部分だけで機能します。`Shift`＋`Pause`でウィンドウを最前面に固定し、外すときは`Shift`＋`Ctrl`＋`Pause`で解除するようにします（画面上では`Cancel`となっていますが`Pause`になります）。これでピクチャー イン ピクチャー化した再生ウィンドウを常に最前面に保持したまま他の作業もできるようになりました。

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

この方法はYouTube以外の動画サイトにも活用できます。例えば、有名なプログラミング動画学習サイトである[ドットインストール](https://dotinstall.com/)で動画を再生したままVScodeでコーディングをするなど工夫次第ではより効率的に学習する環境を作るのにも使えます。

![ドットインストールで使用する様子](https://storage.googleapis.com/zenn-user-upload/3j443ic84p1laadqfdohy77fp1g8)

他の仮想デスクトップでドキュメントを参照しながら動画を見るなどに使えそうですね。

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

# macOS でのピクチャー イン ピクチャー

macOSの環境で試したところ、前述した拡張機能の導入だけでデスクトップをまたいでのピクチャー イン ピクチャーができることを確認できました。

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

# さいごに

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

ピクチャー イン ピクチャー機能はWindows・Mac関係なく使うことができる、とても便利な機能なので知らなかった方はこの機会にぜひとも試してみてください。

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