横幅1280px以上のとき左右２画面に分割する。左右それぞれに縦スクロールバーをもつ。

ブツ

リポジトリ

インストール＆実行

NAME='Electron.MyLog.20220914093656'
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エラー）

やったこと

２画面にする（表示領域の幅が1280px以上）
一行あたりの表示字数を自動変更する（表示領域サイズに応じて）

２画面にする（表示領域の幅が1280px以上）

表示領域の幅が1280px以上のとき左右２分割する。左右それぞれに縦スクロールバーをもつ。

（本当はアス比16:9以上のときのような条件をつけるべきだがそれは未実装）

左に入力フォーム、右につぶやき一覧を表示する。

<body>
  <div id="input-form" class="half-screen">
    <!-- 左画面。ここに入力フォーム一式をぶちこむ -->
  </div>
  <div id="post-list" class="half-screen">
    <!-- 右画面。ここにつぶやき一覧をぶちこむ -->
  </div>
</body>

CSSにはたくさんの工夫が必要だった。しかもJSで書き換える必要もある。なのでCSS変数を多用している。いずれパフォーマンス問題が生じそうで怖い。

body {
    height: var(--body-height); /* 表示領域の高さ(document.documentElement.clientHeight) */
    display:var(--body-display); /* 1画面:block, 2画面:flex */
    overflow-x: none;
    overflow-y: none;
    padding: 0;
    margin: 0;
}

左と右にはそれぞれ幅を表示領域の半分にしたCSSを付与する。このCSSをつけたり消したりすることで、１画面と２画面を切り替える。

.half-screen {
    width: var(--half-width); /* (表示領域の幅÷２)−スクロールバー幅  (document.body.clientWidth) */
    overflow-y: auto;
    overflow-x: none;
}

renderer.jsで以下のように実装した。

function splitScreen() {
    const h = document.documentElement.clientHeight
    const w = document.body.clientWidth 
    console.log('w:h', w, h)
    document.querySelector(':root').style.setProperty('--body-height', `${h}px`)
    document.querySelector(':root').style.setProperty('--half-width', `${parseInt(w/2)}px`);
    if (w < 1280) { // 1画面
        document.querySelector(':root').style.setProperty('--body-display', `block`)
        document.getElementById('input-form').classList.remove('half-screen')
        document.getElementById('post-list').classList.remove('half-screen')
        return 1
    }
    else { // 2画面
        document.querySelector(':root').style.setProperty('--body-display', `flex`)
        document.getElementById('input-form').classList.add('half-screen')
        document.getElementById('post-list').classList.add('half-screen')
        return 2
    }
}

一行あたりの表示字数を自動変更する（表示領域サイズに応じて）

function setLineOfChars() { // 一行あたりの字数（20,25,30,35,38）
    const w = document.body.clientWidth
    const screenCount = splitScreen() // 1,2
    console.log('screenCount:', screenCount)
    const lineOfChars = Math.min(38, ((20+(5*(screenCount-1))) + (5*Math.floor((w-480)/(240*screenCount)))))
    console.log('lineOfChars:', lineOfChars)
    document.querySelector(':root').style.setProperty('--line-of-cahrs', `${lineOfChars}`);
}

20,25,30,35,38の5パターンある。320px未満になると20より少なくなるが、フォントサイズは16pxを維持する。

気になること

横スクロールが出てしまう

横スクロールが出てしまう

左画面のほうに横スクロールが出てしまう。表示しないようCSSを以下のようにセットしているのに。

style.css

body {
    overflow-x: none;
    overflow-y: none;
}
#input-form, #post-list {
    overflow-x: none;
    overflow-y: none;
}

よくみるとテキストエリア<textarea>が若干右側にはみ出てつぶされている。

でもCSS側では100%なので超過しないと思うのだが。

ui.css

textarea {
    width: 100%;
}

これを99%のように少し下げるとスクロールが消える。でも、一行あたりの表示字数（字／行）が1字減ってしまう。

字／行を減らさずにスクロールを消したい。フォントサイズ計算に余白か何かのサイズ分だけ減らせばいいのだろう。けど、一体なんのサイズなのかわからない。

誤差が出る

画面サイズを変更していると誤差が出る。スクロールバーが端でなく少し内側に出たり、スクロールバーが出なかったりする。

おそらくイベントの発火タイミングと表示領域サイズを取得するタイミングとの間で誤差ができるのだと思われる。

できればキッチリしたいのだが、どうすればいいか不明。

Electronでつぶやき保存する13

ブツ