大辞泉のためのレンダリングエンジン、Sayori
- 2013年 5月24日
先日、『大辞泉』のデザインは紙に近くなったって話をした。明朝、ゴシックなど様々なフォントを混在させて誌面を作っている。
これって、紙やWebのデザインやっている人にはごく当たり前のことだけど、プログラムを組む人にとっては悪夢のような仕様だ。iOSでは文字を描画する基本的な部品として、UILabelというクラスが用意されている。これ、基本は同一フォントしか描画しない。いちおう、iOS 6からフォント混在したリッチテキストも描画できるようになった。でもNSAttributedString使わないといけないんだよなぁ。あれ、めんどくさいんだよなぁ。そもそも、今回の仕様は、約物字詰めあるし、ルビあるし、なにより縦書きあるし。UILabelとNSAttributedStringじゃ力不足だ。
じゃ、HTMLか？たしかに、HTMLとCSSなら、きちんと記述する事はできる。ルビはrubyタグで。縦書きはCSSのwriting modeで。でもその表示を行うWeb Kitが、どうにもイマイチ。いやもちろん、Web KitはWebブラウザとして使うなら、なんの問題はないよ。でも今回は、リッチテキストを表示するためのラベル的な使い方をしたいんだ。それだと、重いし、内部に簡単にアクセスできないし。ひとことで言えば、too muchだ。自転車でちょっとコンビニ行きたいだけなのに、新幹線を持ってくるようなもんだ。
ならば作るしかない！無いものは作る、がエンジニアの思想だ。というわけで、自前のHTMLレンダリングエンジンを開発した。それが、Sayoriレンダリングエンジンだ。ちなみに名前は、うちの会社は伝統的にプロジェクト名に魚の名前を採用するため、こうなった。
Sayoriレンダリングエンジンでは、SYLabelというクラスを提供している。UILabelのように、画面に文字を描画するものだ。通常のテキストではなくて、HTMLとCSSを指定できる。こんな感じで使う。
SYLabel* label;
label = [[SYLabel alloc] init];
label.html = @"<html><body><h1>りんご</h1><p>バラ科の落葉高木。また、その果実。</p></body></html>";
label.css = @"h1 { font-size: 2em; font-weight: bold; } p { line-height: 1.5em; }";
[label sizeToFit];
[self.view addSubview:label];
どうよ？！便利でしょう。
UIWebViewと比較すると、軽量である事、同期的に動作する事が、差異になる。UIWebViewの非同期動作は、ブラウザとして使う分にはいいんだけど、ユーザインタフェース部品として使うときはやっかいだからね。
また、内部の構造にObjective-C APIでアクセスできるのも便利だ。UIWebViewだとJava Scriptしか手段がないから、もう面倒でしょうがない。
その他にも、ルビ、縦書き、縦中横、約物字詰め、均等割付け、リンク、テーブル表示、グリフID指定なんかにも対応。けっこう独自の拡張している。
とにかく軽量だし使いやすいんで、『大辞泉』のあらゆるところで使っているよ。
このエンジン、公開するのはやぶさかではないんだけど、サポートの手間が大変な事になりそうなので、躊躇中。
