文字情報基盤Webテクニカルレポート

Size: px

Start display at page:

Download "文字情報基盤Webテクニカルレポート"

いぶきたかぎ
7 years ago
Views:

1 文字情報基盤 Web 実証実験テクニカルレポート実施企業 : 株式会社日立製作所 2013 年 7 月 31 日独立行政法人情報処理推進機構 (IPA)

2 Contents 目次 1 実証実験サイトの前提環境 OS/ ブラウザリソースサーバ構成クライアント Web フォントの実装方式使用する Web フォントのファイル形式 Web フォントの生成方式 Web フォントファイルの動的生成 Web フォントファイルの静的生成静的生成した Web フォントファイルでの Web フォント表示可否 Web フォント表示の実装方式縦組み表示 Web フォントの表示 OS/ ブラウザ表示可能文字範囲ネゴシエーション方式符号化対象外文字の表示実装方式コピー & ペースト機能文字のコピー & ペーストインライン画像のコピー & ペーストメタデータ (MJ 文字図形名 ) の埋め込み方式 (HTML タグの実装方式 ) 印刷機能実装方式各ブラウザでの Web フォント印刷対応状況 Firefox, Chrome の印刷の不具合 PDF 出力の確認ブラウザ依存事象一覧 IE8:CJK 拡張 B が表示されない Win/Opera:CJK 拡張 B が表示されない Mac/Opera:CJK 拡張 A が表示されない... 30

3 Contents 目次 7.4 IE9 以前 :CSS ファイルの読み込み制限が最大 31 ファイル Opera: インライン画像がコピー & ペーストされない Opera: 画面表示と印刷結果が異なる文字が存在 Safari: 印刷プレビュー画面で印刷後画面のボタンが反応しなくなるスマートフォン (Android, ios) 確認結果確認結果... 32

4 1 実証実験サイトの前提環境実証実験サイトの前提環境は以下の通り 1.1 OS/ ブラウザ Web フォント表示の実験評価の対象とした OS とブラウザは以下の通り OS Windows XP, Vista, 7 Mac OS X , 10.7 Linux (Fedora 16, Debian 6.0.4) ブラウザ Internet Explorer Firefox Google Chrome Safari Opera 検証で確認した OS とブラウザの組み合わせを表 1 に示す 1.2 リソース対象としたリソースは以下の通り文字情報基盤文字情報一覧表 Ver IPAmj 明朝フォント Ver (OpenType フォント ) 1.3 サーバ構成サーバ構成は以下の通り WEB/AP サーバ 2 台 DB サーバ 1 台インターネット側ネットワーク帯域 10Mbps 1.4 クライアントクライアントは以下の通りクライアントへのプラグインインストール不可フォントインストールは基本的に不可 1

5 表 1 検証で確認した OS とブラウザの組み合わせ # OS バージョンブラウザバージョン 1 Windows XP SP3 Internet Explorer 7.0, Firefox 3.6, 11 3 Google Chrome Safari Opera Windows Vista SP2 Internet Explorer 7.0, 8.0, Firefox 3.6, 11 8 Google Chrome Safari Opera Windows 7 SP1 Internet Explorer 8.0, Firefox 3.6, Google Chrome Safari Opera Mac OS X Firefox 3.6, Google Chrome Safari Opera Mac OS X 10.7 Firefox 3.6, Google Chrome Safari Opera Debian GNU/Linux Firefox 3.6, Google Chrome Opera Fedora Desktop 16 Firefox 3.6, Google Chrome Opera

6 2 Web フォントの実装方式目的 Web フォントの実装方式 ( 使用する Web フォントのファイル形式生成方法実証実験サイトの仕様に合わせた調整 ) を検討する 2.1 使用する Web フォントのファイル形式 Web フォントとして使用できるフォントには表 2 のファイル形式が存在しブラウザの Web フォント対応状況は表 3 の通りであった表 2 Web フォントとして使用できるフォント 1 # ファイル形式 1 EOT (Embedded OpenType) 2 OpenType 3 SVG Font 4 TrueType 5 WOFF (Web Open Font Format) 表 3 ブラウザの Web フォント対応状況 # ブラウザ EOT OpenType SVG TrueType WOFF 1 Internet Explorer (9 以降 ) 2 Firefox 3 Google Chrome 4 Safari 5 Opera (2012/4/1 現在 ) 表 3 より WOFF 形式の Web フォントであれば実証実験サイトで対象とするブラウザの内 Internet Explorer 7, 8 以外には対応可能である Internet Explorer 7, 8 に対応するには EOT 形式が必須であるこのため実証実験では EOT 形式と WOFF 形式の Web フォントを適用した 1 3

7 2.2 Web フォントの生成方式一般的に Web フォントを使用するには元となるフォントファイルに Web サービスやコンバータを適用して Web フォントファイルに変換する必要がある実証実験では IPAmj 明朝フォント (OpenType) を元に Web フォントファイルの生成を実施した EOT 形式と WOFF 形式の Web フォントファイルを生成する方式として動的に生成する場合と静的に生成する場合について検討を行った Web フォントファイルの動的生成動的生成とは実証実験での Web フォントファイルの動的生成とは実証実験サイトで利用者が入力した文字列をサーバ側で受け取り利用者が入力した文字列のみを含むように IPAmj 明朝フォント (OpenType) をサブセット化しそのファイルを Web フォントファイルに変換することであるクライアント側には動的に生成した Web フォントファイルをブラウザがダウンロードできるように CSS 定義を埋め込んだ HTML をレスポンスすることで Web フォント表示が可能になる検討結果動的生成を実現する上で以下の手順を検討した 1 Web フォント表示に必要な文字を指定すると元となるフォントファイルから指定した文字をサブセット化したフォントファイルを生成する 2 1のサブセットフォントファイルを Web フォント (EOT, WOFF) に変換する 3 Web フォントの CSS 定義を生成する補足実証実験では動的生成の実装は行わなかった今後動的生成を実現するに際にはオープンソースライブラリの sfntly 2 を参考にすることで実現できるのではないかと思われる 2 4

