フォントサイズをJSで計算するようにした。スライダーで変更できる。

ブツ

リポジトリ

インストール＆実行

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

準備

GitHubアカウントを作成する
repoスコープ権限をもったアクセストークンを作成する
インストール＆実行してアプリ終了する
1. db/setting.jsonファイルが自動作成される
db/setting.jsonに以下をセットしファイル保存する
1. username:任意のGitHubユーザ名
2. email:任意のGitHubメールアドレス
3. token:repoスコープ権限を持ったトークン
4. repo.name:任意リポジトリ名
5. 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）
1. SourceのコンボボックスがDeploy from a branchになっていることを確認する
2. Branchをmasterにし、ディレクトリを/(root)にし、Saveボタンを押す
3. F5キーでリロードし、そのページにhttps://ytyaru.github.io/リポジトリ名/のリンクが表示されるまでくりかえす（数分かかる）
4. https://ytyaru.github.io/リポジトリ名/のリンクを参照する（デプロイ完了してないと404エラー）

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

フォントサイズJS計算

スライダーUIで一行あたりの表示字数を20〜50字で設定させる。それを画面サイズで割ってfont-sizeとする。

実際は余白やletter-spacingが関わってくるのでもっと複雑だが、大体そんな感じ。

index.html

<input id="line-of-chars" type="range" min="20" max="50" value="40" step="1"></input>
<span><span id="line-of-chars-count"></span>字／行</span>

style.css

:root {
    --line-of-chars:40;
    --font-size:calc(100vw / (var(--line-of-chars)));
    --font-size-code:calc(100vw / (var(--line-of-chars) * 2));
    --line-height:1.5em; /*1.5〜1.75em*/
    --letter-spacing:0.05em; /*0.05〜0.075em*/

}
body {
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}

ui.css

label, legend, form, fieldset, button, input, textarea, select, option, output {
    font-size: var(--font-size);
    line-height: var(--line-height);
    letter-spacing: var(--letter-spacing);
}
pre > code {
    font-size: var(--font-size-code);
}

renere.js

スライドUI

一行あたりの表示字数を設定する。

function setFontSize() {
    const MIN = 16
    const MAIN = document.querySelector('main:not([hidden])')
    const LINE_OF_PX = parseFloat(getComputedStyle(MAIN).getPropertyValue('inline-size'))
    const lineOfChars = document.getElementById('line-of-chars').value
    const fontSize = LINE_OF_PX / (lineOfChars * 1.05) - 0.1 // letter-spacing:0.05em
    document.querySelector(':root').style.setProperty('--font-size', `${fontSize}px`);
    document.getElementById('line-of-chars-count').innerText = lineOfChars
    document.querySelector(':root').style.setProperty('--font-size-code', `${Math.max((fontSize / 2), MIN)}px`);
}
document.querySelector('#line-of-chars').addEventListener('input', async()=>{ setFontSize() })

スライダーUIを操作したときのイベント処理として、フォントサイズの計算とセットを実装した。

計算はかなり雑。

字間であるletter-spacingが0.05em固定であることを前提にしている
余白部分は勝手に表示されていてサイズ不明のため適当に0.1em固定値にしている
16px以上であることを保証する（小さくなりすぎない）

窓リサイズ

画面サイズに応じてスライダーの最大値を20〜50の間で決定する。

function resize() {
    setFontSize()
    const MIN = 16
    const MAIN = document.querySelector('main:not([hidden])')
    const LINE_OF_PX = parseFloat(getComputedStyle(MAIN).getPropertyValue('inline-size'))
    const max = Math.max(Math.min(Math.floor(LINE_OF_PX / MIN), 50), 20) // 20〜50字
    console.log('max:', max)
    const preValue = document.getElementById('line-of-chars').value
    console.log('preValue:', preValue)
    document.getElementById('line-of-chars').max = max
    const lineOfChars = document.getElementById('line-of-chars').value
    console.log('lineOfChars:', lineOfChars)
    if (max < preValue) {
        document.getElementById('line-of-chars').value = max
        document.getElementById('line-of-chars-count').innerText = max
        document.getElementById('line-of-chars').dispatchEvent(new Event('input', { bubbles: true, cancelable: true,}))
    }
    document.getElementById('line-of-chars-max').innerText = max
}
let timeoutId = 0
window.addEventListener("resize", function (e) { // 画面リサイズ時に字／行の最大値を計算・設定する
    clearTimeout(timeoutId);
    timeoutId = setTimeout(()=>{ resize() }, 500); // 500ms
})

もしスライダーの値が最大値より大きくなってしまったら、スライダーの値を最大値にセットする。

リサイズイベントが大量に発行され、動作が重くなってしまった。そこでリサイズ処理が完了したとき最後に一回だけ実行するよう実装した。