Enjoy WebFonts!! というLTを Chrome+HTML5 Conference - 第20回記念HTML5とか勉強会スペシャル でやってきた
タイトルが長いけど、まあそれはさておき。
「Enjoy WebFonts!!」というLTを Chrome+HTML5 Conference でやってきた。
Chrome+HTML5 Conference に申し込んだら、みごとに落選だった。200人の枠に1000人以上の応募があったと聞いた。それは厳しい。
そんなわけで、LTに応募した。LT登壇者は参加できるので。聞いてみると、LTの希望者はそんなに多くなく、枠内に収まる程度だったとのこと。あとLTはみんな Developer で、Designer のかたはいなかった(と思う)。Designer のかたのLTとか見てみたいので、これから増えてくるといいな。
Enjoy WebFonts!!
スライド
「Enjoy WebFonts」の資料はこちら。ちょっと下のほうになってしまうけど、LTで話せなかったWebFontsのデメリットについてもこのエントリでは取り上げる。
スライド表示の推奨ブラウザは Google Chrome 14以上。これっていまだとChrome betaだけど…。Chrome Stableでもほとんど動く。
Zen-Codingの部分は、この記事 書いたので読んでください。つまり宣伝です。
以下のURLを開いて、「3」を押すといい感じのサイズになると思う。「T」を押すとテーマが変わる。←→でスライドを移動できる。
WebFontsのデメリットや難しいことについて
日本語について
日本語フォントはサイズが大きい。英数字などをせいぜい数十文字だけど、日本語の文字はずっと多い。日本語フォントのファイルは10MBくらいになったりする。
そこで必要な文字だけをひとつにまとめて使うサブセット化が必要になるけど、まだいい感じの方法があまりない。できないわけではないけど、手間がかかりすぎる感じ。
個人的には時間が(あるいはGoogleWebFontsが)解決してくれるといいな。
preload
フォントファイルは実際に利用されるときにダウンロードされる。だからCanvasなどで利用する場合、普通に書くと最初はフォントが適用されず、2回目の表示からフォントが適用されることがある。
Google Font API には WebFont Loader - Google Font API - Google Code というものがあって、これを使うと上記問題を回避できる。はずだけど、一部のフォントではうまく preload されなかった。具体的にはこれで、GoogleWebFontsの生成するJavaScriptを使ったけどpreloadされなかった。
超拙い英語で issue の登録はしたので、改善されるといいなと。
たくさん使うと
当たり前だけど、重くなる。ほどほどに。
僕のスライドはたくさん使っているので重い。一度読み込んでしまえば問題ないけど。ご利用は計画的に。
サンプルや参考サイト
サンプル
LTで使ったサンプルはこちら。どれも急いで作ったので、コードがきたない。本当はリファクタリングしたいけど、ちょっと時間が取れなさそうで…。すみません…。
参考サイト
参考にさせていただいたサイトなどはこちら。
- Google Web Fonts
すばらしいサービス!すでに238種類のフォントが使える。しかもどんどん増えている。 - HTML5 Rocks - A resource for open web HTML5 developers
HTML5のチュートリアルやサンプルがいろいろと。 - HTML5 Presentation
僕の資料はこれをベースにさせていただいた。 - Saving generated files on the client-side - HTML5Rocks Updates
Live Codingのファイル保存で使った。サンプルはChrome 14以上じゃないと動かない。 - HTML5 Rocks - Typographic effects in canvas
Canvasでかっこいいテキストのエフェクト。 - スタートアップ SVG:第3回 少し高度なSVG|gihyo.jp … 技術評論社
SVGのサンプルで使わせていただいた。 - SVG Demo
PixelGridさんのSVGのデモをLT中に使わせていただきました。突然のお願いにも関わらず、こころよく了承していただきました。ありがとうございます!PixelGrid++ - WhatFont - Chrome ウェブストア
使っているフォントがわかるプラグイン。すごいし便利!気になったフォントはこれで確認できる。 - Google Font Previewer for Chrome - Chrome ウェブストア
見ているサイトにGoogleWebFontsのフォントを適用できるプラグイン。ちょっと試してみるのに便利!
Google Web Fonts の使い方
おまけ。やっぱり簡単な使い方があったほうがいいかなと。
http://www.google.com/webfonts#ChoosePlace:select にアクセスする。
フォントを選んで「Quick Use」をクリックする。
こんな感じのページが表示されて、ちょっと下に行く。
CSSのリンクがあるのでHTMLに追加する。font-familyの部分をすきなセレクタに追加する。
他にも使い方があるけど、基本的にはこんな感じ。とっても簡単。
まとめ
LTに登壇できることになってから、頑張って資料やサンプルを作り始めた。たぶんこの5分のために、10時間以上は費やしたと思う。かなりの部分はやる気のがでなくて、うだうだしている時間だけどw
行きの電車で一人リハーサルをしていると、普通にやるとやっぱり間に合わない。しゃべることをかなり削って、ぎりぎり。けっきょく超早口でLTしたけど、Live Coding で躓いて、ぎりぎり足りなかった…。まあ仕方ないのよね。緊張で手汗かくとMacbook Airのトラックパッドが全然滑らず大変だった。次はマウスでやろうと決意した。
WebFontsは簡単に、いろいろなところに適用できる。でも、いまは使いどころが限られているかもしれない。でもそれってHTML5全般にも言えることじゃないかなと思う。
だから使えるところから、ちょっとずつ使い始めればいいと思う。あと、見た目が変わると、やっぱり楽しいよね。
帰りがけに、LTを楽しかったです、と何人かの方から声を掛けていただいた。いや、これは、ほんとうにうれしい。タイトルからして Enjoy とつけているので、楽しんでもらえてよかった。
最後に、こんなに素晴らしい 勉強会/カンファレンス を開催してくださったスタッフの皆さんに感謝。もちろん登壇者の方々にも感謝。すばらしいセッションばかりだった。もちろんもとても楽しかった。
通常の勉強会でも大変そうなのに、これだけの規模のカンファレンスを開くのはどれだけの準備が必要なのかと、想像が及ばない。
ありがとうございました。
あと、HTML5 Developers/Designers JPのFacebook ページはいい感じでした。質問が書きやすいし、「いいね」が質問にも回答にも付けられるし。
そんなわけで、とにかく楽しいイベントだった。見れなかったセッションについては、あとで動画を見たいと思う。
これまでに参加したときのエントリ
一覧は [HTML5Study]記事一覧 - techlog からどうぞ。