8 2.2.2 Web フォントファイルの静的生成静的生成とは実証実験での Web フォントファイルの静的生成とは IPAmj 明朝フォント (OpenType) から Web フォントファイルをあらかじめ生成しておくことであるフォントファイルのサブセット化および Web フォント変換はサードパーティ製のコンバータ (GUI ツール ) を適用する検証 IPAmj 明朝フォントを静的生成方式で Web フォント化するにあたって適切なデータ量となるようなサブセット単位を性能面から検討した 1 転送時間の測定 100Mbps の LAN 上に設置された開発用のクライアント - サーバ間で 6 万字全てを含んだ IPAmj 明朝を Web フォント形式に変換し Web フォントを表示する HTML を Google Chrome を使用して読み込みレンダリングが完了するまでの時間を測定したサンプルリソース HTML(CSS 定義を含む ) 591Byte WOFF 31,010,156Byte 結果サンプル HTML のレンダリングが完了となるまでの時間は 42.38s でありその中で WOFF のロードに 42.28s 費やしていることが判明した 2 同時アクセス要件実証実験用サーバは最大で 500 までの同時アクセスが可能としているそのため同時に 500 アクセスを想定した場合 31MB 500=15,500MB のデータ量を転送する必要があり 100Mbps の回線全てを転送に充てたとしても転送完了までに 1,240s が必要となる実証実験用サーバの回線の帯域は 10Mbps のため実運用上問題がある Web フォントのサイズ削減のためフォントファイルのサブセット化の検討を行った 3 欧文 Web フォントのファイルサイズ Google Web Fonts サイトでホスティングされている欧文フォントの Web フォントを調査した結果として 1 ファイルあたりのサイズは数十 KB~ 数百 KB 程度となることが判明した上記のサイズであれば転送時間は許容範囲であると判断した但しサブセットの細分化に比例し実装に費やすコード量が増加することを考える必要がある 5

9 4 サブセット単位の検討日本語フォントは欧文フォントと違い全ての字形データを含めてしまうと Web フォントのファイルサイズが MB 単位となるそのため今回は入力文字列に応じた字形データを含むサブセットの Web フォントを返すこととした作成するサブセットは検討結果から 0.1MB~0.3MB の範囲で作成することとするこの範囲であれば 1 ファイルあたり約 100~300 文字の字形データを収めることが可能となるサブセット化した Web フォントファイルのサイズを表 4 に示す表 4 サブセット化した Web フォントファイルサイズ # サブセット化内容 EOT[KB] WOFF[KB] 1 サブセット化なし 28,069 30,284 2 BMP 面 2 分割 ( ) 2,867 3,160 3 BMP 面 2 分割 (6945-FA6D) 3,246 3,551 4 CJK 統合拡張 B 領域 2 分割 ( A0D) 3,327 3,618 5 CJK 統合拡張 B 領域 2 分割 (25A0E-2A6D6) 3,803 4,070 6 平仮名片仮名領域 ( FF) CJK 統合漢字拡張 A(3400-4DBF) 1,271 1,387 8 CJK 統合漢字 (4E00-9FFF) CJK 互換漢字 (F900-FAFF) 上記以外の BMP 領域 ( F,31F0-33FF,FE10-FFEF) 11 CJK 統合漢字拡張 B( A6DF) CJK 統合漢字拡張 C, D(2A700-2B81F) 文字ずつ分割 2 2 転送時間の実測結果同時アクセス時の転送量の試算からファイルサイズは 0.1~ 0.3MB 程度になるようなサブセット単位が適切であると判断したまたファイルサイズに対する Web フォント転送時間の目標値として開発環境において 1.0s~3.0s の間に収まることを目標としたなおファイルサイズを 1MB とした場合のロード時間の実測値は約 0.8s(779ms) であったまたサブセットは文字情報基盤として定義された漢字のほかに使用頻度の高い平仮名片仮名を個別に切り出すことで不要データの転送量の削減を図った 6

10 実証実験のコンテンツ内容を考慮した対策実証実験サイトは利用者が入力した名前や住所を Web フォントで表示する機能を備えているこの名前や住所として入力される文字列を漢字と非漢字に分けて検討を行った漢字については利用者が入力する漢字は 1 文字 1 フォントファイルとして作成したコードレンジを指定してフォントファイルを作成する方式も検討したが表示時に不要なフォントもロードすることになりネットワーク上のオーバーヘッドが考えられたそのため 1 文字 1 フォントファイルとして作成する方式を採用した非漢字については住所は番地が数字で入力されるマンション名がカナで入力されるといったように入力が多くなると想定された非漢字を 1 文字ずつ Web フォントとして作成し表示時に割り当てるより非漢字は 1 つのフォントファイルにまとめた方が処理性能が良くまた 1ファイル当たり 250KB でありネットワーク上許容できる範囲内のサイズであると判断した採用した方式漢字( 非漢字以外の文字 ) は 1 文字毎にフォントファイルとして作成する ( ファイルサイズ : 約 2KB) 非漢字は 1 つのフォントファイルとして作成する ( ファイルサイズ : 約 250KB) 漢字非漢字ともにコンバータを使用して EOT と WOFF 形式のフォントファイルに変換する転送時間の測定実証実験サイトでの 1 文字の Web フォントの転送時間の計測を以下の環境で行ったクライアント - プロキシ - インターネット - サーバ 100Mbps 10Mbps 転送時間の測定対象方法実証実験サイトの名刺の作成体験の名前入力の名前に 1 文字を入力し表示ボタンをクリックしてから画面の表示が完了するまでの間を Google Chrome を使用して測定しその中から Web フォントの転送にかかった時間 ( リクエスト送信から受信完了まで ) を取得した 1 回の測定ごとにブラウザのキャッシュはクリアして計測した 7

