USB周りを改善できないかと新たにUSBハブを購入しました。

別段USB周りに不具合があると言うわけではないんですが、3mのケーブルでUSB3.0のハブに繋ぐと言うのはいかがな物かと思いまして。しかも変換コネクタを嚙ませています。USB3.0の最大ケーブル長が3mと言う事を考えるとあまり好ましい状況ではないです。

USB DACがWindowsの標準ドライバでブツブツ言う原因のような気もします。

と言う事でもっと短いケーブルで繋ぎ、そこから別のハブへと数珠繋ぎすれば改善されるかもと淡い期待を抱いてAmazonでORICOのMH4PU-U3を購入してみました。

USB3.0でクランプ式、USBケーブルが直付けでないと言う事で選びました。欲を言えばセルフパワーに対応していれば良かったんですけどそう言った製品は見つけられませんでした。しかもホストから接続するUSBコネクタがType Aと言う点も気になるんですが、*1 これぐらいしか選択肢が無いので仕方ありません。

今まで卓上で使っていたORICOのMH4Uを1.5mのケーブルでPCと繋ぎ、そこから1mのケーブルでMH4PU-U3に接続しました。

AmaneroのドライバをアンインストールしてWindows標準ドライバで動かしてみます。若干ブツブツが小さくなったような気もしますが記憶に自信が持てないので何とも。ブツブツ言ってる時点でダメだしね。

試しにPC本体から直にUSB DACに繋いだところで改善しないところを見ると原因は別にありそうです。無駄骨でした。

Amaneroのドライバを使えば良いだけの話なんですが、標準ドライバだとスリープから復帰してもちゃんと音が出るんですよね。スリープ復帰で音が出なくなる一因はAmaneroのドライバにあるような…

USBハブを邪魔にならない使いやすい位置に設置できただけでも満足です。

シャツに付属していたカラーステイが心許ないので水牛の角製のカラーステイを購入しました。

カラーステイとは取り外しできるシャツの襟の芯の事です。他にもカラーキーパーと言う呼称が一般的なようです。カラースティフナー(Collar Stiffeners)と言う少しマニアックな呼称もあります。

このカラーステイは襟の形をピンとさせたり襟の浮き上がりを防ぐために使用するものです。最近は芯を内臓させてカラーステイが不要な物が多いので見た事が無い人も多いと思います。かく言う私も十数年ぶりぐらいに見ました。

現在着用しているシャツにはプラスチック製の薄い物が付属していて大抵はそんなもんだと思います。私のシャツの場合は0.5mm厚の物で存在感が無さ過ぎて洗濯の際外し忘れたりそもそも機能面で心許ないです。

と言う事でもっとちゃんとしたカラーステイが欲しくなり水牛の角製の物の購入に至りました。

ネットで探すとステンレスの物は沢山見かけますが金属製は嫌だったのでそれ以外で思いつくのはセルロースアセテート、ベッコウ、貝、水牛の角ぐらいでして。ベッコウや貝は価格的に論外、セルロースアセテートは存在しないのか見つけられず、何とか水牛の角製の物を見つけた次第です。

私のシャツの襟はスプレッドカラーなのでレギュラーカラーに比べてカラーステイの入るスペースは短いです。付属の物が5.7cmだったのでそれに近い5.8cmの物にしました。

重量は3セット6本で6.6gなので1本あたり1.1gぐらいで厚みは2mm前後です。若干反っている物もありますがそれはそれで襟の形を良い感じにしてくれます。*1

プラスチック板を型で抜いた付属品と比べると縁も滑らかで装着もスムーズで付属品から大分グレードアップしました。1セット約1,000円とお値段もそれなりにしますしね。

どれぐらい速くなったか自信は無いですが一応速くするためにちょっと細工をしてみました。

ページの遷移を動的にしたり画像の遅延読み込みを組み込んでみました。

ページの動的遷移はfetchを使いページ全体を読み込んでから必要な部分を切り出して現在のページに挿げ替えると言う感じです。それに伴いpushStateで履歴操作が必要になりpopStateイベントで履歴処理の自前実装が必要になったりと効果の割にはいろいろと面倒ごとが増えます。

ページロードで実行される前提のスクリプトを動的遷移の度に明示的に実行したりしないといけませんし。

Twitterのwidget.jsがそうなんですが、常に<head>内で追加していたのをTwitterの埋め込みを発見すると追加するように修正し、ページのロード毎にtwttr.widgets.loadを実行するようにしました。またasync付きでも動作するようになっていたのでasync付きにしました。元々のasync無しのだとレンダリングブロックが結構大きかったらしくページの表示が速くなりました。

画像の遅延読み込みはよくあるライブラリとは違い消極的な物です。DOMが構築された後にまだ画像サイズが判明していない物をキャンセルしてその要素が画面内に入ったらロードをするという物で、その時点で画像サイズを判別できるまで読み込んでいたらそのまま読み込みを続けます。

この「画面内に要素が入ったら」と言う判別のために以前はscrollやresizeイベント時に要素の座標から判別したりしていたんですが今はIntersectionObserverを使うだけで良くなったので随分楽になりました。

全体的に速くはなったと思うんですが、一方で履歴に関しては元々のブラウザキャッシュの方が速いです。replaceStateしたらその時点のページをキャッシュしてpopState時にキャッシュの有無で動作変更…なんてできるようにならないですかね。現状だとスクロール位置の復元すら当てにならないですし…

これ以上はコードで語ります。

• arekore.js*1