ロービジョンの観点からエディタを使いやすくしてみた

チームメンバーと共同作業をするには Visual Studio Code が便利

みなさん Microsoft の Visual Studio Code (以降 VScode) というエディタをご存知でしょうか。
プログラミングに便利なエディタなのですが、Live Share という、他の人と同じファイルを同時に編集する拡張機能があり、現在はこれを利用してテレワーク環境で開発をしている方もいらっしゃるかと思います。

実はこの VScode、設定を細かくカスタマイズできるので、単なるテキストエディタとしても私のようなロービジョンにとっては非常に使いやすいです。
また Web ミーティングシステムなどで画面共有しながらコーディングをする場合、文字が小さすぎて見えなかったり、拡大機能を使っても文字が潰れて判別しづらいのですが、 Live Share 機能を使うことで自分の PC のエディタの画面を見ることができ、作業効率が格段に上がります。

まずは見てもらいましょう

こちらはデフォルトの画面（だと思います）。既に設定をしてしまったので、設定を外した画面のスクリーンショットを撮りました。私の視力では、この状態では文字をまったく認識できません。

何をさておき文字を大きくする！

最初に設定したのは文字のサイズです。
設定ファイル (settings.json) では以下の設定をしました。
最初にファイルを開いたときに、文字サイズ30ピクセルになります。

"editor.fontSize": 30,

次にブラウザのように、マウスホイールで文字を拡大できる設定もしました。この設定をしておけば、Windows の場合 [Ctrl] キーを押しながらマウスホイールを前後に動かすことで、テキストが表示されているエリアのみの文字サイズを拡大/縮小することができます。メニューバーや、左ペインのエクスプローラなどはそのままのサイズなので、表示できる情報量をあまり減らさず見やすくすることができます。

"editor.mouseWheelZoom": true,

これだけで、とりあえずエディタの文字は見えるようになりました。
以下が文字サイズを大きくした画面のスクリーンショットです。

まだまだ見やすいとは言い難い...

VScode はデフォルトが黒を基調としたダークモードになっていますが、実はこれ、私にはあまり見やすくありません。理由としては２つあります。

・黒の背景色に白い文字はコントラスト比が高すぎて文字の輪郭が滲んで見える
・他のアプリケーションのダークモードと色が被ってウィンドウの境界線が見えなくなる

そこで、いくつかあるカラーテーマの中から Tomorrow Night Blue というテーマを選び、使うことにしました。

もっと見やすくできるかな...？

文字サイズやテーマを変更して使い続けているうちに、いくつか不便に思うことが出てきました。
また、私が画面共有をしてチームでの共同作業している際に、Windows の拡大鏡などを併用しながら操作している様子を見て、他のメンバーが「（大変そうだ、という意味で）これは見えないですね...」と言っているのを聞いて、設定で改善できることはやっていこうと思い立ち、ひそかに設定を見直しはじめました。

今回、改善しようと思ったのは以下の３つ。
Live Share での共同作業を円滑にすることを重視し、操作ミスやカーソル位置を見失わないようにする対処をピックアップしました。

・VScode のウィンドウをクリックしたときに、意図しない行へジャンプしてしまう
・複数のファイルを並行して編集中、ファイルの行き来に手間取る
・Live Share で他のメンバーのカーソルに追従していても、どこを見ているか認識しづらい

これらの問題を解決するために、設定したのは以下のものです。

課題1：VScode のウィンドウをクリックしたときに、意図しない行へジャンプしてしまう
解決策1：ミニマップを無効化した
VScode の右側にファイル全体が縮小されたものが表示されていて、行数が多い場合は一気にジャンプすることが出来るのですが、他のアプリケーションとの切り替えでミニマップをクリックしてしまうことが多いので無効化しました。

課題2：複数のファイルを並行して編集中、ファイルの行き来に手間取る
解決策2：テーマを Default High Contrast に変更した
色味はひとまず置いておいて、選択している領域が見やすいテーマはないかと試したところ、このテーマだとタブやペインの境界線にラインが引かれるので、ひとまずこれを使うことにしました。

課題3：Live Share で他のメンバーのカーソルに追従していても、どこを見ているか認識しづらい
解決策3：色やカーソルタイプなどの設定をいくつか追加した
Default High Contrast テーマのままでは、枠線は表示されるものの、文字色や選択している行の色が見づらいので、いくつか設定を変更しました。
また、HTMLの開始と終了タグを強調表示してくれる拡張である Highlight Matching Tag もインストールしました。

見やすくなった！！

変更したい場所の設定項目名を調べながら、調整しつつ設定した結果、すいぶん見やすくすることができました。以下が現在のスクリーンショットです。

追加した設定は以下となります。この他にもフォーマッターなどの設定もありますが、今回は割愛しています。

｛
 "editor.fontSize": 24, //エディタ部分の文字サイズ
 "editor.mouseWheelZoom": true, //マウスホイールで拡大

 "editor.minimap.enabled": false, //ミニマップの無効化
 "editor.cursorWidth": 10, //カーソルの幅を広く

 "terminal.integrated.fontSize": 24, //ターミナルの文字サイズ
 "window.zoomLevel": 2, //VScode自体の拡大（アイコンも少し大きく）

 "workbench.colorTheme": "Default High Contrast", //テーマ
 "workbench.colorCustomizations": {
   "editor.background": "#234", //エディタの背景色
   "quickInput.background": "#555", //コマンドパレットの背景色
   "tab.activeBackground": "#a77", //選択しているタブの背景色
   "list.activeSelectionBackground": "#555", //リストの選択行背景色（アクティブ）
   "list.activeSelectionForeground": "#ddd", //リストの選択行文字色（アクティブ）
   "list.inactiveSelectionBackground": "#555", //リストの選択行背景色（非アクティブ
   "list.inactiveSelectionForeground": "#ddd", //リストの選択行文字色（非アクティブ
   "sideBar.background": "#225", //サイドバーの背景色
   "sideBarSectionHeader.background": "#559", //サイドバーの見出しの背景色
   "sideBarSectionHeader.foreground": "#ccc", //サイドバーの見出しの文字色
   "notifications.background": "#666", //通知の背景色
   "editor.lineHighlightBackground": "#555", //エディタの選択行背景色
   "editor.lineHighlightBorder": "#ddd", //エディタの選択行境界線
 },

 "highlight-matching-tag.styles": {
   //Highlight Maching Tag拡張機能設定
   "opening": {
     "name": {
       "highlight": "lightcyan", //ハイライトの色
       "custom": {
         "borderWidth": "1px 1px 3px 1px", //ハイライトの枠線太さ
         "borderStyle": "solid", //ハイライトの枠を実線に
         "borderColor": "white" //ハイライトの枠線色
       }
     }
   }
 }
｝

今後の課題

文字や背景色などはこれからも検討していこうと思っています。
また、自分の「見えづらさ」を言語化することにはだいぶ慣れてきましたが、「どうすれば見やすくなるのか、どんな色が見やすいのか」はまだまだ自分でも分かっていないことが多いので、探求していきたいと思います。