Heroku meetup#11（フル）

大久保英樹（ Job-Hub）

まだ間に合う 　 Web フォント　　 ( フル Ver)

自己紹介

大久保英樹

Job-Hub というクラウドソーシングサービスで開発やってます。

Qiita: OakbowTwitter:@oakbow7Job-Hub: http://jobhub.jp/co_workers/gappai/

Web フォントって？

Web フォントって？

Web フォントって？

CSS や JS 、画像のように、 Web ページ上でリソースファイルとして送信されるフォントファイルのこと。

FireBug の Web フォントの表示

Web フォントって？

文字数の多い日本語環境ではいまいち流行らなかった Web フォント。英語圏では、なかなかの盛り上がりのようです。

http://www.google.com/fonts

Web フォントって？

最近はピクトグラム用途に拡大しつつあり、マルチブラウザ対応、 CSS も準備されて簡単に使える親切設計のフリーフォントも現れているため、当たり前に使われつつあります。

IcoMoon のフリーフォント

Web フォントって？

https://github.com/blog/1106-say-hello-to-octicons

画像のピクトグラム（アイコン）と違って・・・

拡大してもぼやけない。　⇒アイコン素材をリサイズすると眠い画像になったりする　⇒ Retina でもクッキリ！

Web フォントって？

font-color で色を変えられる　⇒色違いのアイコンでも CSS だけで実現できる　⇒ :hover とかグレーアウト用の画像とかいらないfont-size で大きさを変えられる　⇒大きさ違いのアイコンでも CSS だけで実現できる

画像のピクトグラム（アイコン）と違って・・・

Web フォントって？

非言語コミュニケーション⇒ 感覚的で分かりやすい⇒ 少ない文字数・領域で意味を伝えられ

る文言変更が容易ページ容量削減リクエスト数削減

視覚的な分かりやすさ

Web フォントって？

Bootstrap のような CSS フレームワークとも組み合わせやすいので、より視覚効果を低コストで高めることができます。

Twitter Bootstrap のボタン（ HTML 的にはリンク）をさらにリッチに。

Web フォントって？

スマートフォンやタブレットでの利用を想定した場合、非レスポンシブであってもアイコンの利用は非常に効果的です。スマホユーザはスマホアプリなりスマホ対応 Web サイトなりで、アイコンでの操作に非常に慣れ親しんでいるので。

最近はスマホファーストを採用するサイトも増えてきたようです。スマホ前提の UI を作り、 PC でも違和感なく表示されるように CSS を調整する、というやり方。

Web フォントの使用例

Web フォントの利用事例

Web フォントの使用例

Heroku ・・・ heroku （独自）、 entypo

Heroku フォントはなぜかフォントファイルじゃなくて Data URI で配信。英文フォントもかなりの数を使用してます。

Web フォントの使用例

GitHub ・・・ octicons （独自）

Web フォントの使用例

Treasure Data ・・・ FontAwesome

Web フォントの使用例

Door Keeper ・・・ FontAwesome

Web フォントの使用例

Proof of Life・・・ FontAwesome

フリーの Web フォント

FontAwesome一番良くつかわれている。Twitter Bootstrap との親和性が高い。CSS がとてもよくできている。

Bootstrap3.02.0 の CSS スプライトアイコンを Web フォント

化。

IcoMoon↑ に比べるとマイナー。フォントファイルジェネレータが無料で使える。他のフリー Web フォントもここで配布されてい

る。自作の Web フォントも使える。フォントを CSS スプライトにすることもできる。オススメ。 Job-Hub はこれ。

その他いっぱい・・・

フリーの Web フォント

Bootstrap3.0 以外の Web フォントは少々容量が大きめだったり、いらないフォントが結構入っていたりします。

IcoMoon App （フォントファイルジェネレータ）で必要なフォントだけを抜き出し、サブセット化（容量削減処理）を行いましょう。

IcoMoon App ： http://icomoon.io/#app-features

WebFont Generator ：http://www.fontsquirrel.com/tools/webfont-generator

フリーの Web フォント

IcoMoon App ： http://icomoon.io/#app-features

WebFont Generator ：http://www.fontsquirrel.com/tools/webfont-generator

IcoMoon のほか、 FontAwesome や Entypo などの著名な Web フォントや自作フォントからフォントファイルを作成できる Web サービス。無料。svg 、 ttf 、 woff 、 eot を出力。Web フォントを利用するための CSS も自動生成してくれる。単に必要なフォントに絞るだけならこれだけで十分。

でも、 IcoMoon App で生成したフォントファイルは容量が大きめなので、↓のようなツールをくぐらせるとさらに削減できる。woff だと容量が半分以下になったり（ 74k→29k/490個）します。

Web フォントの使い方

※ すいません、 Ruby/Rails 前提です。

Web フォントの使い方

・ Gem を使う　 FontAwesome 、 Bootstrap3.0 、 IcoMoon あたりは　 Gem を使うと一発でインストール。　ただしサブセット化できないのがネック。

・手動で入れる　 assets/fonts フォルダにフォントファイルを突っ込む。　 assets/css フォルダに CSS を突っ込む。　 CSS のフォントファイルのパスを asset_path に書き換える。　 application.css に CSS の記述を追加する。　大した手間ではないのでできればこちらで。※ フォントファイルは勝手に Asset Pipeline の対象になってくれます。

Web フォントの使い方

各フォントには 16進数（ UTF ）やシンボル名が定義されていて、 CSS のクラス名などで簡単に呼び出せるようになっていることが多いです。

IcoMoon App で生成したフォントの例（フォント一覧のHTML ファイルも生成されます）

Web フォントの使い方

<i class="icomoon-arrow-right-3 text-warning"></i>&nbsp;<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 タグの外側に出したりしてます。

今後の（俺様の）課題

・ submit ボタンを button タグに置き換えると、記述によっては Jquery の BlockUI が効かなくなったりする。　⇒多重押し防止措置 JS を個別修正すれば直る　⇒多分汎用的じゃなくてウチの JS/CSS の問題

今後の（俺様の）課題

・ button_tag の iconバージョンヘルパーメソッドは作ったけど、 FormBuider の buttonの方はまだ作ってない。そのうち作ります。

<%= f.submit ‘登録する’ :class=>’btn’ %>

↑ でもアイコンを使えるように何とかしたい。

※ リクエストもらえるとやる気が出ます。

おわり

おわり