アウトプット大事だよねという話と、改めての自己紹介

前回の記事が2年ぶりだったのですが、そこからさらに３年経ちました。
もはや読者の方はいないかと思いますが、タイトルのとおりアウトプット大事だよねと感じる機会が直近で多かったので、
新たな気持ちでブログを書いていけたらと思います。

何があったのか

昨日以下のイベントに参加しました。

findy.connpass.com

エンジニアとして新たな環境に入ったときにどうキャッチアップしていくかという点も参考になったのですが、
技術を学んでいく姿勢、アウトプットへの取り組みが非常に参考になった、というか刺さりました。
「本当に理解するには、どんな形でもいいからアウトプットする」というのは本当だよなぁ、と。
最近あいまいな理解をしている領域が多いなと感じているので、自分の言葉としてアウトプットしていかねば！と改めて感じた次第です。

イベントの内容は以下でまとめて下さっていました。即アウトプットすごい！

zenn.dev

taniyamama.hatenablog.com

最近読んだ以下の本でも、書いて「整理する」ことの重要性が書かれています。

世界一流エンジニアの思考法 (文春e-book)

書いて「整理する」プロセスで、頭の中も整理されて記憶に残りやすくなり、実践可能な知識に近づきやすくなる。
自分が思い出すプロセスを実行するので、記憶の定着にも貢献する。

こんな経緯と、以前書いてたブログがあったじゃん！というところから、
改めて書いていけたらと思っています。
どちらかというと仕事ではマネジメント業務のほうが増えているので、技術に限らず仕事への取り組み方、考え方といったところや、
仕事環境、仕事道具などについても書いていけたらなと。

改めての自己紹介

名前
あすきー といいます。 Xアカウントは@us_keyです。
仕事
SIerに10年勤めてましたが、2021年4月にWeb系の企業に転職しました。
今は主にC#を使っています。
転職の話もここで全く書けてないですが、SIer（ほぼ1次請け）→Web系のエンジニア転職は結構珍しがられるので、
この辺の話もそのうち書けたらなと思います。
興味、趣味
最近はもっぱら自作キーボードにはまっています。
仕事道具でありながら色々カスタマイズしてお気に入りにしていくことで楽しく仕事できるというよき趣味ですw
あとは息子（8歳）の影響で始めた将棋が最近の趣味です。
初心者から始めて将棋ウォーズ初段が直近の目標です（今は1級）

今回はこのあたりで。
次が何年後かにならないようw、気軽な感じでアウトプットを続けていこうと思います～＾＾

ディスプレイのデイジーチェーン接続に大苦戦した話

前回の記事が2019年の4月なので、実に2年以上ぶりの記事でございます。
もはや記事の書き方を忘れた状態ですが、何とか書いていこうと思います。
この2年の間にコロナ禍やら転職やらいろいろとあったのですが、それは後々書く（かも）ということで、
今日は別の話を。

何の話かというと、DisplayPortの仕様分かりづらすぎ！という話です。（超ざっくり）

目次

背景

転職前からコロナ禍で在宅勤務となっており、ノートPC+ディスプレイ1枚で頑張っていたのですが、
Web系に転職しコードを書く機会が増えたこともあり、もう1枚ディスプレイが欲しくなってきました。
そこで、ディスプレイを探すとともに、PCからUSB-C1本つなげばディスプレイ2枚につながる状態を作りたいと思い、
USB-Cハブも探していました。
仕事用PCと私物PCの両方で使いたいのですが、USB-PD対応で映像出力もできる端子が仕事用PCは右側、私物PCは左側にあるため、ハブと繋げるケーブルは長い方がよいなぁということで、
↓こういうのとか、

Anker PowerExpand 13-in-1 USB-C Dock ドッキングステーション 85W出力 4K対応 HDMIポート 1Gbps イーサネットポート 3.5mm オーディオジャック USB-Aポート USB-Cポート microSD＆SDカード スロット搭載

↓こういうのとか、

Cable Matters USB C ドッキングステーション USB C ハブ USB Type C ハブ デュアル4K HDMI 80W MacBook Pro用 ラップトップを充電 Thunderbolt 3対応

を検討していました。しかしどれも結構お高い。。

USB-C接続かつDisplayPort出力付きディスプレイという選択肢

そんな中、USB-C接続ができ、ハブ代わりになるというディスプレイを見つけます。
安いのは2万円台前半からあるのですが、これだとハブ代わりにはなるものの、もう1枚ディスプレイをつなげるにはPCから別で映像出力する必要がある。

Philips（フィリップス） 23.8型ワイド 液晶ディスプレイ 243B9/11

ここで一度検討は保留してたのですが、色々調べるうちに、USB-Cハブ代わりになる上に、DisplayPort出力でデイジーチェーン接続できるというディスプレイがあることを知ります。
今回買ったのもこれ↓

DELL P2419HC プロフェッショナルシリーズ 23.8インチUSB-Cモニタ(良品先出しサービス保証付き)

これなら、PCからUSB-C1本つなぐだけで、ディスプレイ2枚に接続でき、さらにUSBが4ポートもあるので色々挿せる、という夢のような（？）状態を作れます。

デイジーチェーンに大苦戦

ディスプレイ購入後の構成は以下のような感じです。（図を書くのが面倒なのでテキストですいません）

