みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Electronで外部ディスプレイ(拡張)を使ったアプリケーションを作る際は、screen.getAllDisplaysで返ってくる配列を座標でソートしてから使うのがおすすめ 🖥

f:id:kimizuka:20211002150457p:plain

screen.getAllDisplaysを使えば、利用可能なディスプレイを配列で取得することができます。

www.electronjs.org

const displays = screen.getAllDisplays(); // ディスプレイの配列を取得

この際、配列の順序がよくわからない(認識された順?)ので、僕は座標でソートして使うようにしています。

基本的にはOS側でディスプレイを横並びで設定し、x座標でソートを掛け、

const displays = screen.getAllDisplays().sort((a, b) => {
  return a.bounds.x < b.bounds.x ? -1 : 1
});

という感じです。
メインディスプレイのbounds.xが0、メインより左のディスプレイのbounds.xは負の値が入るので、
この書き方であれば、

f:id:kimizuka:20220204155753p:plain

と接続した場合、メイン(右側)ディスプレイが配列の先頭に、拡張(左側)ディスプレイが2番目に収納されます。
拡張ディスプレイを複数使う場合は左側に追加していけば、配列の後方に追加されるのでとてもわかりやすいです。
拡張ディスプレイが1枚の場合は、ソートなんて大袈裟だよと思ったりしてましたが、複数の拡張ディスプレイを使うアプリを作る場合はソートした方が安心安全です。