11 表 5 1 文字の Web フォントの転送時間領域サイズ転送時間 1 回目 2 回目平均平仮名片仮名領域 KB 37ms 45ms 41ms CJK 統合漢字拡張 A 2.13KB 89ms 29ms 59ms CJK 統合漢字 1.60KB 60ms 26ms 43 ms CJK 互換漢字 2.12KB 77ms 30ms 54 ms CJK 統合漢字拡張 B 1.84KB 29ms 39ms 34 ms CJK 統合漢字拡張 C 2.15KB 78ms 71ms 75 ms CJK 統合漢字拡張 D 1.82KB 145ms 35ms 90 ms 転送時間の測定の結果評価開発環境では 100Mbps の帯域でファイルサイズ 0.1~0.3MB の場合 1.0~3.0s の転送時間を目標としていた実環境の 10Mbps の帯域で考えると単純計算でファイルサイズ 0.1 ~0.3MB では 10.0~30.0s の転送時間が目標となるが実際のファイルサイズは 2KB 前後のため 10Mbps で 0.2s 前後の転送時間が実環境での目標値となるファイルの転送時間の実測値の平均は 0.034~0.090s のため目標値は十分に達成されたコードレンジでサブセット化した Web フォントを採用する場合の課題コードレンジでサブセット化した Web フォントを採用する場合どのコードレンジでサブセット化するのかサブセット化した Web フォントの転送量の検討が必要であるたとえば JIS 第 1 第 2 水準の漢字しか使用しないシステムであれば JIS 第 1 水準と JIS 第 2 水準の漢字のコードレンジでサブセット化するあるいは JIS 第 1 第 2 水準の漢字をまとめてサブセット化するなど Web フォントを使用するシステムに応じたサブセット化を検討する必要がある 1 文字ずつサブセット化した場合の課題実証実験では 1 文字ずつサブセット化した Web フォントを採用したが IPAmj 明朝フォント Ver から Ver へのバージョンアップ時に EOT, WOFF の全 Web フォントファイルを作成しなおす必要がある Web フォントファイルが作成できているかどうかを 1 文字ずつ確認する必要があり作成テストのコストが膨大となる 8

12 2.2.3 静的生成した Web フォントファイルでの Web フォント表示可否目的静的生成した Web フォントファイルを使用して Web フォント表示可能かを確認する検証静的生成した Web フォントを使用して Web フォントの表示可否についてサブセット化していない Web フォントと 1 文字ずつサブセット化した Web フォントを対象に確認を行った検証結果サブセット化していない Web フォントの場合 Internet Explorer と Google Chrome で Web フォント表示できないことが判明した Firefox については Web フォントファイルサイズの上限をチェックする設定を無効にした状態であれば Web フォント表示できることが確認された 1 文字ずつサブセット化した Web フォントを使用した場合は 5 種類のブラウザ全てで Web フォント表示できることが確認された確認結果を表 6 に示す表 6 Web フォントのファイルサイズとブラウザごと表示可否 # OS ブラウザバージョンサブセット化なしサブセット化 ( 1 文字分割 ) 1 Windows XP SP3 Internet Explorer Windows XP SP3 Firefox(*) Windows XP SP3 Google Chrome Windows XP SP3 Safari Windows XP SP3 Opera (*)Firefox は Web フォントファイルのサイズの上限をチェックする設定を無効にした状態サブセット化なしの Web フォントを採用する場合の課題表 6 よりサブセット化なしの Web フォントを採用する場合は Web フォントが Internet Explorer と Google Chrome で表示されない原因の調査を行う必要がある調査観点としてブラウザに Web フォントファイルのサイズ制限があるのか Web フォントをダウンロードできているのかという点が挙げられる 9

13 2.3 Web フォント表示の実装方式 Web フォントを使用するために CSS3 ルール 3 で使用する Web フォントにフォント名を定義し実際に Web フォント表示する文字の span タグに対して先に定義した Web フォント名を使用する CSS と CSS のクラス定義 <style type="text/css">  </style> // class に上で定義したクラスセレクタ MJ を指定することで Web フォント表示される 情 補足の定義では EOT 形式と WOFF 形式の Web フォントを同時に記述しているが 2 種類の Web フォントが両方ともダウンロードされるわけではなく実際はブラウザが対応している形式の Web フォントがダウンロードされるの定義でブラウザがダウンロードする Web フォントの確認結果を表 7 に示す Internet Explorer 9 は EOT/WOFF 形式の両方に対応しているが EOT が先に記述されているため EOT がダウンロードされる

14 表 7 定義で実際にダウンロードされるフォント # OS ブラウザバージョン EOT WOFF 1 Windows Vista SP2 Internet Explorer Windows 7 SP Firefox Google Chrome 18 7 Safari Opera (2012/12/27 現在 ) 静的生成で 1 文字ずつ Web フォント作成したことによる問題と対策開発当初は 1 つの Web フォントファイルごとに 1 つの CSS ファイルを用意し表示する文字に対応する CSS ファイルを読み込む方式を検討していたしかし Internet Explorer 9.0 以前は外部の CSS ファイルを読み込める上限値は最大 31 個までという制限のため最大 31 文字までしか Web フォントが表示されないことが判明したこのため 1 文字ごとに CSS ファイルを用意するのではなくルールとクラスセレクタを動的に生成し 1 つの style タグ内に埋め込む方式に変更した 11

