2013年5月1日水曜日

HTML5ロゴを愛する人のためのChrome機能拡張を作った

HTML5ロゴが好きで好きでしょうがない人のためのChromeの機能拡張を作った。
HTML5ロゴを使ったクレイジーな何か。 に応募したものです。

● We Love HTML5 LOGO! more. ●
https://chrome.google.com/webstore/detail/we-love-html5-logo-more/ipldhmeiifmgbfdjkonnpjcgegilpmmk?hl=ja

これを入れるとあら不思議。
すべてのWebページに 5HTML5 という文字があったらHTML5ロゴになります。



!注意!
サイトの作りによっては適応されない場合があります。
例:amazon.com、google.com

上記が少々使いにくいと感じたり、普通にサイトを使いたいという方用に抑えたフォントサイズのものもご用意してあります。

● We Love HTML5 LOGO! ●
https://chrome.google.com/webstore/detail/we-love-html5-logo/dccieefclmgoommkpjjdppmdpbpgecim?hl=ja

!注意!
かなり自然に溶け込むサイズにしたため、忘れてこのまま画面キャプチャを送って大惨事にならないようにお気を付けください。

技術的に何をしてるかというと
  • HTML5ロゴのSVGデータをSVGフォント用に変換
  • Chrome機能拡張でロードされた時に「SVG FONTが含まれるSVG」と「bodyに対してfont-familyを適応するcss」を追加
だけです。

細かい情報はあまりないので以下を参考に試行錯誤して微調整しました。
http://www.w3.org/TR/SVG/fonts.html
アイコンをFireworksでSVG出力してWebフォントに対応させる方法

ちなみに苦労したのがSVG FONTの作り方で、普通のSVGをFONTとして使うにはかなり厄介でIllustratorなどから吐き出した複雑な図形のSVGだとpathタグで吐き出されるためそのまま使えません。
SVG FONTの場合、svgのパスで d アトリビュートで作れる図形じゃないとだめなようで、変換が必要でした。
最悪手動で作ろうかと思ってたのですが、 IcoMoon App というサイトでうまいこと変換してくれるというのを知ってそこで変換しました。

0 件のコメント:

コメントを投稿