Keisuke_00 の資料室

Twitter に乗らない長文、やったこと、メモの置き場

ディスプレイの買い替えとチューニングをした話

技術

学生時代に購入してから12年をともにしてきたPC用ディスプレイがついに天珠を全うした。 そして新たに仲間となったディスプレイのチューニングを行ったので記録しておく。

旧ディスプレイの使用状況と故障

今回故障したディスプレイは iiyama ProLite E2273HDS。*1　2012年9月から使用していた21.5型のTN液晶だ。購入価格は15,000円前後。研究室に置いてあった iiyama 製ディスプレイの発色が良くて気に入り自分でも購入した。

それから12年。1日平均で12時間以上はON状態だった。2023年7月末あたりから、スリープ復帰の際に、5分くらい黒画のまま再認識を繰り返すようになった。そしてその時間は次第に伸びて、2週間もすると40分近くPCが使えない状態になった。そろそろ引退かな、と思った。

ちなみに、この故障は「最新の NVIDIA GeForce ドライバがハードウェアを損傷させる疑いあり」と噂されたのと時を同じくしている。*2　ただ、報告されている現象と全く同じでもないような気もするし、ディスプレイ自体も年季が入っているので、影響はなんとも言えない。（その後、ドライバは一旦ロールバックした）

www.nichepcgamer.com

新ディスプレイの調整

新ディスプレイは iiyama GB2470HSU。Fast IPS を採用したゲーミングモデルとのこと。*3

www.mouse-jp.co.jp

どのディスプレイもだいたいそうなのだが、デフォルト設定でPC用として使うとかなり眩しく目がやられる。 映像の綺麗さや自然さをキープしながら負担の少ない見た目にしていく。

輝度・コントラスト

輝度を真っ白 RGB（255, 255, 255) が眩しくないレベルまで落とす。

コントラストは値を上下させたときに物理的にどう表示を変化させるかがディスプレイによって違うらしい。 とはいえ、ほとんどの場合真っ黒 RGB（0, 0, 0) の見た目は固定して白の強さを上下させる実装だと思う。 （画像をソフトウェア上で加工する時のコントラストとはここが違う） なので輝度と同じ考え方で眩しくないレベルに落とす。

項目 範囲 デフォルト値 設定値
輝度 0 - 100 50 5
コントラスト 0 - 100 40 4

実はこの設定値にしただけではまだ眩しかった。他の設定値を調整していくと少し馴染む。

カラーバランス

真っ白 RGB（255, 255, 255) がちゃんと白く見えるバランスに調整する。 紙とか、物理的に白いものを参考にする。ただし、白い紙は結局部屋の照明の色になるので注意が必要。

項目 範囲 デフォルト値 設定値
色温度 3段階 COOL NORMAL

E2273HDS は「色温度」「6-AXIS」「RGB」のいずれか1つの方式でバランス調整する形。 色々試した結果、色温度のプリセットでまあまあ納得のいく白が得られたので上記の結果とした。

ガンマ

ここまでの設定で真っ白・真っ黒が納得の行くバランスになったら、最後にガンマで中間色の調整をする。 一般的には、ガンマ2.2のディスプレイを想定して作られているコンテンツが多いので、そこに合わせる。 合わせる時はテスト画像が掲載されてるWebサイトを使った。*4

ガンマ補正
https://fujiwaratko.sakura.ne.jp/infosci/gamma_rgb.png

なお、他の設定値を弄ると適切なガンマ設定が変わるので、ガンマは最後に調整する。 E2273HDS の持つガンマ設定は3段階のプリセット式になっているが、今の設定で検証すると2.2に近いポイントがない。 体感的には各プリセットが1.6、2.0、2.4くらいに見えた。また、RGB成分ごとのズレ具合に開きがありそう。

信号劣化回避のため、できればソフトウェア側での調整は避けたかったが、 今回はGeForceドライバの設定（NVIDIAコントロールパネル）でRGB成分ごとに調整した。 ※ ディスプレイ側のガンマ設定はデフォルトの「Gamma2」

項目 範囲 デフォルト値 設定値
ガンマ（R） 0.30 - 2.80 1.00 1.15
ガンマ（G） 0.30 - 2.80 1.00 1.10
ガンマ（B） 0.30 - 2.80 1.00 1.10

黒に近いダークグレイが気持ち赤っぽく見えてるような気もするが、全体的なバランスを考えるとまあ仕方ないか。

その他

