HTML5 Conference 2012レポート #html5j

2012年9月8日(土)に慶應義塾の日吉キャンバスで行われた、HTML5 Conference 2012に参加してきました!
光栄なことに公式レポーターに選ばれ、終わった後の打ち上げにも参加させてもらいましたので、その様子も交えてレポートです。

基調講演

Googleの及川さん、白石さんのお二人で行われた基調講演。

及川さん(プーさん?)

白石さん

Web技術の過去・現在・未来について

Googleのプロダクトを中心に、HTML5関連技術やWebアプリケーションの歴史を振り返りました。

  1. Gmail、Mapsの衝撃
  2. WebアプリケーションからローカルへアクセスするためのGearsの登場
  3. Googleが作ったブラウザChrome
  4. iOSのFlash非対応発表(Apple Shock)
  5. スマートフォン・タブレットの普及
  6. WebGL、WebIntents、WebRTCの仕様策定
  7. Windows 8/IE10の誕生
  8. WebComponentsでコンポーネント化

GmailやGoogle Mapsの誕生は、その後のWebアプリケーションに多大なる影響を与え、GearsはHTML5にも引き継がれている。Googleすごい!

iOSのFlash非対応によって、これまでFlashで対応していたビジュアル部分を、HTML5やJavaScriptで対応するのが今となっては普通になっている。Android版のFlashの新規配布も終了しているので、モバイル界隈はHTML5に完全に移行しましたね。

そして、もうすぐWindows 8/IE10が正式リリース。
WebComponentsによって、Webアプリケーションもコンポーネント化が進みます。

HTML5マークアップ珍プレー集

羽田野さんのHTML5でマークアップしているけど、使い方が間違っているサイトを紹介するセッション。

Google, Facebook, Apple, Microsoftなど有名なサイトでも間違いはある。
適切なマークアップを行う為に、HTML5の理解が必要ですね。

中でもalt属性に入れる内容は、納得してしまいました。
仕様書には、電話越しの相手にそのimgを説明する文章を入れるのが良いとされているそうです。でも、タイトルを入れがちですよね…

実践Sass

以前からSassを実務で利用されているNHNのお二人(上村さん、富田さん)のセッション。

Sassの導入や運用

複数人で対応する場合に、ユーザー毎にファイルを作って、@importで結合する。

CUIでSassを実行されているそうですが、Compassの方が、設定ファイルをバージョン管理しておけば、環境差が出なくて良いとのこと。

独自ライブラリの作成

NHNでは、独自のライブラリを作っている。

Compassをベースにして、独自ライブラリを作り、Sassを利用するのが良いとのこと。

Sass3.2

そして、Sass3.2以降に追加されている新機能に魅力的なものがいくつかありました。Placeholder Selectorsはすぐにでも使いたい機能です。

継承する為だけに作られているスタイルは、従来ならCSSへ出力されていましたが、3.2から追加された、Placeholder Selectorsを利用すれば、それを回避することが出来ます。
例えば、%始まりでセレクタを指定しスタイルを書いて、@extendすれば、%はじまりの方はCSSファイルに出力されないようですね。
詳しくはPlaceholder Selectors: %foo@extend-Only Selectorsから。

Sassが使えない人がプロジェクト内にいる場合

また、先方がCSSを編集したい場合などのSassが触れない人がいる場合への対応が、個人的には一番関心してしまいました。
通常はSassファイルを編集するのですが、それとは別にCSSファイル(例えばtmp.css)を1つ用意しておくとのこと。
Sassファイルを編集できない方にはtmp.cssを編集してもらうことで、Sassが触れない人でも、CSSの変更が可能になる。
もちろんそのCSSファイルの編集は定期的にSassへ反映する必要があるのですが、これはなかなか良い手ですね!

HTML5によるタフなモバイル開発の最前線

DeNA 紀平さんによる、HTML5を利用したスマートフォンの対応について。

HTML5でアニメーションを行うには、CanvasかCSS3を利用しますが、機種の互換性を考えるとCanvas利用が良いよね!とのこと。
実際、DeNAの作っているライブラリは、全てCanvasを利用している。

Canvas利用で問題になるのは、速度・メモリ・電池の3つ。

ネイティブアプリ vs Webアプリ

ネイティブアプリ vs Webアプリ

現時点では、やはりネイティブアプリの方が優勢。しかし、優れたWebアプリが登場すれば逆転するかもしれない。今の状況は、GmailやMapsが登場する前の状況に似ている。とのこと。

スペシャルセッション

LTを幾つか。

d3.js

d3.jsは、今後使うかも。
d3.js(Data-Driven Documents)は、グラフを描くためのライブラリで、複雑なものも描ける。素晴らしいです。
使用例が結構あったので、詳しくはhttps://github.com/mbostock/d3/wiki/Galleryで。

HTML5クイズ

WebSocketを使った?某感謝祭ような、HTML5に関連するクイズ大会がありました。クイズ大会というよりも早押し大会になってましたが笑

打ち上げ!

キャンパス内にあるHUB(なんであるんだろ?)で行われた打ち上げ。非常に盛り上がりました!

HTML5とCSS3ケーキ!

イベントの最後に行われたHTML5クイズ大会の賞品だった登壇者のサイン入りTシャツ。

おわりに

html5j.orgとして初の主催、運営の皆さまお疲れ様でした。
微力ながら公式レポーターとして、サポートさせて頂きました。
公式レポーターとして書いた記事は提出して、ご確認頂いているところです。そのうち公開されると思います。

スタッフや登壇者が着ていたTシャツと公式レポーターの名札。
名札に「PRESS」と書かれていたので、本物のプレスさんと何度か間違えられました(汗
そういえば、なんで「W3C 2011」なんだろ?

公式レポーターとして、記事を書くのは、個人のブログとは違って非常に緊張しましたし、難しかったです。
曖昧な表現、言い回し、校正、文字数など気にしなければならないことが多いです。もちろん気をつけてはいたのですが、何度か戻しを頂いて、修正も行なっています。
担当の方にはご迷惑をお掛けしました。この場を借りてお詫び申し上げます。

初めての体験で色々戸惑いもしましたが、裏側も覗けて楽しかったです。機会があればやってみてはいかがでしょうか。出会いもありますよ。

コメントは受け付けていません。