15 2.4 縦組み表示目的縦組み表示で Web フォントの表示可否について確認する検証 Web フォント表示可否を確認する前に縦組み表示自体が可能か実験を行った以下の CSS プロパティを適用した検証結果この CSS プロパティを適用した場合縦組み表示されたのは Internet Explorer のみであった使用した CSS プロパティ style='writing-mode: tb-rl; direction: ltr;' 表 8 縦組み表示確認結果 # OS ブラウザ縦組み表示 1 Windows XP SP3 Internet Explorer Windows XP SP3 Firefox Windows XP SP3 Google Chrome Windows XP SP3 Safari Windows XP SP3 Opera (2012/3/2 現在 ) 課題 Internet Explorer での Web フォントでの縦組み表示と Internet Explorer 以外のブラウザの縦組み用の CSS プロパティ ( ブラウザの独自実装 CSS プロパティ ) の調査及び縦組みでの Web フォント表示可否の検証が必要である 12

16 3 Web フォントの表示 3.1 OS/ ブラウザ表示可能文字範囲目的実証実験で対象とする OS とブラウザの組み合わせごとに Web フォントの表示可否について確認を行う対象 OS は Windows, Mac OS, Linux 対象ブラウザは Internet Explorer, Firefox, Google Chrome, Safari, Opera である検証方法文字の領域ごとに代表 1 文字をブラウザでサンプル表示し Web フォントの字形での表示可否について確認を行う Web フォントは IPAmj 明朝フォントから生成したものを使用するサンプル表示に使用する文字を表 9 に示す表 9 Web フォント表示確認でサンプル表示した文字 # 面領域コードレンジ Unicode/IVS 字形 1 BMP 平仮名片仮名 FF 3042 ( 基本多言語面 ) あ 2 CJK 統合漢字拡張 A DBF 39AC 3 CJK 統合漢字 4E00-9FFF 4E00 4 CJK 互換漢字 F900-FAFF F91D 5 上記以外の領域 F 31F0-33FF FE10-FFEF 0100 Ā 13

17 6 SIP ( 追加漢字面 ) CJK 統合漢字拡張 B 7 CJK 統合漢字拡張 C A6DF 2A700-2B73F 2000B 2AD00 8 CJK 統合漢字拡張 D 2B740-2B81F 2B740 9 IVD 基底文字は CJK 統合漢字拡張 A _E 基底文字は CJK 統合漢字 - 908A_E010A 11 基底文字は CJK 互換漢字 12 基底文字は CJK 統合漢字拡張 B - N/A _E 基底文字は CJK 統合漢字拡張 C - 2B8EF_E 基底文字は CJK 統合漢字拡張 D 凡例 N/A: 対象領域に IVS なし - N/A - 検証結果 BMP CJK 統合漢字拡張 B, C, D IVD の 3 領域の Web フォント表示可否のパターンを表 10 に示す表 10 Web フォント表示可否パターン # パターン BMP CJK 統合漢字拡張 B, C, D IVD 1 A Web フォント表示可 Web フォント表示不可 2 B Web フォント表示可 Web フォント表示不可 3 C Web フォント表示可 14

18 OS とブラウザの組み合わせが表 10 のパターン A~C のどれに対応するのかを表 11 に示す表 11 OS とブラウザの組み合わせごとの Web フォント表示可否パターン対応 # 対象ブラウザ対象 OS Windows Mac OS X Linux XP SP3 Vista SP2 7 SP Debian Fedora 16 1 Internet 7.0 B B N/A N/A N/A N/A N/A 2 Explorer 8.0 B(*1) B(*1) B(*1) N/A N/A N/A N/A N/A B C N/A N/A N/A N/A 4 Firefox 3.6 B B B B B B B 5 11 C C C C C C C 7 Google 18.0 B B C C C(*4) B B Chrome 8 Safari 5.1 A A A B B N/A N/A 9 Opera B(*2) A A A(*3) A(*3) B B 凡例 N/A:OS とブラウザの組み合わせが存在しない (2012/5/23 現在 ) 一部の組み合わせでの Web フォント表示可否の例外的な事象を以下に列挙する (*1) Internet Explorer 8.0 は CJK 統合漢字拡張 B の文字が Web フォント表示されない指定した Web フォントではなくブラウザのデフォルトのフォントで表示される (*2) Windows XP の Opera は CJK 統合漢字拡張 B の文字が Web フォント表示されない指定した Web フォントではなくブラウザのデフォルトのフォントで表示される (*3) Mac OS X 10.6, 10.7 の Opera は CJK 統合漢字拡張 A の文字が Web フォント表示されない (*4) Mac OS X 10.7 の Chrome は CJK 統合漢字拡張 B, C の IVD の文字が Web フォント表示されない 15

19 IVD の文字の Web フォント表示ができない OS/ ブラウザの組み合わせで IVS を表示した場合以下のように表示される確認環境 :Windows Vista SP2 Internet Explorer 8.0 (2012/5/23 現在 ) 凡例 Web フォント有 :Web フォト表示 MJ 文字図形画像 : 文字画像表示 Web フォント無 : フォント指定なし 16

