一行あたりの表示字数計算を修正した。
ブツ
インストール&実行
NAME='Electron.MyLog.20220915121744'
git clone https://github.com/ytyaru/$NAME
cd $NAME
npm install
npm start
準備
- GitHubアカウントを作成する
repo
スコープ権限をもったアクセストークンを作成する- インストール&実行してアプリ終了する
db/setting.json
ファイルが自動作成される
db/setting.json
に以下をセットしファイル保存するusername
:任意のGitHubユーザ名email
:任意のGitHubメールアドレスtoken
:repo
スコープ権限を持ったトークンrepo.name
:任意リポジトリ名address
:任意モナコイン用アドレス
dst/mytestrepo/.git
が存在しないことを確認する(あればdst
ごと削除する)- GitHub上に同名リモートリポジトリが存在しないことを確認する(あれば削除する)
実行
npm start
で起動またはアプリでCtrl+Shift+Rキーを押す(リロードする)git init
コマンドが実行されるrepo/リポジトリ名
ディレクトリが作成され、その配下に.git
ディレクトリが作成される
- [createRepo][]実行後、リモートリポジトリが作成される
GitHub Pages デプロイ
アップロードされたファイルからサイトを作成する。
- アップロードしたユーザのリポジトリページにアクセスする(
https://github.com/ユーザ名/リポジトリ名
) - 設定ページにアクセスする(
https://github.com/ユーザ名/リポジトリ名/settings
) Pages
ページにアクセスする(https://github.com/ユーザ名/リポジトリ名/settings/pages
)Source
のコンボボックスがDeploy from a branch
になっていることを確認するBranch
をmaster
にし、ディレクトリを/(root)
にし、Saveボタンを押す- F5キーでリロードし、そのページに
https://ytyaru.github.io/リポジトリ名/
のリンクが表示されるまでくりかえす(数分かかる) 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以上を試せていないのが怖い。
たぶん算数や数学ができる人はもっと適切で綺麗でかっこいい方程式を導きだせるのだろう。私には難しすぎた。