戻る

ここ数日の苦労とか

GlyphPickerをつくった動機

もともとスマホでIPAmj明朝を表示するためWOFF2でブラウザに突っ込んでみたが、20MB以上もあるので重過ぎる。端末にインストールできないフォントで表示したいのはせいぜい数文字で、そのために6万文字分のグリフをダウンロードさせるのも違うだろうと必要なグリフだけ抜き出そうとした。 GlyphPickerは当初Rustでつくろうとしたがフォントファイルのハンドリングが難しく、Font Toolsなどのライブラリが整っているPythonに切り替えた。半日近くで骨格が動いたので氏名の異体字以外でも書体の切替に使ってみようとか、青空文庫のコンバーターだとか、あれこれ遊んで、世間的なニーズとしては氏名異体字よりは、あれこれフォントを切り替えて遊べるとか、端末非依存の多言語対応みたいなのの方がありそうな気がした。そうすると毎度コマンドラインで呼び出すよりもWebで使えた方がいいし、GitHub Pagesで公開するのであればWebアプリケーションよりはSSGの方が良さそうだ。

SSG周りの調査

Pythonと組み合わせるということで、SSGとしては当初Pelicanを触ってみたが、どうにも複雑で、どう改造したものかピンとこない。さらにGitHubはもともとJakyllで動いているということで、Pelicanで生成したサイトをGitHub Pagesに載せるのも屋上屋だし、それぞれSSGとして目的がありそうだし、そういったことにちゃんとキャッチアップするよりは、自分でイチからつくりながら、あれこれ必要な機能を足していった方が、勉強になるのではないかと考え直した。 そもそもGlyphPickerのコンセプトであるDataURIにWebFontを押し込んでWebページにフォントを埋め込んでしまおうという発想は、文字数の少ない英語圏では必要ないというか非効率この上ないやり方のようにも見える。氏名表示とか明らかに必要な場所ではなく、本文中の全ての文字をスキャンして、そのページ専用のCSS WebFontをつくるのも、Web本来の設計思想からは逸脱している気もする。

骨格はサッとできたけどデバッグ沼に

とりあえずGitHub PagesにdeployするSSGとする。Pythonで書く、複数フォント対応、本文中に複数のフォントにまたがったコードポイントがきても混在できるようにする。Markdownをpostsディレクトリに置いておいたら対応するHTMLとCSSを生成する。Markdown単位で必要な文字だけ収録したCSSをページ単位で生成する。といった基本方針ができて、最初は動的にフォントをフォールバックさせることも考えたが、デバッグが大変になるしロジックも複雑になるので、fontindexのメカニズムをそのまま使うことに。fontindex、fontcssの開発は1〜2時間でできて、それをSSGとして束ねるmkpagesスクリプトも骨格は2時間くらいで動いた。せっかく多言語SSGを売りとするのであれば、普通まず端末にフォントが入っていない文字を出したいと考えて、ヒエログラフやら楔形文字も探したんだけど、さすがに実用性がなさ過ぎるし、そんなんブログで書かんだろうと、あれこれGoogle Fontsで物色の末、NotoSerif Tangutなる西夏文字フォントを見つけて、西夏王朝の古典をWebで書くこともないだろうけれども、まあ技術でもとしては面白いんじゃないかと採用した。手元の開発環境では動いていたのだが、iPhoneでみると何故か表示されず、開発環境ではフォントをローカルに入れていたので動いていることに気付いた。今朝になってデバッグしてCSSの書き方から何から直したので、午前中には動くようになったんだけど、今度は異体字セレクター対応がやはり不十分であることが気付き、まだデバッグの途上にある。ひとつはfontindexが単一コードポイント複数グリフに対応していない問題は直せたものの、他にも問題が残っているのかと思いきや、SafariとiOSでも動くことを確認できた。キャッシュが残っていたのかな。