<構成図>
[ノートPC]
｜USB-Cポート
｜
｜USB-Cポート
[ディスプレイ1（今回購入）]
｜DisplayPort
｜
｜HDMIポート
[ディスプレイ2（元々持ってたやつ）]

ディスプレイ2はHDMIポートとD-SUBポート（昔からあるアナログ端子）しかないので、DisplayPort to HDMIの変換ケーブルを買いました。
ちょっと調べたところ、DisplayPortとHDMIの変換ケーブルは「アクティブ」タイプと「パッシブ」タイプがあるらしい。
「パッシブ」タイプの方が安いし、これでDisplayPortからHDMI変換してデイジーチェーン接続もできるとのことなので、一番安いこれを購入。

Rankie DisplayPort to HDMI 変換ケーブル 4K解像度対応 1.8m ブラック

ディスプレイが届き、意気揚々と接続。。。。

2枚目、点かないやん。。。

うーんこれはおかしい、安いしはずれを引いたのかも、と思い、Amazonベーシックの同様のケーブルも注文（そんなに値段変わらないですが

Amazonベーシック DisplayPort to HDMI A/Mケーブル 1.8m

しかしこちらもつながらない。
どうなってるんだ！！

DisplayPortの仕様

よくよく調べてみたら、解説してくれているサイトもありました。
penpen-dev.com
DisplayPortのケーブルについての説明はこんな感じ。

• アクティブタイプ･･･
  →DisplayPort信号からHDMI信号に変換できるケーブル　
• パッシブタイプ･･･
  →HDMI信号をそのまま発信するケーブル

そして、DisplayPort端子についての説明はこんな感じ。

DisplayPort 1.3から「デュアルモード」という機能が追加され、DisplayPortからHDMI信号を発信できるようになりました。
なので、「デュアルモード」に対応しているDisplayPortから出力する場合は、パッシブタイプの変換ケーブルで出力することができます。

・・・つまり、DisplayPort1.2以下の場合、HDMIに出力するにはアクティブタイプの変換ケーブルが必要。
DisplayPort1.3以上であれば、パッシブタイプの変換ケーブルでOK（例外もあるようですが）。

今回購入したディスプレイのDisplayPortは・・・（なぜかDellのHPにはバージョン書いてなかったので、以下ページで確認）

jisaku.com

・・・DisplayPort1.2ですね。了解。アクティブタイプの変換ケーブル買います。

Plugable DisplayPort - HDMI 変換アダプター、アクティブ HDMI 2.0 対応 DisplayPort ポート搭載システム互換 4K@60Hz対応

ディスプレイ2枚は快適

そんなこんなで変換ケーブル2本無駄にしながらも、何とかノートPC+ディスプレイ2枚という環境を作れました。とっても快適。
（…狭いデスクでごちゃっとしているので載せるかだいぶ迷いましたが。。youtubeに挙がってる色んな方のデスクを参考にして快適デスクを作りたいものです）

まとめ

僕はディスプレイを疑ってディスプレイを買い替えようかとも思ったのですが（10年くらい使ってるし、いい機会かなとｗ）、
同じ悪戦苦闘をしてしまう人が少しでも減りますよう。。

DisplayPort to HDMIの変換は、
DisplayPort1.2以下の場合、アクティブタイプ必須
DisplayPort1.3以上の場合、パッシブタイプでもよい

少しでも参考になれば幸いです！

bootstrap4のdatetimepickerでchangeイベントを発火させる

今回はちょっとしたメモ程度。

bootstrap4を使っていて日付項目をdatetimepickerで入力したいなというときに、ライブラリを使うかと思います。 Tempus Dominus - Bootstrap 4

ライブラリの使い方などは下記のページを参考にしました。 its-office.jp

で、実装する中で、カレンダーで日付を選択したタイミングでイベント発火させたいな、となりました。
具体的には、日付を変更したタイミングでその日付に紐づくデータを取ってくるとか、日付をURLパラメータにセットして画面遷移するとか。
単純にjqueryのchangeイベントで処理を書けばいいかと思ったらそうはいかずちょっと手間取ったので、メモしておきます。

changeイベントの実装

$('#datetimepicker').on("change.datetimepicker", function(e){
    e.preventDefault();
    if (e.oldDate) {
        var target_date = $(this).val();
        window.location.href = "/hogehoge?target_date=" + target_date;    
    }
});

changeイベントはchange.datetimepickerというイベントで発火させればいいとのことで、実装してみました。 https://tempusdominus.github.io/bootstrap-4/Events/#changedatetimepicker

change.datetimepickerの発火タイミング

で、実装したところ、対象のinputを選択した時点でイベント発火するという。しかもなぜか2回発火する。まじか。
上記ページに記載があるのですが、このイベントはdateとoldDateという2つのパラメータを持っています。
input選択時に2回実行されるうち、1回目はoldDateがnull、2回目はoldDateを持っていません(何により発火されているのだろう？？)。
ということで、e.oldDateを評価して、値が設定されていれば処理を実行するという形にしました。これで選択時の2回の発火はスルーされ、日付変更時にイベント発火されるようになりました。

ajaxで処理したい場合(未解決)

上記は日付変更時に別画面に遷移するためOKなのですが、ajaxで実行したい場合にはページ内に留まることになります。
どうも日付変更時にもこのイベントが2回発火されていて、しかもどちらもoldDateがセットされているようです。
2回発火されるのを避けるには別の方法を採る必要がありそうだなあ。。
もうちょい調べてみようかなと思います。