CSSとJavaScriptで文章をメモ書き風に

フォントのサブセット化

ここでいうサブセット化とはつまりフォントから必要な部分のみ抜き出して再構築すること。Webフォントとして使えるからといって、サブセット化までは許されていないことがあったりするので、それには気をつける必要がある。例として新BSDライセンスで提供されている、きろ字 プロポーショナルを取り上げる。

サブセット化に留まらないWebフォントのジェネレーターとしてFont Squirrelの@font-face Generatorが利用できるが、アップロードするフォントのサイズ制限が厳しいため和文フォントにはほぼ使うことができない。なのでFontForgeを使う。Windowsの場合はunofficial fontforge-cygwinを利用するのが速いだろう。

作業はそれほど難しくはない。

1. きろ字 プロポーショナルを開く
2. 英数字部分と仮名部分だけをShiftを押しながらドラッグで選択する
3. 編集→選択→選択範囲の反転
4. エンコーディング→グリフの切り離し・削除(仮名部分以降が削除される)
5. フォントを出力でTrueTypeとして名前を付けて保存(エラーは無視)

FontForgeのGUIは慣れないと気持ち悪いので、操作しててちょっと不安になる……。これで5MBオーバーの元のフォントからサブセット化された70KB程のTrueTypeフォントが出来上がる。Windowsのエクスプローラーのサムネイルで見ると以下のように漢字が欠けていることがわかるだろう。

このままWebフォントとして使っても良いがWOFFに変換する。

WOFFへの変換とスタイルシートの編集

WebフォントにはTrueTypeフォントを始めSVGフォントやら色々なフォーマットが乱立しており、様々な環境をサポートするにはそれぞれのフォントを作成した上で気持ち悪いCSSを書かなくてはならない。そういうのは嫌なので、あえて無視して業界標準になるであろうWOFF (Web Open FOnt Format)に絞って扱うことにする。

WOFFへの変換には先ほどURLを挙げたFont Squirrel (フォント・スクワール)のジェネレーターを使う。サブセット化したので今度はサイズ制限には引っかからない。色々細かく設定できるが、サブセット化してあることだしCSSはあとで書き直すので、Basicでサクっと変換すれば良い。暫く待つとダウンロードされるのでそれを展開し、中にある*.woffと*.cssをコピーする。WOFFファイルは40KB程になった。

CSSファイルは全てのフォーマットに対応したものになっているが、WOFFのみ使うつもりなので以下のように書き換える。

@font-face {
  font-family: "Kiloji P";
  src: url("kiloji-p-kana.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

併せてコメントとしてCSSファイルにライセンス条項を書いておくと良いだろう。あとはWOFFファイルとCSSファイルをFTPなりでサーバー上にアップロードすればWebフォントの使用準備は整う。

HTMLファイルやCSSファイルからのWebフォントの参照

書くまでもなさそうだが一応書いておく。HTMLファイルからはlink要素を、

<link rel="stylesheet" href="kiloji-p-kana.css">

CSSファイルからは@importを利用して参照する。

@import url("kiloji-p-kana.css");

あとはCSSでfont-family: "Kiloji P"とすれば、英数字と仮名だけがきろ字 プロポーショナルで表示されるようになる。

文章のひらがな化

このフォントを使うために文章をひらがな(やカタカナ)で書くというのは馬鹿げているので、Yahoo! Japanのルビ振りAPIを利用する。都合の良いことにYQLのCommunity Tableとして提供されているので、JavaScriptからあまり苦労せずに利用することが出来る。ただし無制限に使えるわけではなく、アプリケーションIDが必要になるので登録して取得しておく必要はある。

jQueryで書くと以下のようになる。

var appid = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
var text = "振り仮名を振りたい文章です。";
var result = "";

$.getJSON("http://query.yahooapis.com/v1/public/yql?callback=?", {
  q:      "SELECT * FROM yahoojp.jlp.furigana.furigana WHERE appid='" + appid + "' and sentence='" + text + "'",
  format: "json",
  env:    "store://datatables.org/alltableswithkeys"
}, function (d) {
  $.each(d.query.results.Result.WordList.Word, function () {
    if (this.Furigana) {
      result += this.Furigana;
    } else {
      result += this.Surface;
    }
  });
});

// result: ふりがなをふりたいぶんしょうです。

結果として返されるWordList.Wordでは振り仮名を振れる単語(というか区切り)にはFuriganaプロパティが出現する。なのでFuriganaがあればそれを使い、なければ元の単語が入っているSurfaceプロパティを使って文章を再構成していけば良い。