やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

縦書きしてみる(HTML+CSS+JS)

 とりあえず版。ビジュアルはとてもキレイ。

成果物

情報源

 こちらの情報を元に改造しまくった。

設定

 設定メニューは画面上部をマウスオーバーすれば出てくる。

 以下の項目を設定できる。

  • 縦書き/横書き
  • 白/黒/色
  • 小/中/大
  • 明朝/ゴシック

縦書き/横書き

tate.png yoko.png

白/黒/色

black.png color.png

小/中/大

fontsize_min.png

明朝/ゴシック

gothic.png

所感

 とりあえず表示だけ確認してみた版。

本文をみせる

 本文だけに集中できるようにした。

 カクヨムなどの小説投稿サイトは、本文以外のムダなものが多すぎる。メニューとかコメントとか広告とか邪魔なんだよ。圧迫されて本文をみる領域がどんどん狭くなってしまう。探せばそういうのを取っ払う拡張機能とかあるかもしれないけど、最初から不要な要素がないほうがいい。ムダな通信もしないのでパケット通信料的にも嬉しいはず。

 色にこだわった。とくに背景色に応じて文字色を白・黒いずれか見やすいほうに変えるところ。背景色と似たような色だと見づらいもんね。そんなの自動計算してうまいことやって欲しいもの。ずっと気になっていた。それをついに実装できた。余は満足じゃ。

 色空間はLCHという最新のものを使った。明度・彩度はそのままにして色相だけ変えることができる。似たような色空間にHSL、HSVがある。だがLCHはそれらよりも人間の感覚に近い。

課題

 課題はあまりにも多い。

  • Vue.jsで大枠を作る
  • 本文をテキストからHTMLへ動的変換する
  • エディタを作ってgitにpushする

 gitコマンドはElectronを使わないと実現できないだろう。

 UIについてもある。

  • キーボードだけで全操作できるようにする
  • 終了時にスクロールした位置を復元させる

 縦書きに関しても色々とあるみたいだ。要調査。

対象環境

$ uname -a
Linux raspberrypi 5.4.83-v7l+ #1379 SMP Mon Dec 14 13:11:54 GMT 2020 armv7l GNU/Linux