最近grailsを勉強しています。
grailsにレスポンシブフレームワークであるionicを入れて、IOS7風のUIを試してるのですが、どうもwebフォントが読み込めていません。webフォントと言えば最近Font Awesomeでも全く同じ現象が起こっていたので、もしやと思って試したらやはり以前と同じ原因でした。
Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
Grails Framework
まず、ionicでは以下の4種類のwebフォントが読み込めないとエラーが発生しました。
- woff(Web Open Font Format)
- eot(Embedded OpenType)
- svg(Scalable Vector Graphics)
- ttf(True Type Font)
webフォントはwikipedia先生が以下のように解説しています。
元来、Webブラウザは端末にインストールされているフォントを呼び出し文字を表示する。端末のフォント如何では、Webデザイナーが意図しないWeb表示がなされてしまい、またフォントに関するWebデザインに制約が生じてしまう。フォントを画像にして表示するという手はあったが、文章修正のメンテナンス、文章の検索といった点で問題がある。そこでWebサーバー上にフォントファイルを置き、Webデザイナーの意図するフォントを表示できるようにした技術がWebフォントである。またはWebサーバー上に置かれるフォント自体をWebフォントと指し、フォントをWebで利用するよう提供するサービスをWebフォントサービスとして区別する。
http://ja.wikipedia.org/wiki/Web%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88
grailsの通常設定ではこれらは読み込ません。
mimeの設定がされていないため、読み込めないのです。
では早速修正しましょう。
Config.groovyを修正
Config.groovyのgrails.mime.typesセクションを修正します。
初期状態では以下のようになっています。
grails.mime.types = [ all: '*/*', atom: 'application/atom+xml', css: 'text/css', csv: 'text/csv', form: 'application/x-www-form-urlencoded', html: ['text/html','application/xhtml+xml'], js: 'text/javascript', json: ['application/json', 'text/json'], multipartForm: 'multipart/form-data', rss: 'application/rss+xml', text: 'text/plain', hal: ['application/hal+json','application/hal+xml'], xml: ['text/xml', 'application/xml'] ]
これを以下のように修正します。
grails.mime.types = [ all: '*/*', atom: 'application/atom+xml', css: 'text/css', csv: 'text/csv', form: 'application/x-www-form-urlencoded', html: ['text/html','application/xhtml+xml'], js: 'text/javascript', json: ['application/json', 'text/json'], multipartForm: 'multipart/form-data', rss: 'application/rss+xml', text: 'text/plain', hal: ['application/hal+json','application/hal+xml'], xml: ['text/xml', 'application/xml'], eot: 'application/octet-stream', svg: 'image/svg+xml', ttf: 'application/x-font-ttf', woff: 'font/x-woff' ]
末尾の4行を追加しました。
これで無事読み込めるようになります。
最近のレスポンシブフレームワークでは、アイコン画像にwebフォントを利用する事が非常に多いので、忘れずに覚えておくとよいかと思います。
なお、以前の記事でFont Awesomeがnginxで表示できない件も全く同じ理由でmimeの設定漏れでした。
【404】font-awesomeがnginx上で404になる件【bootstrap】 - 文系プログラマによるTIPSブログ
- 作者: 山田正樹,山本剛,上原潤二,永井昌子,杉山清美,杉浦孝博,笠原史郎,香月孝太,福岡竜一,伊堂寺北斗
- 出版社/メーカー: 翔泳社
- 発売日: 2008/08/26
- メディア: 大型本
- 購入: 3人 クリック: 42回
- この商品を含むブログ (28件) を見る
はじめてのGrails―「Ruby on Rails」風の「フレームワーク」をJavaで使いこなす! (I・O BOOKS)
- 作者: 清水美樹
- 出版社/メーカー: 工学社
- 発売日: 2009/11
- メディア: 単行本
- クリック: 21回
- この商品を含むブログ (2件) を見る
- 作者: 関谷和愛,上原潤二,須江信洋,中野靖治
- 出版社/メーカー: 技術評論社
- 発売日: 2011/07/06
- メディア: 単行本(ソフトカバー)
- 購入: 6人 クリック: 392回
- この商品を含むブログ (155件) を見る