Bloggerで行書体フォントを使う方法

業務外

先日、井戸掘りブログの投稿を、縦書きにする方法を調べました。

	2016年5月12日木曜日
	Bloggerで縦書きする方

表示速度は納得できませんが、かっちょ良くできました。
ですが、フォントの工夫が必要です。
縦書きのフォントは日本語ぽい書体を使いたいのですが、閲覧するPCの環境に依存しています。それにスマホだと標準フォントになってしまいます。これを「Webフォント」と言う技術でクリアできるらしいので試してみました。

---

いつものようにGoogle先生に聞いてみましょう。
すると、無料でフォントを提供するサービス、Google Fontsを見つけました。

アクセスしてみると、100個以上のフォントがあります。途中まで数えたけど、数が多くてヤンピ。（笑）
しかし、欧米系のフォントのみで日本語のフォントがありません。ダメだ。

---

更にネット検索するとGoogle Noto Fontsとやらを見つけました。Noto Fontsとは、GoogleがAdobeと協力して作るフォントセットです。「世界中の言語を1つのフォントセットで表現する」という試みだそうです。これには日本語フォントが提供されています。日本語のフォントセットは「Noto Sans CJK JP」という名前です。

ダウンロード用のサンプルを見ると、残念ながら角ゴシック体です。行書体はありません。これもダメだ。

---

Webフォントを調べると、次の設定が必要だとわかりました。

• サーバーへのフォントファイルの配置と再配布
• 表示速度を改善するため、必要最小限の文字に限定する（サブセット化）
• スマホ用にファイル形式を変換する

これらを許可してくれて、しかも個人で無料で使える、行書体フォントを探す必要があります。
また、webフォントに使用されるファイル形式は、以下の5形式だそうです。

• ttf (TrueType)
• otf (Open Type Font)
• woff (Web Open Font Format)
• eot (Embedded Open Type)
• svg (Scalable Vector Graphics Font)

使えるブラウザとの組み合わせは以下のとおり。全ブラウザでサポートしている、woff形式を用意すれば良いみたいです。

ブラウザ	ttf	otf	woff	eot	svg
IE			○	○
Chrome	○	○	○		○
Safari	○	○	○		○
Opera	○	○	○		○
Firefox	○	○	○

ネット検索して行書体のフォントを見つけました。こちらです。早速、ダウンロードしました。ttf形式で580kbyteあります。

◆株式会社　白舟書体
　白舟書体教育漢字版


フォントのサブセット化とファイル形式を変換するツールもありました。こちらも無料です。素晴らしい。

◆株式会社　武蔵システム
　フォントツール

「男の修行」に使う文字のみ抽出して、サブセット化しました。対象は40文字です。
→あいうえがきくこしじだつてでとなのもゆらるれろを云泣苦五行山修十男度不腹本満立六

サブセット化したフォントファイルを更に形式変換しました。最終的にフォントファイルは、woff形式で12kbyteになりました。元ファイルの僅か2%です。
このファイルを前回のJSと同様にGoogleサイトに配置しました。これで準備完了です。

テストページにCSSを組み込み、タグにフォントを指定しました。
どりゃ、実行じゃ！！

ダメです。標準フォントのままです。行書体で表示されません。ぐぬぬ。

3日ほど、ここで足踏み。何が悪いのかが判りません。
PCのローカル環境なら、行書体で表示されますが、サーバーに配置するとフォントが有効になりません。

---

ネット検索しまくって調べたら、原因が判りました。
WebフォントはCSS3で追加された、@font-faceというインタフェースを使うのですが、クロスドメイン制約があるらしい。これの対応には、Access-Control-Allow-Originをレスポンスヘッダに付与して回避しろと書いてある。なんのこっちゃ。
つまり、Blogegrドメイン（https://www.blogger.com）のWebサーバーに対して、Googleサイト（https://sites.google.com）に置いたフォントファイルは直接参照できないってことです。
Bloggerは画像以外のファイルがホスティングできないので、これではお手上げです。

---

何とか対策はないものか。
更にネット検索したら、Tumblr（タンブラー）というSNSサービスの利用者が、フォントを変更した記事を見つけました。Bloggerではないですが、やはりフォントファイルがホスティングできないため、BASE64エンコードにしてCSSに組み込むというアイデアです。試してみましょう。

BASE64はバイナリデータをキャラクターセットに変換する方法です。フォントファイル自体がバイナリなのでこれを文字データにしてCSSに組み込めば良いらしい。

ファイルをBASE64エンコードするツールも紹介されていました。
ベース64エンコードツール

変換結果をCSSに組み込みました。勝負勝負！！

ドーン。見事、行書体で表示されました。スマホでも表示されました。

男の修行 　　山本五十六 　　苦しいこともあるだろう 　　云い度いこともあるだろう 　　不満なこともあるだろう 　　腹の立つこともあるだろう 　　泣き度いこともあるだろう 　　　これらをじつと 　　　　こらえてゆくのが 　　男の修行である

HGS行書体より、白舟書体のほうがかっちょ良い。
でも、ちょっと、裾が長いのが気になるな…。それにスマホだと、伸び縮みするような？
それに重大問題発覚。「云」が表示されていない。漢字字典を調べたら、教育漢字1006文字から漏れているわ。フォントがないと文字は表示されません。ぐぬぬ！！

中々、すんなりとは行きません。もう少しなんだけとな…。

感想と構想

今回は次の記事を参考にさせていただきました。

日本語フリーフォントをwebフォント化する4ステップ
http://www.hirok-k.com/blog/751.html

TumblrでWebフォントを使用するときにハマった
https://www.littlepad.net/blog/2015/03/11/205716 （プライバシーエラー）