お知らせ

現在サイトのリニューアル作業中のため、全体的にページの表示が乱れています。
はてブ数
投稿日:
ジャンル::生活

フルリモートの環境をシンプルかつローコストに整備した話です。

やったこと

  • 私物マシンと業務マシンでのモニタ共有
    • 先にモニタを掴んだ方の映像が映るようにしてます
    • マシン切り替えをするときは片方はスリープにしてます
  • 私物マシンと業務マシンでのキーボード、マウス、USBカメラの共有
    • USB KVMスイッチを利用して切り替えられるようにしました
  • 私物マシンと業務マシンで異なる音声出力環境の整備
    • 個別のオーディオを繋いで対応してます
    • これは私物マシンのオーディオインターフェースの共有をしたくなかったため

構成図

構成図

主に使っているもの

デバイス 用途 製品
USB KVM スイッチ 共用 UGREEN 切替器 USB3.0 (パソコン 2:USB 機器 4)
モニタ 1 共用 iiyama ProLite XB2481HSU-B4
モニタ 2 共用 iiyama ProLite XB2481HSU-B3
キーボード 共用 Logicool G913-TKL-LNBK
マウス 共用 Logicool PRO HERO Gaming Mouse
WebCam 共用 Logicool HD Webcam C270n
ヘッドホン 私物用 SONY MDR-CD900ST
オーディオ I/F 私物用 Roland Rubix22
マイク 私物用 SONY ECM-PC60
HDMI 変換アダプタ 業務用 Anker PowerExpand+ USB-C & HDMI 変換アダプタ
オーディオ I/F 業務用 Creative Sound BlasterX SBX-G1
ヘッドセット 業務用 SONY MDR-XB55AP

あとがき

マルチモニタKVMスイッチの導入も検討したのですが、安価で信頼性が期待できるものが見つからなかったのと、取り回しが面倒そうだったので諦めました。安価な製品自体はAmazonで探せば3万円台辺りからあるのですが、怪しいメーカーやレビューが多く、3万円出してまでチャレンジするのは無理かなと思い、これは早々に諦めました。

また私物マシンはモニタがDP出力なのに対し業務マシンはHDMIというのもネックでした。異なるモニタ出力を捌けるKVMスイッチは探した限りはありませんでした。この時点でここを逆手に取ってモニタの出力切り替えを使う着想を得ました。

そしてオーディオが一番厄介で、オーディオインターフェースは直結したかったのでKVMスイッチに繋ぐことができませんでした。シールドを切り替えるというのも考えたのですが、私物マシンはヘッドホンとマイクが分離しているうえ、標準プラグとミニプラグという厄介な組み合わせだったのもあり、これも切り替え運用を諦めました。

そして、この三点を安価かつ、安定的に解決できる方法としてUSB機器はKVMスイッチ、モニタはモニタ自体の信号切替機能、オーディオは個別で用意することで解決することにしました。

切り替えは予想以上に手間でなく、各マシンの電源スイッチとKVMの切り替えスイッチを操作しますが、あまり負担には感じていません。ただまぁ始業時、昼休憩、終業時の三回なので許容できている節はあると思います。一日に何度もやるのはちょっと考えたくないですね。

はてブ数
投稿日:
言語::CSS

レスポンシブにdisplayを切り替えるCSSを書いててハマったので備忘録。

今回は例として画面幅に応じて表示する項目数を変動させるCSSを書いてみます。media queryとnth-childを使って表示数を切り替えていく感じです。

イメージとしてはこんな感じ。

SP View PC View
SPビュー
PCビュー

上手くいかないケース

このコードでは画面幅を変えても項目数に変化がありません。理由としてはnth-child(n + 4)display: none;が900pxでも保持されたままだからです。試しにdisplay: none;font-weight: bold;とかに変えてみると良くわかります。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    .example li:nth-child(n + 6) {
        display: none;
    }
}

上手くいくケース

以下のコードではnth-childで非表示にしている部分を900pxの時に表示指定にすることで3項目表示と5項目表示が切り替わるようになっています。そりゃ指定してなければ表示されないよねっていう単純な話ですね…。

デモページ

.example li:nth-child(n + 4) {
    display: none;
}

@media screen and (min-width: 900px) {
    /** 明示的に表示させる */
    .example li:nth-child(n + 4) {
        display: list-item;
    }

    .example li:nth-child(n + 6) {
        display: none;
    }
}