VSCodeでエディタ分割する感覚でChromeのタブも分割したい!(macOS編)

記事タイトルとURLをコピーする

こんにちは、プロセスエンジニアリング課の中村です。

引っ越して作業スペースが広くなったのでウルトラワイドディスプレイを購入しました。 画面が広いのはとても快適ですね!

さて、本題です。 私はコーディングするときはVSCodeを利用しています。 VSCodeではショートカットキーを使ってエディタを分割したり、エディタのグループ間の移動を行うことができます。 この機能はとても便利で、コーディングするときは関係するファイルをいくつか開きながら作業することが多いです。

f:id:swx-nakamura:20211224134843p:plain
VSCode Split Editor

この感覚をぜひChromeにも持ち込みたい…というのがこの記事です。 Chromeを横に並べて開きたいユースケースとしては、例えばSaaSの設定変更などです。 画面左半分はSaaSの設定画面、画面右半分は手順書といった具合です。

通常であれば、「両方のページを開いて、タブをドラッグして新規ウィンドウとして分離させた上で横に並べる」感じだと思うのですが、 これを一部おこなってくれるChrome Extensionを見つけました。

こちらです。 chrome.google.com

このExtensionは、ChromeのWindowが一つのみの場合は、新規にWindowを作成しそこに移動、ChromeのWindowが二つ以上あれば二つ目に移動、ということをしてくれます。

デフォルトだとこのExtensionにはショートカットキーが割り当てられていないので、ショートカットキーを設定しておくといいでしょう。 Chrome Extensionのショートカットキーはブラウザから chrome://extensions/shortcuts に移動すると確認・設定できます。

f:id:swx-nakamura:20211224135009p:plain

私はVSCodeに似た感じのKeyBindとしたかったので cmd + shift + K としました。

このExtensionにより「両方のページを開いて、タブをドラッグして新規ウィンドウとして分離させた上で横に並べる」のうち、「タブをドラッグして新規ウィンドウとして分離」が実現できるので、あとは「横に並べる」をいい感じにできれば快適なChrome Split生活ができるようになります。

Windowを横に並べる手段については、Magnet, Rectangle, yabaiなど色々あると思いますのでお好きなものをお使いください。 (私は最近yabaiを使い始めましたが、まだ慣ません…)