White Libraryマルチディスプレイの実装 - White Library %        

White Library

世界中の情報をあなたへ

マルチディスプレイの実装

マルチディスプレイ
本日のアジェンダ
  1. はじめに
  2. マルチディスプレイの必要性
  3. 筆者の実装の背景
  4. マルチディスプレイの実装について
  5. トリプルディスプレイの実装について
  6. マルチディスプレイの実装の注意点

上記6項目です

1.はじめに

本日お話しするのは、WEBデザイナーやシステムエンジニアであれば、おそらく使用はしているであろう、マルチディスプレイについてのお話です。
中でもデュアルディスプレイについては最低条件で、トリプル、クアッド、もしくはそれ以上のディスプレイを一台のPCに繋いでいる人もいます。
そんななかで、私がプログラミングを勉強する上で、マルチディスプレイの実装に至るまでの経緯を簡単に記載できればと思ってます。

2.マルチディスプレイの必要性

先ずは、そもそもそんなに沢山必要なのかと思われる方もいらっしゃるかと思いますので、必要性から。
プログラミングのコードを記述する時は、「反映後のページ」であったり、「コードの参考にしているサイト」をみながら作業を行うことは少なくありません。
完成ページや参考先の画面へいちいち切り替えるのが面倒であったり、間違って閉じてしまったり、
そもそもの業務ロスに繋がりかねませんので、多くの職場で取り入れられています。

また、システムの設計によっては、複数の言語を使うことも多くありますので、別々の言語を一つのモニターで切り替えて構築するのはとても面倒な作業になります。

WEBデザインで一般的な例を挙げるのであれば、「HTML」と「CSS」が良い例だと思います。
「HTML」や「CSS」を勉強中の間は、画面を半分にしてそれぞれのコードを表示させれば、一つのディスプレイで事足りることも多くありますが、根本的な見にくさは捨てきれません。
さらに、「Javascript」や「PHP」、「JQuery」等の言語が増えてきた場合に、その都度該当の言語のページを開くのが面倒になってきます。
また、先ほど述べた「HTML」と「CSS」を一つのディスプレイに半々に表示したとしても、見えるのは「HTML」と「CSS」のコードエディタの画面のみ、編集中の実際のページは見えませんので、別でブラウザを開く必要があります。

それ以外にも、連絡を待ちながら作業をしたりすることもあるので、SlackやLINE、メーラーやスケジュールソフトを立ち上げながら作業をすることもあるかもしれません。(人によっては株やFXの為替レートを表示させている人もいます)

こうして、世のプログラマーは、自分の必要な分のディスプレイを用意するようになるわけです。
結局のところ、本当に必要なかどうかは自分で決めることにはなるのですが、上記に挙げた理由から、マルチディスプレイの実装はやっていた方が良いと私は思い。

3.筆者の実装の背景

それでは次に、私自身の必要環境についてお話させて頂き、実際にどのように実装したかを紹介したいと思います。

結論から言いますと、私が今使っている環境はトリプルディスプレイです。

やっていることとしては、「HTML」と「CSS」といったフロント言語にプラスして、「Javascript」や「PHP」と言ったバック言語の研修を行っています。

「CentOS」の仮想環境、「VSC(VisualStudioChord)」や「Brackets」等のエディタ、WordPressを使用していますが、現状はトリプルディスプレイで問題なく行えています。

これがデュアルディスプレイであれば、不便な所も多く出てくるところではありますが、その不便なところも踏まえて、お話を進めさせてもらいます。

先ず、人間が常に見ているディスプレイは1~2です。
それ以上見るには、シマウマさん並みの視野の広さが必要になってきます。
(シマウマさんは350度近くあるみたいですね)

例え見えていたとしても作業の邪魔になるかと思いますので、人間の情報処理能力の限界だと思っています。

では何故三つの画面が必要なのかと考えた時、私の感覚で下記の三つのグループに分けてみました。

マルチディスプレイの使用用途の分類

