2011.11.30

スマートフォン用サイトを作るのに使ったネタ（WebFont、角丸ほか）

この前作ったDTPの勉強会ツイートライブ実況専用サイトは、結果的にHTML5時代の材料でスマートフォン用のアプリケーションサイトを作ることになったのでした。

僕がいろいろ作っているのは、誰かにもっといいものを作ってほしいからですので、今回作った時の経験を記録として書いておけば、誰か真似して、もしくはさらにいいものを作ってくれることもあろうかと思います。

① WebFont

タイトルバーに、とてもthinな書体を使いたかったので、WebSocketが使えるということはMozilla Firefox 7と限定されるということもあり、WebFontが使えるわけですので、使ってみました。

Google Web Fonts
http://www.google.com/webfonts

Google Web Fontsは、APIが用意されているので、CSSに1行書き加えるだけで、フォントが使えるようになります。

② タッチでトップ

iOSなどで採用されている、タイトルバーのところをタッチすれば、コンテンツのトップが表示される仕組みですが、jQueryなどを使えば、$('body').click(function(){scrollTo(0,2);});で実現できてしまいます。アニメーションするようにするとモアベター（というよりはマスト）です。

スクロール位置を(0,0)にしないのは、URL入力バーをを出さないようにする工夫です。たいていのサイトでは、scrollTo(0,1)と書いていますが、Android版Firefox 7では、それだとまだURL入力バーが見えてしまうので、あえて(0,2)の位置にしました。