Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。
推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。

Flash版はこちら>Flash見本帳
HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。) 

チャレンジしたこと

Webフォントでの縦書き表現

CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

画面の向きに応じた縦組みと横組みの切り替え

ポートレートモード(縦向き)では縦組み、ランドスケープモード(横向き)では横組みの表示と、MediaQueryを使用し、画面の向きに応じて組み方向を切り替えています。

画像を使わない

背景のチェック状のパターン、ヘッダーのグラデーションには、CSS3グラデーションを使用しています。テキストへ光彩やぼかしといった効果を適用できる『書体見本』画面ではCSS3のテキストシャドウを、お手本に合わせて秀英体の描画が体験できる『秀英体を書く』画面のガイド部分ではSVGを使用しました。
画面上には表示されていませんが、『秀英体を書く』画面での点数判定用に1枚だけjpg画像を使用しています。SVGをCanvasに描画し、画像として取得する方法もあったのですが、CanvasにSVGを一度描画してしまうと、セキュリティの関係上その後Canvasから画像を取得できなくなるため、ここでは画像を使用しています。

画像の差分

『秀英体を書く』画面では、ユーザが描画した描画結果をCanvasから画像として取得し、あらかじめ用意したお手本画像との差分を取得することで採点を行っています。画像の差分にはJavaScriptとCanvasによる画像差分表示を行うオープンソースライブラリJS-ImageDiffを使用しています。JS-ImageDiff内部では、CanvasPixelArrayが使用されており、画像のピクセルのrgbaをそれぞれ数値で取得できるため、重なり部分のピクセル数をカウントし割合を計算しています。

その他ハマったポイント

前述の、縦書きでグリフが寝てしまう問題や、SVGをCanvasに描画する際の問題の他にも、以下のようなハマりポイントがありましたので紹介したいと思います。

font-familyでWebフォントを複数指定してもダウンロードされない

他のWebフォントサービス同様、今回使用したWebフォントサービスでも、表示に必要な字形だけをダウンロードするダイナミックサブセットが導入されていました。サブセットが行われる場合、ページの解析時にスタイルが定義され、font-familyが指定されている必要があります。font-familyでWebフォントを複数指定した場合、1番目のフォントしかダウンロードされていないようでした。たとえば下記の指定の場合、DNPShueiMinPr5-L しかダウンロードされません。この挙動は使用するWebフォントサービスや、閲覧するブラウザに依存する問題だと思われます。

font-family:’DNPShueiMinPr5-L’,’DNPShueiShogoMinStd-H’;

秀英体同士の違いを比較することのできる『秀英体比較』画面では、「東国なの」というテキストに対して、全種類のフォントのサブセットが必要でしたが、font-familyへの複数指定ではダウンロードできなかったため、非表示にしたダミーテキストにfont-family指定することで必要なフォントをダウンロードさせています。
 

グリフが半分に切れて表示される

左図のように、フォントが半分に切れたまま表示されてしまうことがあります。親要素のdivにoverflow:hiddenの指定をしているページでのみ発生するため、この指定が関係ありそうなのですが、こちらの不具合には再現性が無く、原因については不明のままです。

lette-spacingが効かない

デバイスフォントに対してはlette-spacingで正常に字間を設定できるのですが、Webフォントを適用するとlette-spacingが効かずに字間が詰まってしまいました。PC版のChromeでは正常に表示されます。こちらも原因については不明のままです。

まとめ

以上のように、HTML5版秀英体見本帳では、Webフォントサービスの利用やWebフォントを使用した縦書き表現、MediaQueryでの文字の組み方向の切り替え、SVGやCanvas、CSS3で追加されたプロパティの利用など、いくつかの新たな試みを行いました。まだまだ今後の課題がありますが、Webフォントの可能性を少しでも感じていただければと思います。
生まれかわった秀英体をぜひWebフォントでご覧ください。

Related Post

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録

Gruntで快適な環境を整備したい!【タスク記述編】Gruntで快適な環境を整備したい!【タスク記述編】

『Gruntで快適な環境を整備したい!【インストール編】』に引き続き、タスクの自動化ツールであるGruntを使ってみます。今回はタスク記述編ということで、様々なタスクを書いてみます 今回したいこと 今回は以下のタスクを書いてみたいと思います。タスクはGruntfile.jsに書きます。ベースとなるコードは前回の記事『Gruntで快適な環境を整備したい!【インストール編】』の「Gruntfile.jsを作成する」をご覧ください。 タスクの中身は基本的に、処理対象となるファイルやフォルダのパスと処理後のパスで構成されています。ファイルパスの書き方には「コンパクト形式」「ファイルオブジェクト形式」「ファイル配列形式」があります。Gruntのドキュメントを日本語化してくださっているサイトがありますので、こちらを参考にしてください。プラグインによってはサポートしていない形式があるようですので、どのプラグインがどの形式をサポートしているかは各プラグインのドキュメントを参照してください。 ■ファイル、フォルダの複製 ファイル、フォルダの複製にはgrunt-contrib-copyを使います。納品用に必要なファイルをすべてbuildフォルダ下にコピーしてみます。   copy: {    dist:

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。