今回のメインディスプレイ更新に合わせて周りのディスプレイの見た目も近くなるように再調整した。

*1:ProLite E2273HDS/E2273HDS-B 仕様 | PLE2273HDS-W1/PLE2273HDS-B1 | 21.5型 | モニター・液晶ディスプレイの iiyama https://www.mouse-jp.co.jp/iiyama/products/lcd/22/PLE2273HDS/print02.html

*2:GeForce 536.67 ドライバ 不具合情報。ブラックスクリーンは直らず。536.40でハードウェア損傷か ［Update 2］ | ニッチなPCゲーマーの環境構築Z https://www.nichepcgamer.com/archives/geforce-driver-issue-536-67.html

*3:G-MASTER GB2470HSU https://www.mouse-jp.co.jp/store/g/giiyama-gb2470hsu-b1/

*4:ガンマ補正 https://fujiwaratko.sakura.ne.jp/infosci/gamma.html

ブログデザインのカスタマイズ

技術

ブログデザインを見直した時のことを記録しておきたい。 前後比較画像を記事の最後にまとめて掲載する。

テーマ選定

ブログテーマは以下のようなことを考えた上で公式にある "Report" を選択した。

  • ダークテーマは目には優しいけれど、文字メインのコンテンツではどうしても暗い印象を与えるのでやめておく。
  • テーマ自体に色や飾りが沢山使われていると記事側の色使いが難しくなるので、シンプルなものにする。

その上で、以下の部分は自分でカスタマイズすることにした。

  • 今どきのデバイスではページ余白が多いので、有効活用したい。
  • 字が小さくて疲れるため、大きくしたい。
  • ソースコードの引用が見にくい。コピーも簡単にできるようにしたい。
  • 記事の作成日とは別に、更新日を表示したい。
  • 脚注をつけたときに、それを章として独立させたい。目次にも追加したい。
  • スマホ閲覧時の見栄えも考えたい。

記事幅の調整

今どきのデバイスではページ余白が多いので、有効活用したい。 カスタムCSSに以下の記述を追加した。 変更箇所はブラウザの開発者ツール（F12キー）を使って自力で探しているので、他のテーマでも同じでよいのかは未検証。

なお、コメントアウトされている部分はテーマのデフォルト値。

/* 全体幅 */
#container {
  width: 95%;  /*width: 980px;*/
  max-width: 1110px;
}
#main {
  width: 100%; /*width: 640px;*/
  max-width: 100%;
}
/* 記事幅 */
#wrapper {
  width: calc(75% - 50px); /*calc((100% / 12) * 8);*/
  max-width: calc(1110px - 300px - 50px); /*calc((100% / 12) * 8);*/
}
/* サイドバー幅 */
#box2 {
  width: 25%; /*width: 280px;*/
  max-width: 300px; /*calc(((100% / 12) * 4) - 50px);*/
}

僕は普段 Web アプリをあまり触らない人なので、書き方の適切さは怪しい。 意図としては、テーマのデフォルトよりは横幅使ってほしいけれど、あまりにも長いと目線が左右しすぎて辛いのでほどほどに。

文字サイズの調整

字が小さくて疲れるため、大きくしたい。 記事幅と合わせて、1行あたり40文字前後で読めるとよい。 これもブラウザの開発者ツールで該当箇所を探しながら調整。

/* ブログタイトルフォントサイズ ======== */
#title {
  font-size: 30px; /*font-size: 24px;*/
}
/* ブログ概要フォントサイズ ======== */
#blog-description {
  font-size: 18px; /*font-size: 12px;*/
}
/* 記事日付フォントサイズ ======== */
.date {
  font-size: 90%; /*font-size: 13px;*/
}
/* 記事タイトルフォントサイズ ======== */
.entry-title a {
  font-size:25px; /*font-size:20px;*/
}
/* 全体フォントサイズ ======== */
.entry-content {
  font-size:18px; /*font-size:14px;*/
}
/* 章タイトルフォントサイズ ======== */
.entry-content h3 {
  font-size:130%; /*font-size:140%; = 20px*/
}
/* コードブロックフォントサイズ ======== */
pre.code {
  font-size:15px;
}

本当は全体的に相対値でサイズを決めたいとは思いつつも、テーマのデフォルトで px 指定になっている箇所が結構多く、 調整に時間がかかってしまいそうなので一旦リテラル値で指定しておくことにした。

コードブロックのデザイン改善

