Embed Size (px)
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 フォントって？
文字数の多い日本語環境ではいまいち流行らなかった 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 フォント
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> <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’ %>
↑ でもアイコンを使えるように何とかしたい。
※ リクエストもらえるとやる気が出ます。
おわり
おわり
![[Heroku meetup LT] Salesforce1 Developers Community MAXの紹介](https://img.pdfslide.net/doc/110x75/546d6ecfaf79596c298b534e/heroku-meetup-lt-salesforce1-developers-community-max.jpg)