最初は①自分、②恋人、③愛人というグループ分け思いつきましたが、誤解を招きそうな表現になりそうなので辞めました。
皆さん、恋愛の場合はトリプル以上の実装はお控えください。

さて、余談もありましたが、結論から言うとやはり①と②は必要ですが、③以上はあれば嬉しい贅沢品のようなもので、必ず必要というわけでは無いです。

実際に私もオンラインスクールを卒業するまでは、シングルディスプレイでしたし、入社して1年程はデュアルディスプレイでした。

たまたま会社の研修をきちんと進めたご褒美としてディスプレイが買えたので、トリプルディスプレイにしましたが、それが無ければ今もデュアルディスプレイだったかもしれません。

そんなわけで、プログラマーになるのに、必ずマルチディスプレイにしないといけないのか
というとそういうわけではございません。

ですが、マルチディスプレイにすると作業効率が上がる。
これだけは間違いなく言えるメリットになります。

デュアルディスプレイにするだけでも、フロントのサイトコーディング作業が倍近く効率が上がりましたし、トリプルにした時も、「LINE」「メール」「Slack」などを常に確認しながら作業も行えるようになりました。

何より、広々と沢山使えるこの贅沢感は、ストレス解消にも繋がったといえます。

そんな作業効率の向上や作業ストレス軽減を目指して、いよいよモニターについてお話させて頂きます。

4.マルチディスプレイの実装について

先ずデュアルディスプレイ環境の構築についてですが、導入したモニターは「iiyam」の出している「Prolite E2280HS-B1」になります。

何故このモニターにしたのかと言われると、未使用でリサイクルショップにあったからという、非常に単純なエピソードがあるのですが、ぶっちゃけたところ、ゲームや画像編集するわけではなく、コーディングするだけならば、大きさが十分にあり、HDMI等の出力端子が対応しているかの確認さえできていれば何でも大丈夫と言えます。
基本的に1万円前後でもいいので、何かしら購入することをお勧めします。

しかしながら、「Photoshop」や「illustrator」等のデザインソフトを本格的に使用するのであれば、それなりに吟味することをお勧めしますが、本記事では特に触れません。
理由としましては、ディスプレイによって色の見え方は違いますので、あまりにも主流のスペックを兼ね備えていないディスプレイですと、見る人によっては見にくくなる可能性があるからです。

覚えて頂きたいのは、「プログラミング」や「コーディング」をするのであれば、安くてある程度の大きさがあればよいという点です。
「デザイン」や「動画」を編集するのであれば、それなりに画質に拘った方が良いですが、あくまで2台目のモニターである点を考慮してください。
元々あるモニターが十分なスペックであれば、必ずしも2台目に必要とは限りません。

一つ失敗したかなと思うところは、こちらのディスプレイは音声の外部出力に対応していなかった点です。

PCのモニター以外にも、PSやDVDプレイヤーのモニターにしようと、HDMIのスイッチハブを購入して、切り替えられるようにしましたが、音声はこちらのディスプレイ本体からしか出ず、外部のスピーカーでの出力ができませんでした。

もし音声を外部スピーカーなどに出力したいと思われる方は、BluetoothやWi-Fi対応なのか等も見ておくと良いかもしれません。

ただただ、その分価格は上がるかと思いますので、今回プログラミングという目的を以てして話すと、
不要な機能と言えるでしょう。

5.トリプルディスプレイの実装について

こうして最低限のデュアルディスプレイ環境が整った私ですが、会社の研修を始めて1年近く経とうという時期に、講師の方と面談をしたところ、Amazonギフトポイント1万6千円分のポイントが溜っていることが判明し、さらに来月有効期限が切れるとの事でした。
使用用途はプログラミングの習熟に必要なものに限られ、足りない分は自分で出しても大丈夫との事。
他の人はよくディスプレイを買っているということでしたので、私も新たにディスプレイを買うべく、
アマゾン市場を探し始めました。
元々デュアルディスプレイで1年程フロントのコーディングを行ってきましたが、ちょうどバック言語の開発に入ろうかという時で、新しく習熟しないといけない「PHP」や「MySQL」用にも、モニターを増やしておきたい所でした。

