ウェブ制作日記

2022年5月1日
サイト開設
ウェブ制作日記
以前，WordPressで"My Extra Dimension"なる小さなサイトを作っていましたが，あまり更新せずに閉鎖．MathMLとMathJaxが混在したわけのわからないサイトでした．この度，SSG（Static Site Generator）なるものが充実していることを知り，試しにGatsbyをいじってみて，ちょっと面倒だな……Hugoをいじってみて，めちゃ簡単やな！　となって，Hugo でサイト構築をしようと考えたわけです．ブラウザ上でカチカチとカスタマイズするCMSと違い，使い慣れたエディターでテンポよくサイト制作ができるSSGはかなりいい感じです．何よりHugoは他のSSGと違って生成が爆速なのも強みですね． HTMLの構造でも数学の証明でも，とにかく簡潔さを重視してしこしこと執筆していこうと思います．
$M O R E$
2022年5月2日
ストレスレスなウェブ制作
ウェブ制作日記
Hugoによるサクサク進むウェブ制作が楽しい．例えばCSSをいじるにしろ，WordPressではブラウザ上の小さな画面でCSSファイルをいじったりするわけですが，どうにも窮屈なのとレスポンスが……しかし，HugoなどのSSGであれば，使い慣れたエディターでCSSを編集し，それを保存すると別窓にあるブラウザにライブで瞬時に反映されます．何をするにもパパッと反映され，とてもストレスレスです．アイコンに関しては，Font Awesomeが鉄板のようですが，ローカル生成にこだわりたかったのと，この程度のアイコンならSVGで自作できそうだったので，Illustratorで作っています． KATEXのデザインにあやかり，HOME，MORE などのマクロを組んでみました．あまりデザインセンスを感じませんが…… Tikzとの連携も検討中．Hugoのショートコードを利用し，Markdown上でTikzのコードを打つとこんなのができます（ソースはコピペしました）．今後，図にもこだわったサイトを作ってみたいものです．とりあえず自然数に関するページをGW中にやっつけたい．
$M O R E$
2022年5月4日
定理環境のマークアップ
ウェブ制作日記
HTML
GW折り返し地点である今日は，一日中ずっとこれ考えてた．定理の名前になぜか見出し6 以前から定理環境は以下のようにマークアップしていた．  <div class="lemma"> <p>$n+m=0\then n=m=0$．</p> </div>  <div class="thm"> <h6>オイラーの定理</h6> <p>$e^{\theta i} = \cos\theta + i \sin\theta$．</p> </div> 自分的にどうかと思っているのが，定理の名前を見出し6としてマークアップしていること．これは，section の深度によって，定理の見出しのレベルがコロコロ変わるのはいかんと思って，どうせたどり着くことのない見出し6に統一してしまおうという（安易な）発想．具体的にどういうことかというと，例えば以下は見出し2の直下に定理が来てるので，命題のタイトルは見出し3． <h1>自然数</h1> <h2>ペアノの公理系</h2> <div class="prop"> <h3>帰納法の原理</h3> </div> 次は，見出し3の直下に定理が来てるので，命題のタイトルは見出し4． <h1>数の構成</h1> <h2>自然数</h2> <h3>ペアノの公理系</h3> <div class="prop"> <h4>帰納法の原理</h4> </div> という風に文章の規模で定理の名前に使うマークアップが変わるのがあんまよろしくないなと思ったわけである．しかし，定理の名前を見出し6で統一し，見出しレベルが途中で飛び越える構造の文書はやはりおかしい．そもそも定理の名前は見出しとして扱うべきかという問題があり，名無しの補題などには見出しはつけない．その命題が有名か無名かで，見出しがあったりなかったりするマークアップは，最近よく聞くアウトライン的にどうなのという事態も発生．大昔にQiitaで自分で言及していたように，結局，以下が超無難かなと再び思ってしまった． <div class="thm"> <div class="title">オイラーの定理</div> <p>$e^{\theta i} = \cos\theta + i \sin\theta$．</p> </div> ただ，HTML5（Living Standard?）で section 要素なるものが導入されたこともあり，アウトラインという用語も飛び交っているので，数学文書の理想的なマークアップなるものの草案を一応したためておこうと朝からずっと考えていたのでした．一つの案 <h1>自然数</h1>  <p>自然数についてみんなで考えよう．</p> <section> <h2>ペアノの公理</h2> <p>自然数が満たすべき性質を...</p> <section class="thm"> <hgroup> <h3>定理</h3> <h4>再帰性定理</h4>  </hgroup> <p>集合 $X$，.
$M O R E$
2022年5月6日
xfakebold.styで文字を少し太く
ウェブ制作日記
LaTeX
LuaLaTeX
SVG
pdf2svg で tikzpicture をSVGにする計画．ただ，KATEX でレンダリングされる数式フォントが微妙に太いことに気付き，TeXが吐き出す数式とどうもバランスがとれていない．次の画像と KATEX でレンダリングされた kerf を比較頂きたい．そこで，lualatex や pdflatex で使える xfakebold パッケージを使うと文字を微妙に太くできる． %\RequirePackage{luatex85} % もういらないらしい \documentclass[border=1pt]{standalone} % たまに画像が欠けるので少しborderで余白を設定 \usepackage{luatexja} \usepackage[bold=.4]{xfakebold} % .4がデフォルト .15 くらいが KaTeXに近い気が \begin{document} \setBold コーシーの積分公式：$\displaystylef(z)=\frac{1}{2\pii}\oint_C\frac{f(\zeta)}{\zeta-z}\,d\zeta$ \end{document} こんな感じのファイルを lualatex sample.tex してから pdf2svg sample.pdf sample.svg すると以下のようなSVGができる．ただ，実際にはもっと小さなSVGができる．ベクトル画像だから小さければ拡大すればいいと思うかもしれないが，いちいちwidthやheightを調べるのは面倒である．そこで，自前のスクリプトでsvg属性のwidth属性とheight属性をなんとか倍している．上の図は2.2倍．
$M O R E$
2022年5月14日
KaTeXで行頭に句読点がくる問題
ウェブ制作日記
KaTeX
CSS
HTML
数式止めはよくない？句読点でカンマ，ピリオドを使っていると理系かぶれ，カッコつけと思われるかもしれませんが，私がそうしている最たる理由は，ディスプレイスタイルで数式を表示したとき，文末が「。」だとカッコ悪いからです．つまり，よって以下を得る： eθi=cosθ+isinθ．みたいな書き方をしますが，文末が「。」だと締まりが悪いです： eθi=cosθ+isinθ。どうでしょうか．新しい数学記号かと錯覚してしまうほどですね．さて，私はインラインで以下のような書き方を頻繁にします． ...よって $A=B$．次に... こうすると，$A=B$．のピリオドが行頭にくる可能性があります．よって $A=B$．の部分がHTMLで以下のようにレンダリングされます．よって <span class="katex"> <span class="katex-html"> <span class="base">...</span> </span> </span>．どうやら，.base の display 属性に inline-block が設定されているのが原因のようで，自前のCSSで以下のようにすると解決します． .katex .base{ display: inline!important; } 勝手に display いじって，他の数式のレンダリングが崩れないか心配ですが今のところなさそうなので採用しています．正規のやり方ではないので，あんまりいい感じがしませんが．あとは，$A=B．$のような数式止めと名付けることにした書き方をするのではなく，よって $A=B$ が成り立つ．のように書くというのも解決策ですが，冗長になるし，ある種の重言だと思っているのでやりません．全角 or 半角？明朝 or ゴシック？数式関係でいうと句読点にカンマ，ピリオドを使うのはほぼ確定として，半角にするか全角にするか問題と，日本語の部分を明朝体にするかゴシック体にするか問題があります．究極的に体裁を整えるならカンマ，ピリオドは半角明朝体とすべきでしょう．しかし，ウェブサイトってある程度，閲覧者に委ねるべきみたいな考え方もあるので悩ましいところです．ただ，数式は半角明朝で出力するしかないので，その時点で閲覧者に強制をしている部分があります．それと数学関係のドキュメントを読もうとしている人が，「明朝？　読みにくいんだよ！」みたいなこという人も少数派だと思うし…… とりあえず今のことろ，本サイトでは日本語の部分の句読点は全角フォント指定はこちらからしないという設定にしてます．体裁が整っていません．ウェブサイトで明朝体にしたくない最もな理由は，Windows上で表示される文字が微妙だからです．それに尽きます．この世の全員がMacOSもしくはiOSユーザーだったら問答無用に明朝体指定にするのですが……
$M O R E$

サイト開設

ストレスレスなウェブ制作

定理環境のマークアップ

xfakebold.styで文字を少し太く

KaTeXで行頭に句読点がくる問題