10月23日、第32回目の「HTML5とか勉強会」はGREEさんのオフィスをお借りして開催しました。会場確保にご協力いただいたGREEの佐島さん、ありがとうございました。
今回のテーマは「HTML5 Conference 2012 Reloaded」とし、9月8日に開催された「HTML5 conference 2012」で好評をいただいた中からWeb制作者向けのセッションをピックアップして行われました。
本稿では、今回のイベントについてレポートします。
更に進化するCSSの表現力と新しいWebツール
はじめに、アドビシステムズの轟啓介さんより、CSS3の最新仕様やアドビのオープンソースプロジェクトへの取り組みについて紹介いただきました。
CSS3の新しい要素からCSS Regions、CSS Exclusions、CSS Custom Filtersの紹介がありました。
CSS Regionsはレイアウトとコンテンツを切り離してDTPのような表現をCSSで実現するためのものです。divなどで作られた複数のRegion（領域）にコンテンツとしての文字列を流しこむとレイアウトに応じて文字がフローします。これによって今まででは難しかった段組みのようなことが実現できるようになるとのことです。
CSS Exclusionsはコンテンツの文字をフローさせるレイアウト（形）を自由に設定できるようにするためのものです。これにより、雑誌のような見た目のページが作成できます。複雑な形状もSVGによって定義できるとのことです。
CSS Custom Filtersはシネマティックな視覚効果をCSSによって手軽に実現できるようにするためのものです。ページのトーンを変化させたり、3D的に変形させたりと色々な効果がCSSだけで実現できるとのことです。
これらの仕様や動作はアドビの「Web標準の推進」のページにて簡単に確認することができます。
また講演では、アドビが取り組んでいる4つのオープンソースプロジェクトについて紹介しました。
他にもWebPlatform.orgやWebkitといったプロジェクトにも積極的にコミットしているとのことです。
Adobe Edge Toolsについての紹介もありました。タイムラインで簡単にアニメーションを作成できる「Edge Animate」やコードエディタの「Edge Code」、モバイル端末検証ツールの「Edge Inspect」などなど、Web制作をもっと便利にしてくれそうです。
詳しくは後日公開予定の講演動画をご覧ください。講演で使われた資料はこちらになります。
パララックスでレスポンシブでjQuery Mobileなサイトのつくりかた
つぎに、CAモバイルの白石俊平さんにパララックスかつレスポンシブなサイトを作成した際の事例を紹介いただきました。
作成にあたって、次の課題をクリアしていったとのことです。
- パララックススクロールをモバイルで実現する
- レスポンシブで動きのあるサイトを作る
- レスポンシブで画像の多いサイトを作る
- jQuery Mobileを使うべきかどうか
- 定型タスクの自動化
パララックススクロールをモバイルで実現するにあたって、色々なライブラリを試したそうです。ですがiOSのSafariではonScrollイベントがうまく動作しないせいもあって既存のライブラリでは実現が難しかったと言います。最終的にはあるサイトで使われていた動きを参考にして、モバイルで動作するパララックススクロールのライブラリを作成したと説明しました。作成したScrollTween.jsはgithubで公開しているので是非使ってみてほしいとのことです。
講演では他にもレスポンシブ化のテクニックや、jQuery Mobileをどう使ったか、定型タスクを自動化するためのツールの紹介などがありました。詳しくは後日公開予定の講演動画や資料をご覧ください。
jQueryカスタマイズ自由自在 v1.2
さいごに、CAモバイルの吉川徹さんにjQuery Mobileのカスタマイズテクニックについて紹介いただきました。
jQuery Mobileはモバイルサイトを作るうえでとても便利なライブラリですが、そのまま使用してしまうとjQuery Mobileっぽさが全面に出てしまい、サイト全体の印象がサイトのコンセプトに合わないものになりがちだと言います。
カスタマイズの方法として、まずThemeRollerで大まかなデザインを決定したあとに個別のスタイルを変更していく方法があるとのことです。
カスタマイズのためには、次のことを意識して行うと良いと紹介されました。
- jQuery Mobileのスタイル構造を把握する
- テーマによるスタイルの変化や、状態や機能によって変化するスタイルを把握する
- デザインの主要な部分を占める「ページ」「ボタン」「リスト」に注目する
さらに高度なカスタマイズとして、オリジナルのUIを作成したりライブラリやツールを利用したりする方法もあるとのことです。そういった場合にはjQuery Mobileの装飾や動作から除外する領域を作成して、その領域の中で動作させると述べていました。
講演では他にもjQuery Mobileの詳細なカスタマイズ方法や、ライブラリを使う際の例と注意点が紹介されていますので是非後日公開予定の講演動画をご覧ください。講演で使われた資料も合わせてご覧ください。
最後に
レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@nakajmg）まで気軽につぶやいていただければと思います。
本勉強会は、毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方はぜひ参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので、こちらをご確認ください。また、コミュニティサイトhtml5j.orgも公開していますので、ぜひこちらもご覧ください。