20 課題検証の結果 OS とブラウザの組み合わせごとに Web フォント表示可能な文字範囲が異なることが判明した Web フォント表示不可能な文字範囲の文字の扱いとして 1そのまま表示する 2 文字画像で表示するという 2 つの方法を検討した 1の場合 IPAmj 明朝の字形とは異なる字形で文字が表示されてしまう 2の場合 IPAmj 明朝の字形で表示される IPAmj 明朝の字形を正しく表示するため2の方法を採用した 2の方法の採用にあたり OS とブラウザの組み合わせの判定を行う必要があるその方法として 3.2 のネゴシエーション方式を採用した 3.2 ネゴシエーション方式 OS とブラウザの組み合わせを判定するための対策 OS とブラウザの組み合わせの判定は HTTP リクエストの User-Agent ヘッダを基に OS/ ブラウザを判定するブラウザから送信された HTTP リクエストの User-Agent ヘッダを解析しクライアントの OS の種類とそのバージョンブラウザの種類とそのバージョンを取得しその情報をキーに表 12 に示すネゴシエーションテーブル ( 表 11 の OS とブラウザの組み合わせに対する表示パターンを CSV 形式で保存したファイル ) を検索し対応する表示パターンを取得するこの対策を以降ネゴシエーション方式と呼ぶ表 12 ネゴシエーションテーブルのフォーマット (IE/Windows の場合 ) # ブラウザブラウザ OS OS 表示備考種類バージョン種類バージョンパターン 1 IE 7.0~8.0 WINDOWS 5.1 B XP 2 IE 7.0~8.0 WINDOWS 6.0 B Vista 3 IE 8.0~9.0 WINDOWS 5.1 A XP 4 IE 8.0~9.0 WINDOWS 6.0 A Vista 5 IE 8.0~9.0 WINDOWS 6.1 B 7 6 IE 9.0 WINDOWS 6.0 B Vista 7 IE 9.0 WINDOWS 6.1 C 7 17

21 実証実験サイトでの表示パターンネゴシエーション方式で使用する表示パターンについて実証実験では Web フォント表示する文字の範囲を BMP 領域 CJK 統合漢字拡張領域 IVD 領域符号化対象外文字の 4 つの範囲に分け OS とブラウザの組み合わせに応じて表示する Web フォントを表 13 のパターンで表示する方式とした符号化対象外文字については後述する実証実験の目的である Web フォントの体験ができることを優先するため表 11 で列挙した一部の例外 ((*1)IE 8 では CJK 拡張 B の文字が Web フォント表示されない (*2)Windows XP の Opera は CJK 統合漢字拡張 B の文字が Web フォント表示されない等 ) があるものの OS とブラウザの組み合わせと表示パターンの対応付けは表 11 のままとした表 13 実証実験サイトの表示パターンと対応する文字範囲 # 表示パターン BMP (0000-FFEF) CJK 統合漢字拡張 B, C, D ( B81F) IVD 符号化対象外 1 A Web フォント文字画像 2 B Web フォント文字画像 3 C Web フォント文字画像 4 N Web フォント文字画像凡例 Web フォント : 文字を Web フォントで表示文字画像 : 文字をインライン画像で表示 N:Web フォント表示についてはパターン A と同じであるが実証実験サイトにアクセスしたクライアント環境がネゴシエーションテーブルに存在しない場合サイト上で Web フォントに対応していない旨のメッセージを表示するネゴシエーション方式の結果ネゴシエーション方式を採用した結果表 11 で列挙した一部の例外はあるもののクライアント環境 (OS とブラウザの組み合わせ ) に応じて適切な Web フォントと文字画像表示の切り替え表示を行うことを可能とした 18

22 実証実験サイトの課題 Web フォント表示を優先させたため表 11 で列挙した一部例外を無視する表示パターンを適用したこのためたとえば表 11 で列挙した例外 (*3) の CJK 統合漢字拡張 A が表示されない OS とブラウザの組み合わせの場合 CJK 統合漢字拡張 A の文字は Web フォントの字形では表示されずブラウザのデフォルトフォントの字形で表示されてしまう文字の字形を正確に表示するためには BMP CJK 統合漢字拡張 (B, C, D) の範囲を CJK 統合漢字拡張 A CJK 統合漢字 CJK 互換漢字 CJK 統合漢字拡張 B CJK 統合漢字拡張 C CJK 統合漢字拡張 D に細分化し表示パターンを詳細化することで Web フォント表示されない範囲の文字のみ画像表示する必要があるネゴシエーション方式の課題 HTTP リクエストの User-Agent ヘッダの解析において想定外の User-Agent ヘッダのため OS の種類とバージョンブラウザの種類とバージョンが取得できずネゴシエーションテーブルを検索できない場合表示パターン N とした表示パターン N では BMP 領域のみを Web フォント表示しそれ以外の領域を文字画像で表示する本来 Web フォント表示可能な OS/ ブラウザであっても表示パターン N と判定されると BMP 領域以外の文字が Web フォントではなく文字画像で表示されてしまう User-Agent ヘッダの解析方法として正規表現を適用しているがこの正規表現をハードコーディングしているため想定外の User-Agent ヘッダに対応するにはソースを修正する必要があるソースを修正する場合コーディングテストサーバリソースの入れ替えなど手間がかかる今後新しい OS やブラウザが登場した際の User-Agent ヘッダに容易に対応するためには正規表現を外部ファイルに設定する方式に変更する必要がある 19

23 4 符号化対象外文字の表示符号化対象外文字 4とは文字情報基盤漢字 (58,813 文字 ) の内符号化されていない 6,789 文字のことである (2012 年 6 月時点 ) 符号化対象外文字は IPAmj 明朝フォントに図形データとしては搭載されているが符号化されていないため文字コード (Unicode) によって呼び出すことができないこのため符号化対象外文字は Web フォントではなく文字画像を使用して表示する方式を採用した文字画像を使用するため Web フォント表示する文字列中に符号化対象外文字をインライン表示させることとした 4.1 実装方式文字画像のファイル形式は PNG 形式を採用した表 14 に文字画像ファイルの形式を示す表 14 文字画像ファイルの形式 # 項目内容備考 1 ファイル名 MJ 文字図形名.png 例 :mj png 2 ファイルサイズ 1~17KB 3 解像度 64 64px 2012 年 6 月 ~8 月 px 2012 年 8 月 ~ 文字画像単独での表示符号化対象外文字の文字画像を <img> タグで表示する単純な HTML 実装は以下のようになる <img src="/ipapro/img/mj png"> Web フォント表示する文字列中でのインライン表示 Web フォント表示する文字列中に符号化対象外文字をインライン表示する単純な HTML 実装は以下のようになる 情 <img src="/ipapro/img/mj png"> 情

