【GoogleChrome】動画以外のページをピクチャインピクチャで表示

PIP（ピクチャインピクチャ）って何か別の作業をしながら動画をながら見するのに凄く便利な機能ですよね、では動画以外のウェブページを PIP で表示する事はできないのかというと実はちょっとした工夫でできちゃうんです、以前こちらの記事で他のウィンドウやタブを開くとブラウザゲームが止まってしまうという対策の起動オプションをご紹介しましたが、最近のアップデートでこの起動オプションを付けていてもバックグラウンドだと停止してしまって使えなくなっちゃったんですよね、そこで良い方法は無いかと色々と試してみているところなのですが、もし動かしたいタブがひとつだけなら今回ご紹介するピクチャインピクチャで対応可能なのでは？っと考えた次第です、そしてピクチャインピクチャで表示する事で他の作業をしながらでも私がプレイしているゲームは普通に動かす事ができました、勿論ゲームのサイト以外もピクチャインピクチャで表示する事ができるので、例えばピクチャインピクチャで解説サイトを開く → そちらを参照しながら作業みたいな事もできちゃいます。

まずはアクティブなタブのウェブページをピクチャインピクチャで開くためのブックマークレットを作成しましょう、Chrome を開いたらブックマークバーを右クリックしてメニューの「ページを追加」を選択してください、ブックマークバーとは上の画像の赤枠で囲われているアドレスバーの下に表示されたバーの事ですね、ブックマークバーが見当たらない場合は「Ctrl + Shift + B」のショートカットキーで表示と非表示を切り替えられます。

「ブックマークを編集」のウインドウが開いたらまずは「名前」を入力します、この名前がブックマークバーに表示されるので分かりやすい名前にしましょう、今回は「PIP で開く」という名前にしてみますね。

次に「URL」のボックスですがこちらには下記のコマンドをコピーして貼り付けてください、コマンドを貼り付けたら「保存」ボタンをクリックすると完成です。

javascript:(async()=>{  const pip = await documentPictureInPicture.requestWindow({    width: 640,    height: 360,    disallowReturnToOpener: true  });  pip.document.body.append(...document.body.childNodes);  [...document.styleSheets].forEach(styleSheet => {    try {      const cssRules = [...styleSheet.cssRules].map(rule => rule.cssText).join('');      const style = document.createElement('style');      style.textContent = cssRules;      pip.document.head.appendChild(style);    } catch (e) {      const link = document.createElement('link');      link.rel = 'stylesheet';      link.href = styleSheet.href;      pip.document.head.appendChild(link);    }  });})();

これでアクティブなタブのページをピクチャインピクチャで開くブックマークレットを作成する事ができました。

では実際にウェブページをピクチャインピクチャで開いてみましょう、まず対象のサイトを開いたらそのタブがアクティブな（現在画面に表示されている）状態で作成したブックマークレットをクリックするだけでOK、すると動画のピクチャインピクチャと同じように最前面に固定されたピクチャインピクチャの小さなウインドウが開きました。