View
214
Download
0
Category
Preview:
DESCRIPTION
heroku meetup#11新年会LTスライドです。
Citation preview
自己紹介
大久保英樹
Job-Hub というクラウドソーシングサービスで開発やってます。
Qiita: OakbowTwitter:@oakbow7Job-Hub: http://jobhub.jp/co_workers/gappai/
Web フォントって？
Web フォントって？
Web フォントって？
CSS や JS 、画像のように、 Web ページ上でリソースファイルとして送信されるフォントファイルのこと。
FireBug の Web フォントの表示
Web フォントって？
最近は文字だけでなくピクトグラム用途に拡大しつつあります。マルチブラウザ対応、 CSS も準備されて簡単に使える親切設計のフリーフォントも現れているため、もはや使うのが当たり前に。
IcoMoon のフリーフォント
Web フォントって？
https://github.com/blog/1106-say-hello-to-octicons
画像のピクトグラム（アイコン）と違って・・・拡大してもぼやけない。 ⇒ Retina でもクッキリ！font-color で色を変えられるfont-size で大きさを変えられる
Web フォントって？
非言語コミュニケーション ⇒ 感覚的で分かりやすい ⇒ 少ない文字数・領域で意味を伝えられる
文言変更が容易ページ容量削減リクエスト数削減
視覚的な分かりやすさ
スマホ・タブレット対応にも最適
Web フォントの使用例
Web フォントの利用事例
Web フォントの使用例
Heroku ・・・ heroku （独自）、 entypo
Heroku フォントはなぜかフォントファイルじゃなくて Data URI で配信。英文フォントもかなりの数を使用してます。
Web フォントの使用例
GitHub ・・・ octicons （独自）
Web フォントの使用例
Treasure Data ・・・ FontAwesome
Web フォントの使用例
Door Keeper ・・・ FontAwesome
フリーの Web フォント
FontAwesome一番良くつかわれている。Twitter Bootstrap との親和性が高い。CSS がとてもよくできている。
Bootstrap3.02.0 の CSS スプライトアイコンを Web フォント
化。
IcoMoon↑ に比べるとマイナー。フォントファイルジェネレータが無料で使える。他のフリー Web フォントもここで配布されてい
る。自作の Web フォントも使える。フォントを CSS スプライトにすることもできる。オススメ。 Job-Hub はこれ。
その他いっぱい・・・
フリーの Web フォント
Bootstrap3.0 以外の Web フォントは少々容量が大きめだったり、いらないフォントが結構入っていたりします。
IcoMoon App （フォントファイルジェネレータ）で必要なフォントだけを抜き出し、サブセット化（容量削減処理）を行いましょう。（ 74k→29k/490 個 /woff ）
IcoMoon App ： http://icomoon.io/#app-features
WebFont Generator ：http://www.fontsquirrel.com/tools/webfont-generator
Web フォントの使い方
※ すいません、 Ruby/Rails 前提です。
Web フォントの使い方
・ Gem を使う FontAwesome 、 Bootstrap3.0 、 IcoMoon あたりは Gem を使うと一発でインストール。 ただしサブセット化できないのがネック。
・手動で入れる assets/fonts フォルダにフォントファイルを突っ込む。 assets/css フォルダに CSS を突っ込む。 CSS のフォントファイルのパスを asset_path に書き換える。 application.css に CSS の記述を追加する。 大した手間ではないのでできればこちらで。※ フォントファイルは勝手に Asset Pipeline の対象になってくれます。
Web フォントの使い方
<i class="icomoon-arrow-right-3 text-warning"></i> <a href="/sign_up?role=co_worker">ユーザ登録はこちら </a>
HTML はこんな感じ。 i タグを使うことが多いです。
http://jobhub.jp/statics/guide
Web フォントの使い方
こんな HTML を毎回書くのはかったるいので、ヘルパーメソッド作りました。良かったら使ってください。
https://gist.github.com/ohkubo/7412067
<%= icon_tag ‘arrow-right-3’ %>
<%= icon_link_to ‘リンク先’ ,’URI’,:icon=>… %>
<%= icon_button_tag ‘登録する’ , :icon=>… %>
※IcoMoon 用に作ってますが、他のフォントでも小改造で動くと思います。
Web フォントの注意点
S3 や CloudFront など、 Web サーバとは異なるドメインから配信する場合、 FireFoxでは文字化けのような状態になってしまいます。
※ Heroku だと S3 や Cloudfront をリソース配信に使うことが多いので、割と起こりやすい問題です。
Web フォントの注意点
CORS 対応などが必要になるのですが、詳しくは下記の記事を参考にしてください。
S3+CloudFrontでWebフォントを利用する（FireFox対応）https://gist.github.com/ohkubo/7412717Gist:
※ FireFox でしか発生しない（ Safari 、 Chrome 、IE では正常に表示される）ので意外に気付きにくいです。
今後の（俺様の）課題
・下線付きリンクで、アイコンだけ下線なしとかできない。アイコンだけ大きめ、上下位置を調整とかすると悲しいことになる。
CSS の text-decoration の仕様上回避できないみたいなんだけど、やり方分かる方は教えてください。今はアイコンを a タグの外側に出したりしてます。
今後の（俺様の）課題
・ button_tag の icon バージョンヘルパーメソッドは作ったけど、 FormBuider の buttonの方はまだ作ってない。そのうち作ります。
<%= f.submit ‘ 登録する’ :class=>’btn’ %>
↑ でもアイコンを使えるように何とかしたい。
※ リクエストもらえるとやる気が出ます。
おわり
おわり
Recommended