ソースコードの引用が見にくい。コピーも簡単にできるようにしたい。 これは先行で実施している人が数多くいるので参考にさせていただく。 *1 *2 *3 *4 *5 *6

整理すると、フッタHTMLに入れたJavaScriptとカスタムCSSを使って以下のことをやっている。

  • シンタックスハイライト（色付け）表示する。
  • 奇数行・偶数行で背景色を変える。
  • 横スクロールできるようにする。
  • コピペボタンをつける。
  • 行番号と縦線を入れる。
  • 冒頭に言語ラベルや任意のラベルをつける。
  • 配色を調整する。

複数のサンプルコードを参照しているため、多少リファクタリングをしているが、 基本的には組み合わせただけなので、全体的なソースコードは割愛して、以下には注意点だけ記載する。

行番号の追加はコピペボタンの追加よりも先に実行

コピペボタンはコードブロックの末尾に要素を追加しているので、 行番号追加を後から行うとそこを巻き込んで1行余分に出力してしまう。 先に実施しておくほうが楽。

// イベントの購読
window.addEventListener('DOMContentLoaded', () => {

  /* その他の処理…… */

  addLineNumber();  // 行番号の追加
  addCopyButton();  // コピペボタンの追加
 
  /* その他の処理…… */

}, false)

偶数行背景色の横スクロール対策

参考元のコードをそのまま組み合わせると、偶数行の背景色変更が横スクロールした先で途切れてしまう。 対策としてマージンの調整と、予めコードブロック内のリストの幅を大きめに取ることにした。

pre.code ol{
  margin-top: 0;
  margin-bottom: 0;
  width: 1980px;  /* 予め幅を取る */
}

/* マージン、パディング調整と、データラベルなしでもスタイルを有効化する */
.entry-content pre.code/*[data-label]*/ {
  position: relative;
  margin: 0 0 1.5em 0;
  padding: 2em 0em 1em 1em; /* 1.6em 1em 1em; */
}

更新日の表示

記事の作成日とは別に、更新日を表示したい。 これは2つ方法があるようだった。僕はアクセス負荷の小さい方を選んだ。 *7

ただしこの方法だと個別記事のページでしか更新日の情報が取得できない。 ブログトップページなど情報取得できないケースの場合はエラーとなるため、回避処理を追加した。

function addUpdateDate() {
  let dateModified = "9999-99-99"
  let script = document.querySelector('script[type="application/ld+json"]');
  // ブログトップでは日付情報が取れないので回避
  if(!script) return;
  let jsonld = JSON.parse(script.innerHTML);
  dateModified = jsonld.dateModified;
  
  var time = document.createElement('time');
  var lastmod = dateModified.substr(0, 10);
  time.innerText = lastmod
  time.setAttribute("datetime", lastmod );
  time.setAttribute("dateModified", "最終更新日：" + lastmod);
  time.className = 'lastmod';

  var date = document.querySelector('div.date'); 
  date.appendChild(time);
}

脚注の章化と目次への挿入

脚注をつけたときに、それを章として独立させたい。目次にも追加したい。 開発者ツールで見ながら挿入箇所を検討して、以下のようにした。

// 脚注にh3タイトル追加
function addReferenceTitle() {
  //<h3 id="参考文献・脚注">参考文献・脚注</h3>
  let h = document.createElement('h3');
  let txt = "参考文献・脚注";
  h.innerText = txt;
  h.setAttribute("id", txt);

  let ref = document.querySelector('.entry-content div.footnote');
  ref.prepend(h);

  // 目次にも追加 <a href="#参考文献・脚注">参考文献・脚注</a>
  let a = document.createElement('a');
  a.innerText = txt;
  a.setAttribute("href", "#" + txt);

  let li = document.createElement('li');
  li.appendChild(a);

  let toc = document.querySelector('.entry-content ul.table-of-contents');
  if(toc) toc.append(li);  // 目次がない記事を想定
}

スマホ表示対策

この手のブロクをスマホで見ることは個人的にはあまりないものの、 最近は無視する訳にもいかなくなってきたので、ある程度体裁を整えておきたい。

はてなブログのデフォルトではPC用とスマホ用のデザインは別れているのだが、 そのままだと二重管理になるのと、スマホデザインのカスタマイズ柔軟性が低い。 そのため、素人ながらなんちゃってレスポンシブデザインに挑戦する。 *8