24 この実装の場合 Web フォント表示する文字のフォントサイズと文字画像のサイズの調整を行っていないため以下のように不自然なインライン表示となる // ブラウザ表示結果 ( 確認環境 :Internet Explorer 8, 画面解像度 1280x1024) Web フォント表示する文字のフォントサイズと文字画像のサイズを調整した HTML 実装例は以下のようになる Web フォント表示する文字のフォントサイズは CSS の font-size プロパティで 44px( ピクセル ) に指定し文字画像は <img> タグの属性の height と width で高さと幅をそれぞれ 44px に指定している 情 <img class="moji" src="/ipapro/img/mj png" height="44" width="44"> 情 //CSS 定義 preview-char { font-size: 44px; } // ブラウザ表示結果 ( 確認環境 :Internet Explorer 8, 画面解像度 1280x1024) この実装では Web フォント表示する文字のフォントサイズと文字画像のサイズは同じように見えるが文字と文字画像の縦位置のずれが目立っている文字と文字画像の縦位置のずれを調整するため <img> タグに対して CSS の vertical-align プロパティで縦方向の位置を調整した HTML 実装例が以下のようになる 21

25 情 <img class= moji src="/ipapro/img/mj png" height= 44 width= 44 > 情 //CSS 定義 preview-char { font-size: 44px; } img.moji { vertical-align: -0.1em; } // ブラウザ表示結果 ( 確認環境 :Internet Explorer 8, 画面解像度 1280x1024) vertical-align プロパティでの調整によって文字と文字画像の縦位置のずれが目立たなくなる 22

26 Internet Explorer 7, 8, 9, Firefox 3.6, 11, Google Chrome, Opera, Safari で表示すると以下のようになりほぼ同様の結果となる Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox 3.6 Firefox 11 Google Chrome 18 Opera Safari 5.1 ( 確認環境 :Windows 7 SP 1, 画面解像度 1280x1024) 23

27 Web フォント表示文字と文字画像の垂直方向のずれの課題実証実験では Web フォント表示する文字のフォントサイズと文字画像のサイズを固定し文字画像の垂直方向の位置調整を固定で行ったが使用するブラウザによっては垂直方向のずれが目立つ場合がある文字画像のインライン画像を自然な表示に見せるためには文字画像の垂直方向の位置をブラウザごとに最適な値に動的に変更できるような実装が必要になるまた今回は手動で調節しながら最適な値を探し出したが自動的に調整する方法がないか調査する必要がある符号化対象外文字の表示の課題文字情報基盤漢字の符号化対象外文字は符号化されていないが図形データ自体は IPAmj 明朝フォントに搭載されているまた SVG 形式のデータも存在する SVG 形式は Web フォントとして適用可能なため表 3 に示したように全てのブラウザが対応しているわけではないが (Firefox Safari Opera が対応 ) 符号化対象外文字の表示手段として残る検討課題である文字画像の解像度の課題サイト公開当初 (6 月 ~8 月 ) は 64 64px の解像度の文字画像を使用していた ( 表 14 参照 ) が Web フォント表示の文字と比較してぼやけたように表示されていた印刷した場合さらにそれが顕著となった文字画像の画面表示と印刷結果を向上させるため文字画像の解像度を上げることを検討した px の文字画像で試行したところ画面表示と印刷結果が改善されたため 8 月以降は px の解像度の文字画像を使用したこれによって Web フォント表示の文字と比較した場合のぼやけ感が画面上印刷ともに軽減された以上のことから文字画像を使用する際画面上で表示する場合と印刷する場合とで必要な解像度を考慮する必要がある画面上で表示する場合文字画像のサイズはどの程度であれば Web フォント表示文字と同等に見えるのかを検討する必要がある印刷する場合は印刷に必要な解像度を検討する必要がある 24

28 5 コピー & ペースト機能実証実験では符号化対象外の文字または CJK 統合漢字拡張領域や IVS の符号化対象の文字であっても Web ブラウザがサポートしていない場合それらの文字をインライン画像として Web ブラウザ上に表示する実装を行った Web ブラウザ上で表示されたインライン画像を含む文字列を電文として交換する場合インライン画像のメタ情報を電文中に保存することが必要となる電文の受信側はメタ情報を使用することで Web ブラウザ上でインライン画像を含む文字列を復元することが可能となる実証実験では Web ブラウザに表示されたインライン画像を含む文字列をコピー & ペーストした際にペースト先アプリケーションにインライン画像のメタ情報を保存する方法を検討し実装した前提として特定の Web ブラウザに依存しない方式であること Web ブラウザにプラグイン ( アドオン ) 等をインストールしないものとしたただし Applet 等の動的なプログラムのダウンロードはこの限りではない 5.1 文字のコピー & ペースト Web ブラウザに表示されたインライン画像ではない文字はそのままペースト先のアプリケーションにコピーされるものとする 5.2 インライン画像のコピー & ペースト (a)web ブラウザに表示されたインライン画像を含む文字列をインライン画像表示が可能なアプリケーション ( 例 :Microsoft Word 等 ) へコピー & ペーストした際にペースト先はインライン画像がコピーされるものとする (b)web ブラウザに表示されたインライン画像を含む文字列をインライン画像表示が不可能なアプリケーション ( テキストエディタメモ帳等 ) へコピー & ペーストした際にペースト先へは MJ 文字図形名を表す文字がコピーされるものとする 25

