SwapSkills勉強会：CSSで作るiPod touchのWEB

2008年2月9日 著

昨夜はApple Store銀座店で開催された「SwapSkills勉強会：CSSで作るiPod touchのWEB」というイベントに参加しました。しばらくの間CSS Niteからは足が遠のいてしまって、この手のイベントに参加するのは本当に久しぶりのこと。立ち見する羽目になったら嫌だなぁと思いつつ定時過ぎに退社、1階に陳列されていたはずのMacBook Airには目もくれず3階の会場に向かってみれば、座席にはまだ余裕があって一安心。最前列で講演を聞かせていただくことにしました。参加の動機？講師の菊池さんとは、昨年Web 2.0 Expoで初めてお会いしましたが、その前からmicroformats.bizの運営をはじめ、氏の活動にはちょっと注目していましたので。

話の内容としては、iPod touchが世に与えた影響に始まり、それに特化したWebサイト構築をするうえで必要とされるであろうマークアップやスタイル付けがメイン。CSS3というよりはむしろ、WebKitの独自プロパティのお話が多かったかな。僕自身はiPod touchを買って持っていないし、またそれ専用のコンテンツ制作というのも経験がないので、:hover疑似クラスの代わりに-webkit-tap-highlight-colorプロパティを使うといったお話は参考になりました。と同時に、改めて<meta name="viewport" content="width = 320" />といった指定の必要性に疑問を抱きました。構造とプレゼンテーションの分離という考え方に反するし、そのmeta要素を書いた途端、最適化する対象以外の閲覧環境には何らかの不便を強いてしまう可能性が出てくるわけで。文書を特定の閲覧環境にlock-inさせるという意味では、X-UA-Compatibleと似た問題点を孕んでいる、ようにも感じられます。さらには、iPhone Dev Center - Apple Developer ConnectionのFollow Established Web Design Practicesにある

• Separate HTML, CSS, and JavaScript.
• Use well-structured and valid HTML. Make sure the HTML is valid by running a validator on it. See http://validator.w3.org/ or use the validation functionality built into your web development tools.

と微妙に矛盾を感じなくもないな。いや、書かれていること自体は至極真っ当だと思うけれど、その一方で同じページ中に<meta name="viewport" content="width = 320" />みたいなマークアップが例示されているのはどうなんだろう、と。サーバ側で先にUA振り分けをするといった前提ありきで、ほぼ確実にiPhone/iPod touch「しか」アクセスすることのない文書にこのmeta要素を書くぶんには、概ね問題ないと思うんですけどね。viewport関連の指定も、WebKit専用プロパティとして用意しなかったのは何か理由があるのかな......時間があれば調べてみます。ともあれ、菊池さんお疲れさまでした。

（2008-02-15追記）スライドが公開されているのに気づいたので、一応貼り付けておきますね（謎