はてなのレスポンシブデザインは管理画面で有効化すると使えるが、テーマによって対応状況が異なる。 "Report" は非対応なので、自力で頑張る。

/* 共通の設定 */

#container {
  /* 先に調整済みのものを使う... */
}
#main {
  /* ... */
}

/* レスポンシブ調整 */
/* 画面幅1120px以上（PCなど想定） */
@media screen and (min-width: 1120px) { /* 1140px がよく使われてそう */
  #wrapper {
    /* PC側設定は先に調整済みのものを使う... */
  }
  #box2 {
    /* ... */
  }

  /* ... */

}

/* 画面幅1119px以下（スマホなど想定） */ 
/* 右にあったサイドバーを下へ持っていく */
/* フォンドサイズはPCの1.25倍くらいしておく */
@media screen and (max-width: 1119px) {
  #wrapper {
    width: calc(100% - 5px);
    max-width: (100% - 5px);
  }
  #box2 {
    width: calc(100% - 5px);
    max-width: (100% - 5px);
    margin-left: auto;
    margin-right: auto;
    float: none;
    font-size: calc(14px * 1.25);
  }

  /* その他フォントサイズ設定... */

}

一応自分のスマホ（2021年発売の Android ）ではそこそこの見栄えになった。 古いスマホだと解像度が小さくなるので字が大きすぎるかもしれない。

この方法の欠点として、はてな管理画面のデサインプレビューや記事編集画面のプレビューではスマホデザインで表示される。 真面目に調べれば何かしら対策も出来そうだが、あまり支障が無かったので放置している。

前後比較

デフォルトの "Report" テーマとカスタマイズ語でキャプチャをとったので掲載する。

記事幅とフォントサイズ（変更前）
記事幅とフォントサイズ（変更後）
シンタックスハイライト（変更前）
シンタックスハイライト（変更後）

*1:ソースコードを色付けして表示する（シンタックスハイライト） - はてなブログ ヘルプ https://help.hatenablog.com/entry/markup/syntaxhighlight

*2:はてなブログで技術ブログを書くための技術 - ムニエルブログ https://blog.munieru.jp/entry/2020/03/26/220517

*3:はてなブログのコードブロックを”クリップボードにコピーする方法”について - じゃあ、おうちで学べる https://syu-m-5151.hatenablog.com/entry/2023/05/09/181943

*4:はてなブログの埋め込みコードの配色(背景・文字色)を自由に変更する - たねやつの木 https://www.taneyats.com/entry/change-embed-code-theme

*5:【はてなブログ】ソースコード表示に行番号を付ける方法 – Plane Note https://note.z0i.net/2018/03/hatena-syntax.html

*6:【はてなブログ】コード部分に行番号を表示するカスタマイズ - そういうのがいいブログ https://souiunogaii.hatenablog.com/entry/hatenablog-codeline

*7:【はてなブログ】最終更新日を追加する方法（短くて簡単！コピペでOK）CSSとJavascript利用 - バンビの初心者ブログ教室 https://www.bambi.pro/entry/hatenablog-datemodified

*8:レスポンシブデザインとは実装のメリット・デメリット、作り方について解説 | WEB集客ラボ byGMO（GMO TECH） https://gmotech.jp/semlabo/seo/blog/responsive_design/

MSYS2（MINGW64）を他アプリの窓で呼び出す

技術

MSYS2（MINGW64）のターミナル環境を VSCode のターミナルペインや Windows Terminal から直接使いたくなって調査した。

動機

特定環境下で何故か MSYS2 の mintty の窓が裏にあっても他のアプリからフォーカスを奪う不調を起こしていた。代替手段が欲しい。

Windows で Go 言語のC言語連携を試そうと思ったらCコンパイラは gcc しか対応していなかった。 だったら VSCode のターミナルペインも MSYS2（MINGW64） として使いたい。

標準の MSYS 起動メカニズム

最近の MSYS では mingw64.exe など複数の起動用 exe が提供されている。 これが同じフォルダにある mingw64.ini の環境変数を使って mintty.exe 窓の中で "bash.exe --login" を実行するらしい。

つまり、この呼び出し方のまま mintty.exe の部分を各アプリに差し替える方法が見つかればいいわけだ。

Windows Terminal の場合

MSYSの公式ページにも Windows Terminal の設定方法は記載されているのだが、MINGW64ターミナルとしては環境変数が整っていなかったりとイマイチ中途半端な結果になる。 なので、上記を参考に設定を作り直す。