29 5.3 メタデータ (MJ 文字図形名 ) の埋め込み方式 (HTML タグの実装方式 ) 実証実験では前提通り Web ブラウザへのプラグイン等のインストールは実施せず HTML 実装のみでのコピー & ペーストの実現方法を検討した HTML 実装のみを前提としたためインライン画像を含む文字列をコピーした際の情報の保持は Web ブラウザに依存するこれを踏まえ HTML 実装として以下の表 15 の 4 パターンで検討した具体的にはメタデータの埋め込み方として #1:<img> タグの alt 属性にメタデータを埋め込む方法 #2: タグにメタデータを埋め込み画面上は表示されないように style 属性でメタデータを非表示にする方法 #3:#1 と #2 を両方使用する方法 #4: タグにメタデータを埋め込むが画面外に style 属性で画面外に配置されるようにする方法について検討した表 15 HTML 実装の検討パターン # 属性の組合せ HTML 実装 1 IMG+Alt <img class="moji" src="mj png" alt="mj058001"> 部航 2 IMG+Span(display:none) <img class="moji" src="mj png"> mj058001 部航 3 IMG+Alt+Span(display:none) <img class="moji" src="mj png" alt="mj058001"> mj058001 部航 4 IMG+Span(display:inline-block; width:0px;text-indent: -999em;) <img class="moji" src="mj png" alt=""> MJ058001 部航この検討結果より前述の (a)( b) の実現性について表 16 表 17 にまとめた表 16 HTML 実装の Windows 確認結果 # OS Windows ブラウザ IE FireFox Chrome Safari Opera ブラウザバージョン対象 (a) (b) (a) (b) (a) (b) (a) (b) (a) (b) 1 IMG+Alt 2 IMG+Span(display:none) 3 IMG+Alt+Span(display:none) 4 IMG+Span(display:inline-block;width:0px;t ext-indent: -999em;) 26

30 表 17 HTML 実装の Mac Linux 確認結果 # OS Mac Linux ブラウザ FireFox Chrome Safari Opera ブラウザバージョン対象 (a) (b) (a) (b) (a) (b) (a) (b) 1 IMG+Alt 2 IMG+Span(display:none) 3 IMG+Alt+Span(display:none) 4 IMG+Span(display:inline-block;width:0px;t ext-indent: -999em;) (2012/5/23 現在 ) 凡例 (a): MS Word MAC Word へのインライン画像としてのコピー & ペースト (b): メモ張などへのテキストとしてのコピー & ペースト : 正常に実行可能 : 実行結果が不正 ( 情報が欠ける画像が貼りつかない等 ) : 制限事項あり ; ペースト結果が画像 +テキストのように二重でペーストされる : 制限事項あり ;Opera では画像とテキストの同時のコピーができない今回の場合テキストとしてペーストされる : 制限事項あり ;Mac Safari ではと同じ結果 Linux Safari ではと同じ結果以上より最も多くのパターンをサポート可能な #4 の方式を採用したクリップボードへのコピーの課題実証実験ではユーザー操作による文字列のクリップボードへのコピーを実装したクリップボードへのコピー方法として Javascript によるコピーが課題として挙げられる Javascript によるクリップボードへのコピーとしてテキスト形式と HTML 形式の 2 つの形式でコピーできなければコピー & ペースト機能を実現できない Internet Explorer はクリップボードアクセス用の API をサポートしている Firefox, Gooogle Chrome, Safari, Opera が API をサポートしているのか調査が必要である 27

31 6 印刷機能 6.1 実装方式 Web フォント表示した文字を印刷するために特別な機能は実装せずブラウザの印刷機能を使用する方式とした 6.2 各ブラウザでの Web フォント印刷対応状況各ブラウザで Web フォントの印刷が可能かどうか検証を行った検証でサンプル印刷した Web フォントは表 9 を使用した表 18 各ブラウザでの Web フォント印刷対応状況 # 対象ブラウザ対象 OS Windows Mac OS X Linux XP SP3 Vista SP2 7 SP Debian Fedora 16 1 Internet 7.0 N/A N/A N/A N/A N/A 2 Explorer 8.0 N/A N/A N/A N/A N/A N/A N/A N/A N/A 4 Firefox Google Chrome 8 Safari Opera (*1) (*1) (*2) (*2) (2012/5/23 現在 ) 凡例 :Web フォント表示可能な範囲について印刷可能 :Web フォント印刷不可 -: 検証対象外 N/A:OS とブラウザの組み合わせが存在しない (*1)CJK 統合漢字拡張 A を Web フォント表示できないが印刷時は Web フォントの字形で印刷可能 (*2) 非漢字が印刷できない 28

32 6.3 Firefox, Chrome の印刷の不具合 Firefox で Web フォント表示されている画面の印刷を実行すると Web フォントの字形では印刷されなかった Google Chrome で Web フォント表示されている画面の印刷を実行すると同じ文字であっても印刷を数回繰り返すと印刷される場合と印刷されない場合があった印刷される場合は Web フォントの字形で印刷された 6.4 PDF 出力の確認実証実験サイトのアンケートに PDF に印刷したら文字が出力されない PDF に出力すると印字されない文字が複数ありましたという回答があったため PDF 出力の確認を行った結果を表 19 に示すブラウザや PDF 出力ソフトによって Web フォントの埋め込みや PDF 出力結果が変わる結果となった表 19 Web フォント PDF 出力結果 # OS/ ブラウザ PDF 出力 Web フォン出力内容ソフトト埋め込み Windows 7 SP1 1 Internet Adobe Web フォントが文字として出力される Explorer 9 Acrobat XI 2 Firefox 11 Web フォントではなくブラウザのフォント未指定時の文字が画像として出力される 3 Safari 5.1 Web フォントが文字ではなく画像として出力される 4 Opera Web フォントが文字として出力される Mac OS X Firefox 11 Mac OS X Web フォントではなくブラウザのフォ組み込みント未指定時の文字が画像として出力される 6 Safari 5.1 Web フォントが文字として出力される 7 Opera Web フォントが文字として出力される (2013/01/30 現在 ) 29