しかしながら、既に一つ持っているので、次買うなら違うタイプの方がいいなと考え、最終的に見つけたのがこちらのディスプレイ「ノースマイク(NORSMIC) モバイルモニター」になります。

先ずこちらのモニター15.6インチというサイズ感で、持ち運び可能という便利モニター。
私出身が九州の「壱岐」という島国で、実家に帰省する時やお出かけする時に非常に便利です。
「壱岐麦焼酎とChatGPT」の記事についてはこちら
気分を変えて外で作業をしたいという場合でも、モニターが無くシングルモニターで逆に作業がし難い
なんてこともありましたが、これがあれば、どこでもデュアルディスプレイが実現可能になります。
そしてなにより、私が購入した時にもありましたが、Amazonでは5000円クーポンが使えることが多いので、1万5千前後で購入ができます。
HDMI端子だけでなく、TypeCのUSBにも対応しているので、MacPCに多いUSB出力や、USB出力に対応したAndroidスマホの画面も簡単に投影ができました。
これからモニターを買いたいが、どのモニターを購入したらいいかわからない方には、是非お勧めしたいモニターになります。
サイズや色、画質など様々な種類がありますので、モバイルモニターというカテゴリで是非自分に合うものを探してみてください。

↓↓おススメのモバイルモニターはこちら

6.マルチディスプレイの実装の注意点

一応ここまでで、モニターの紹介でしたが、デュアルディスプレイからトリプルディスプレイにされる際に、私がはまった注意点がありますので、そちらを記載して終わりたいと思います。

先ず私が使用しているのはWindows10ノートPCですが、「NEC」からでている「LAVIEシリーズ」になります。

↓↓筆者と同等スペックのノートPC

では実際にデュアルディスプレイにする方法ですが、HDMI端子を繋ぎ、デスクトップ上の何もないところで右クリックからの「ディスプレイ設定」を開きます。
検出されたマルチディスプレイを「表示画面を複製する」から「表示画面を拡張する」を選ぶと完了という非常に簡単なものです。
※同じ画面をもう一つのモニターに出したい場合は「表示画面を複製する」で大丈夫です。主に、スクールやセミナーなどで、同じ画面を相手方と共有して見たい場合などで用いられます。

ディスプレイ設定画面

しかし、トリプルディスプレイをしたことがある人なら経験されたことが多いのではと思うのですが、
HDMI端子がそもそも一つしか無いということが多々あります。
特に、WindowsPCですと映像出力はHDMI端子のみで、USBからは対応していないことが多いようです。
(Mac製品ですと、USBから映像出力に対応しているものが多いそうです)
設定方法はわかってもそもそもディスプレイが検出されないという落とし穴にはまり、試行錯誤を重ねてしまうことが多いです。

私も検出されませんでしたので、色々と調べたところ、USBからの映像出力に対応していないものでも、変換機を使用すればUSBから映像出力ができるようです。
※HDMI出力を二股にして出力するものもありますが、これだと2台目のモニターと同じ画面が3台目のモニターに出力されるだけなので、「今のPCの拡張画面」として検出させるには変換機(ドライバー)が必要になります。

↓↓筆者が使用した変換機はこちら

トリプル以上のモニターをお考えの方は、自分のPCの出力が何個あるのかを確認し、必要に応じて変換機を購入しましょう。
デメリットとして、USBのからの変換処理をしているので、PC側に負荷がかかったり、重くなることがありますので、使用しているPCのスペックも十分配慮しましょう。
現状紹介した私のPCのスペックですと、動きが重すぎて使えないということはないです。
しかしながら、あくまでプログラミングの作業環境における話ですので、「グラフィック編集」や「動画の編集」等の画面遷移の激しいソフトを使用すると、処理が追い付かなくなる可能性がありますので、PCの画面出力が2つ以上あるものをご用意頂いた方がいいかもしれません。

↓↓その他のお買い得モニターはコチラ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


ページトップへ戻る