Windows Terminal の設定画面を開いて、左ペインの一番下「新しいプロファイルを追加」を行う。 設定項目はそれぞれ以下のようにする。${} の部分は各自の環境に合わせる。

# 名前:
"MINGW64"
# コマンドライン：
"${msys64 のパス}\usr\bin\env.exe" MSYS=winsymlinks:nativestrict CHERE_INVOKING=1 MSYSTEM=MINGW64 "${msys64 のパス}\usr\bin\bash.exe" --login 
# 開始ディレクトリ：
"${msys64 の home パス}"
# アイコン
"${msys64 のパス}\mingw64.ico"

コマンドラインに使用している env.exe は、本家の起動方法における mingw64.ini と同じ役割を果たす。 *1 *2 つまり、後ろに記述した環境変数を前提として bash.exe を起動する。 このうち、 "winsymlinks:nativestrict" はシンボリックリンクを使わないのであれば設定不要。

ここまでで Windows Terminal のプロファイルは完成する。 これをデスクトップやランチャアプリから一発で起動するショートカットが欲しい場合はさらに以下を行う。

Windows Terminal をストアアプリとしてインストールしている場合、実行ファイルは以下が使えそうだった。 （最初、 wt.exe で検索したら複数出てきたが、どれもランチャからはアクセスできないと怒られる）

C:\Program Files\WindowsApps\Microsoft.WindowsTerminal_1.17.11461.0_x64__8wekyb3d8bbwe\WindowsTerminal.exe

この実行ファイル起動時に引数を渡して起動プロファイルを指定する。 以下は Windows Terminal を新しいウィンドウで「MINGW64」として一発起動するためのパラメータ。*3

"${上記 exe}" -w new nt -p "MINGW64"

ちなみに、ターミナルの文字色設定に元々あった .minttyrc は使えないと思われる。 Windwos Terminal 内の配色設定を新しく作るしか無い。

VSCode の場合

上記と同じコマンドが飛ぶようにJSON設定ファイルを弄ってやる。*4 VSCode の設定画面で以下を検索し、 「JSONを編集」で直接編集に入る。

"terminal.integrated.profiles.windows"

ここにデフォルトでは PowerShell やコマンドプロンプトの設定が列挙されている。

一番下に以下を追加すれば「MINGW64」という名前でプロファイルが追加される。

"MINGW64": {
    "path": "${MSYS2のroot}msys64\\usr\\bin\\bash.exe",
    "args": ["--login"],
    "env": {
        "MSYS": "winsymlinks:nativestrict",
        "CHERE_INVOKING": "1",
        "MSYSTEM": "MINGW64"
    }
}

VSCodeの場合は環境変数の設定に "env" フィールドが使えるため、 起動コマンドに env.exe は不要。

さらに、VSCodeのデフォルトターミナルをMINGW64にしたければ、 "terminal.integrated.profiles.windows" の外側に以下を記載する。

"terminal.integrated.defaultProfile.windows": "MINGW64",

最終的なJSONの様子。

"terminal.integrated.profiles.windows": {
    "他のプロファイル": {
    },
    "MINGW64": {
        "path": "C:\\Dev-Registered\\msys64\\usr\\bin\\bash.exe",
        "args": ["--login"],
        "env": {
            "MSYS": "winsymlinks:nativestrict",
            "CHERE_INVOKING": "1",
            "MSYSTEM": "MINGW64"
        }
    }
},
"terminal.integrated.defaultProfile.windows": "MINGW64",

その他

場合によってはMSYS2の中でVisualStudio用の環境を作りたい時がある。これは方法検討中。 *5

*1:ログイン時またはシェル生成時の環境変数、コマンド置換の設定 https://envader.plus/course/12/scenario/1123

*2:ログインシェルとは？非ログインシェルとの違いも併せてご紹介 – Rainbow Engine https://rainbow-engine.com/loginshell-nonloginshell-difference/

*3:Windows ターミナルのコマンド ライン引数 | Microsoft Learn https://learn.microsoft.com/ja-jp/windows/terminal/command-line-arguments?tabs=windows

*4:Visual Studio Code の統合ターミナルで MSYS2 の bash を選択できるようにする - Qiita https://qiita.com/chirimen/items/04e2e10c86c9ecd1e158

*5:MSYS2 から Visual C++ （の環境変数を設定するバッチファイル）を叩く | 雑記帳
https://blog.miz-ar.info/2016/02/msys2-vcvars-bat/