一行あたりの表示字数計算を修正した。

ブツ

インストール&実行

NAME='Electron.MyLog.20220915121744'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start

準備

  1. GitHubアカウントを作成する
  2. repoスコープ権限をもったアクセストークンを作成する
  3. インストール&実行してアプリ終了する
    1. db/setting.jsonファイルが自動作成される
  4. db/setting.jsonに以下をセットしファイル保存する
    1. username:任意のGitHubユーザ名
    2. email:任意のGitHubメールアドレス
    3. token:repoスコープ権限を持ったトークン
    4. repo.name:任意リポジトリ名
    5. address:任意モナコイン用アドレス
  5. dst/mytestrepo/.gitが存在しないことを確認する(あればdstごと削除する)
  6. GitHub上に同名リモートリポジトリが存在しないことを確認する(あれば削除する)

実行

  1. npm startで起動またはアプリでCtrl+Shift+Rキーを押す(リロードする)
  2. git initコマンドが実行される
    • repo/リポジトリ名ディレクトリが作成され、その配下に.gitディレクトリが作成される
  3. [createRepo][]実行後、リモートリポジトリが作成される

GitHub Pages デプロイ

アップロードされたファイルからサイトを作成する。

  1. アップロードしたユーザのリポジトリページにアクセスする(https://github.com/ユーザ名/リポジトリ名
  2. 設定ページにアクセスする(https://github.com/ユーザ名/リポジトリ名/settings
  3. Pagesページにアクセスする(https://github.com/ユーザ名/リポジトリ名/settings/pages
    1. SourceのコンボボックスがDeploy from a branchになっていることを確認する
    2. Branchmasterにし、ディレクトリを/(root)にし、Saveボタンを押す
    3. F5キーでリロードし、そのページにhttps://ytyaru.github.io/リポジトリ名/のリンクが表示されるまでくりかえす(数分かかる
    4. https://ytyaru.github.io/リポジトリ名/のリンクを参照する(デプロイ完了してないと404エラー)

すべて完了したリポジトリとそのサイトの例が以下。

やったこと

  • 一行あたりの表示字数計算を改善した

窓幅に応じて自動で見やすいサイズや字数に調整して表示するようにした。その範囲にいくらか幅をもたせてスライダーUIで調整できるようにした。

一行あたりの表示字数計算を最適化した

要点は以下のとおり。

  • 16〜21〜32px/字
  • 20〜40字/行(窓幅320px未満だと20未満になる)
  • 1024px以上で2面化する

数値の根拠は以下のとおり。

サイズ 意味
16px/字 最小値。これより小さい値にできない環境がある
21px/字 奨値。とりあえずこれくらいなら見やすいかも?
32px/字 最大値。これより大きいと行や面あたりの字数が少なすぎる
字/行 意味
1 窓幅320px未満時の最小値。窓幅に依存する。16px/字。スライダーの最小値、最大値、現在値が同じ値になる。
20 窓幅320px以上時の最小値。最小スマホ幅320pxに合わせた数。320px/16px=20字
35 推奨値。横書きのとき35〜38字くらいが読みやすい。
40 最大値。キリのいい数。

2面化するのは窓(正確には表示領域)幅1024px以上のときにする。その根拠は以下。

  • 1280px/2/16px=40字(2面にすることでフォントサイズ、字/行が最小・最多化する)
  • 1280px/1/16px=80字(字/行が多すぎる)
  • 1280px/1/32px=40字(これ以上窓幅が増えると40字以内にするためフォントサイズが大きくなりすぎる)
  • よって窓幅1280px以上で2面化する
  • と思ったが1024px以上に変更した
    • 1280px時フォントサイズが32pxに近くなり大きすぎたため
// px/1字, 字間, 画面分割数
// F=fontSizePx, L=letterSpacingEm S=screenCount
function calcLineOfChars(F, L, S) { return parseInt(document.body.clientWidth / ((F*(1+L))*S)) }

function setLineOfChars() { // 一行あたりの字数(20,25,30,35,38)
    const w = document.body.clientWidth
    const screenCount = splitScreen() // 1,2
    console.log('screenCount:', screenCount)
    
    const letterSpacing = parseFloat(getComputedStyle(document.querySelector(':root')).getPropertyValue('--letter-spacing'))
    const max = Math.min(40, calcLineOfChars(16, letterSpacing, screenCount))
    let rec = Math.min(38, calcLineOfChars(21, letterSpacing, screenCount))
    rec = (20 < max) ? rec : max
    rec = (20 <= max && rec < 20) ? 20 : rec
    let min = Math.max(max-10, calcLineOfChars(32, letterSpacing, screenCount))
    min = (20 < max) ? min : max
    min = (min < 20 && 20 <= max && 20 <= rec) ? 20 : min

    document.getElementById('line-of-chars').min = min
    document.getElementById('line-of-chars').max = max
    document.getElementById('line-of-chars').value = rec
    document.getElementById('line-of-chars-min').innerText = min
    document.getElementById('line-of-chars-now').innerText = rec
    document.getElementById('line-of-chars-max').innerText = max
    document.querySelector(':root').style.setProperty('--line-of-cahrs', `${rec}`);
    console.log('min,rec,max',min, rec, max)
    console.log(`%c${rec}字/行 ${w}px`, `color:green; font-size:16px;`)
}

一行あたりの表示字数を算出する。

変数名 意味 概算 320px以上時
max 最大値 幅÷16px 40以下保証
rec 推奨値 幅÷21px 20以上保証
min 最小値 幅÷32px 20以上保証

ただし窓幅が320px未満になると20字/行を保てなくなる。そのとき最大値、最小値、推奨値(現在値)はすべて20未満(窓幅÷16px字/行)となる。

気になる所

2面化する閾値が適当。

2面化する閾値1280pxのときは直前の1280pxあたりでフォントサイズが大きすぎる。ほぼ32pxになる。一行あたりの字数上限40にしても、ほとんど小さくできず30pxくらい。

そこで閾値を1024pxにした。すると2面化する最小幅1025pxあたりの字数が23字/行と少ない。一応スライダーで30字まで増やせるのでよしとする。

あと1920px以上を試せていないのが怖い。

たぶん算数や数学ができる人はもっと適切で綺麗でかっこいい方程式を導きだせるのだろう。私には難しすぎた。