ひtoりgoと

2018 年にもなってホームページの見た目や内部実装をいじくりまわすのが趣味な人間です。

昨日“Mac 開発話が聴ける Podcast エピソードまとめ”を公開（→ 2018.9.8）したけど、それをきっかけとして Web サイト全体のシステムに手を入れたので変更点をメモとして残しておく。

ファイルを加工して表示 - HTML のように管理

Documents に新しいページ（前述のまとめ）を追加するにあたり、この作業を効率化したくなった。Markdown で書きたいし。

“ひ to り go と”ではデータベースと専用の記事編集画面によるいかにも CMS な機能を構築していた（→ 2017.12.3）のだけど、Documents にあるページはそれぞれ独立性が高く数も少ないためそのやり方は大げさだ。なのでこれまではページごとに PHP ファイルを置いて別の PHP ファイルからメニューなどのテンプレートを呼び出しつつ中身をそこに書くという普通のやり方をしていた。このシンプルさを残しつつもっと楽をするには...？

「Markdown ファイルを置くだけで HTML としてアクセスできるようにする」というのが自分の出した答えだ。HTML ファイルみたいに、フォルダを作って中に index.md を入れればその名前が URL に。アクセスすると Markdown がパースされ、共通のヘッダとフッタが付加され、ページタイトルも Markdown 内の h2 から自動的に拾われて指定される、という仕組みを作った。

これで書いてみるとワークフローが改善できたのを実感したので Documents のトップ（ページ一覧）ページも同様の仕組みを導入。独自拡張子の JSON ファイルをもとにメニューが出力されるよ。

SVG を採用

次はイメージについて。1x と 2x だけ考えていればよかった時代は終わった。3x の HiDPI 表示も加わったし、PC の Web ブラウザの表示倍率設定は昔のテキストだけのサイズ変更とは違って崩れにくいから拡大率を変更して読む人が珍しくなくなった。そしてピンチジェスチャで拡大することも多い。もはや Web の表示倍率は想定できないのだ。

どんな倍率でもきれいに表示したければ必然的に SVG¹ということで“ひ to り go と”以外のページにあるフラットなアイコンを SVG にした。さすがにもう SVG が表示できなくて困る人いないよね...？

Sketch による書き出しだからあまりきれいなコードではなさそうだけど手持ちの端末ではどれも表示できているからよしとしよう。

favicon を更新

SVG 化のために Sketch ファイル内を整理したついでに新しい favicon を作った。16 px だけでなく 32 px も含むようにしたから Retina ディスプレイでもきれいに表示されるはず。

日本語と英単語との間のスペース記号の種類を変更

自分は文章を書くときに「日本語と英単語との間にスペースを挿入する」派だ。もともと OS X の日本語環境の UI で昔から採用されていたルールだったし個人的にもしっくりきていた。Sierra でそれが廃止されたときは反対する理由を書いたりもした。

• Mac Apps + Japanese（El Capitan 以前）

その一方で半角スペースだとガタガタ空きすぎな気も確かにしていたのだけど、最近になって一言でスペース記号といってもいろいろな幅のものがあるということを知った。半角スペースより狭いスペースがあるなら使わない手はない。

• Unicode spaces

それによって 10 年以上続いたこのページのタイトルにも変化が！

• 変更前：“ひ to り go と”
• 変更後：“ひ to り go と”

...どうでもいいですよね²。