33 7 ブラウザ依存事象一覧 7.1 IE8:CJK 拡張 B が表示されない Internet Explorer 8 (Windows XP, Vista, 7 いずれも ) では図 1 のように CJK 統合漢字拡張 B の文字が Web フォント表示されずブラウザのフォント未指定時の字形で表示されたこの問題については Microsoft のサポート情報が公開されている 5 Web フォント表示期待結果ブラウザの実際の表示結果図 1 Windows 7 SP1 / Internet Explorer 8 での表示結果 (2013/01/15) 7.2 Win/Opera:CJK 拡張 B が表示されない Windows XP SP3 / Opera の組合せでは図 2 のように CJK 統合漢字拡張 B の文字が Web フォント表示されなかった Web フォント表示期待結果ブラウザの実際の表示結果図 2 Windows XP SP3 / Opera での表示結果 (2013/01/15) 7.3 Mac/Opera:CJK 拡張 A が表示されない Mac OS X 10.7 / Opera の組み合わせでは図 3 のように CJK 統合漢字拡張 A の文字が Web フォント表示されなかった Web フォント表示期待結果ブラウザの実際の表示結果図 3 Mac OS X 10.7 / Opera での表示結果

34 (2013/01/15) 7.4 IE9 以前 :CSS ファイルの読み込み制限が最大 31 ファイル実証実験では 1 文字ずつサブセット化した Web フォントを使用した開発当初は Web フォントごとに Web フォント表示用の定義を記述した CSS ファイルを用意しておき画面に表示する文字に対応する CSS ファイルを読み込む方式を採用していたしかし Internet Explorer 9 以前では CSS ファイルを同時に 31 ファイルまでしか読み込めない制限があったため 32 文字以上の文字は Web フォント表示されなかったこのため Web フォントごとに CSS ファイルを読み込むのではなく 1 つの <style> タグ内に画面表示する文字の Web フォント表示用の定義を埋め込む方式とした Internet Explorer 10 からはこの制限は削除されている Opera: インライン画像がコピー & ペーストされない Opera ではブラウザに表示した文字画像のワード等へのコピー & ペーストで文字画像がペーストされず MJ 文字図形名のみがペーストされた 7.6 Opera: 画面表示と印刷結果が異なる文字が存在 Windows 7 SP1 / Opera の組み合わせでは図 4 のようにブラウザの画面上では Web フォント表示されなかったまた印刷すると Web フォント表示ともブラウザ表示とも異なる字形で印刷された Web フォント表示期待結果ブラウザの実際の表示結果印刷結果図 4 Windows 7 SP1 / Opera での表示結果 (2013/01/15) 7.7 Safari: 印刷プレビュー画面で印刷後画面のボタンが反応しなくなる Safari で印刷後フリーズする現象が発生した INPUT タグでスタイルシートによる BORDER の設定をしていると当現象が発生したため INPUT タグの BORDER 指定を IE のみで使用するように変更した

35 8 スマートフォン (Android, ios) 確認結果 8.1 確認結果スマートフォン (Android, ios) で Web フォント表示の可否を確認した結果を表 21 に示す Web フォント表示の確認には表 9 の文字を使用した表 21 の表示パターンは表 20 を参照表 20 Web フォント表示可否パターン ( 再掲 ) # パターン BMP CJK 統合漢字拡張 B, C, D IVD 1 A Web フォント表示可 Web フォント表示不可 2 B Web フォント表示可 Web フォント表示不可 3 C Web フォント表示可表 21 スマートフォンの Web フォント表示可否パターン対応 # ブラウザ対象 OS android ios 標準ブラウザ Web フォント表示不可 C N/A 2 Safari N/A N/A C 凡例 N/A:OS とブラウザの組み合わせが存在しない (2013/2/1 現在 ) Android の標準ブラウザの場合 Web フォントがダウンロードされなかった Android の標準ブラウザの場合確認に使用した全文字が Web フォント表示された ios の Safari の場合確認に使用した全文字が Web フォント表示された 32

2. 実験シナリオ対象が一般国民であるため以下のことを前提とした実験環境を構築する (1) 内容氏名住所等の多様な漢字の入力が必要となる Web を用いた電子申請をイメージして文字情報基盤漢字の実験サイトとする本事業の目的および 4 章で述べる実験項目を満たす具体的なストーリーを検討して提

2. 実験シナリオ対象が一般国民であるため以下のことを前提とした実験環境を構築する (1) 内容氏名住所等の多様な漢字の入力が必要となる Web を用いた電子申請をイメージして文字情報基盤漢字の実験サイトとする本事業の目的および 4 章で述べる実験項目を満たす具体的なストーリーを検討して提 2011 年 10 月 07 日 IPA 文字情報基盤 Web 実証実験事業 ( 案 ) 1. 目的文字情報基盤推進事業で整備した約 6 万字の漢字 ( 文字情報基盤漢字 : 図 1 参照 ) を広く一般国民に閲覧してもらえるよう Web 上に公開し氏名住所等の多様な漢字をパソコンから入力出力 ( ディスプレイプリンタ ) できる環境を準備する本実験は文字情報基盤のメリットを体験できるデモンストレーションという広報的側面と