HTML5Conference2012にいってきました。

場所は日吉の慶応大学って事で、高校受験した時以来かも。
会場に入る手前で @yuji0316 に遭遇しました。

■ 基調講演

HTML5カンファレンスの概要的な話。1.5日で1000人集まったとか。

– 及川さんの話
2004年 WHATWG – XML云々よりもWebがアプリケーションとして的な。
2004年〜5年 – GmailやGoogleMap。アプリケーション的に振る舞う
2007年 – Google Developer Day。実は世界で一番最初は東京で開催された。Gears。オフライン操作。
2008年 – Chromeローンチ。
2010年 – iPhoneでFlashが動かない。HTML5加速。スマホやタブレットの普及
2011年〜12年 – もうイロイロ。
Web IntentsっていうAndroidのIntentと同じような機構とか。WebComponentsとか。
ブラウザはインターネット閲覧ソフトって言われるけど、
ゲームパッドの入力を受け取ってブルートゥースでラジコン操作とか。
　
さすが、ほほーぅって感じのお話でした。
　
　
■ HTMLとかCSSとかAPIとか
– HTML5
2011年5月 LastCall, 2012年3月にWorkingDoraft。ぼちぼち勧告へ。
いろんな大企業(MS, Adobe, Apple, Google)からEditorが集まってる。
　
– HTML.next
HTML5はクローズして勧告していく方向で。
こっちはWHATWG HTMLやいろんなところから提案を募っている。
例えば、
— モーダルとかポップアップとか。
— Responsive Images 解像度やピクセル密度ごとに画像を出しわけ。Retinaとソレ以外とか。
— inputタグで入力モードを指定する。inputmode=”numeric”とか。
　
– CSS
2011年CSS2.1勧告。ようやく。
2012年メディアクエリ勧告。ぼちぼちCSS3、4の時代に。
— ImageValues CSSのグラデーションを定義しているモジュール
　 →linear-gradient(blie, white)とかでグラデーションがサクっとできちゃう。
　
– Level4
— Image-set() Responsive Images系
— element() 任意の要素を画像化とか。
— Flexible Box Layout
　
– CSS4のセレクタ
— 親を選択する ul> !li > a { color: #c00; } で a を子に持つliをびっくり付ければ指定出来るとか
— :matches(article, section) >h1 { font-size〜〜とか。
なんかイイすねぇ。いっぱいdiv書かなくてよい系とか。
　
– API
もう色々ｗ
　
途中端折っちゃったとことか、もうちょい知りたかったなぁ。
にしても、まぁ、オンゴーイング感がハンパねっす。
　
　
■ 昼飯
なんと学食で使える500円券！

　
いろんなメニューがありましたが、

　
ガッツリLサイズのカツカレー食っときやした。確か460円とか。

　
　
実践Sass(NHNさんの事例紹介セッション的な)

講演者の方がEPUBの電子書籍でSassの本を出したらしい。
　
NHNさんは6-7割がMacでエディターもバラバラだったけど、
基本的には全員CUIが使える方向で。
　
SassにはCSSにはないコンパイルが必要。
今後はCompassで。Sassにはない拡張機能をもったフレームワーク。
config.rbっていうRubyなアレで設定する。
→コンパイルする時に引数のパスがどうのとかしなくてOK

環境差異(Win/Mac, Rubyのバージョン等)
→出力されるキャラセットが違う。”utf-8″と”UTF-8″とか。

SassにはGUIも用意されている
– Scout
Freeのツール。SassもCompassも対応。がサイトからDL出来るのなんか古くて微妙。
Githubに最新のインストールバイナリが上がってるのでそっちで。
Sass3.2の対応が遅かったがようやく。

– Compass.app
10ドル。インストール不要。Dropboxに入れておけば環境またいで(MacもWinも)使える。
　
– 複数マークアップエンジニアが同時作業したい。
上書きやコンフリクトの対策。
_suzuki_style.scss
_tanaka_style.scss
こんな感じで作業者ごとに分けてパーシャルにしとく。
_を頭につけるとパーシャルになる。インポートしてCSSにコンパイルすると一つのstyle.cssになる。
　
– CSSを直接触りたい
全員にSassをインストールするのは難しい。
CSSのディレクトリの中にSass管理外のCSSファイルを置いてそこでやってもらう。
CSSは分かるけどSassが分からないディレクターとか。定期的にマージすること。
納品先でCSSを編集されちゃって、修正や追加で戻ってきた時にSassが、、、
とかいう時にも使える。
　
– 修正箇所の見つけ方
ブラウザから判別できるのはコンパイル後のCSS。どのSass？ってなる時がある。
Sassをコンパイルするときに、CSSにラインコメントを入れられる。
　
– 圧縮の注意点
CSSは1行にコンパイルされるのでコンフリクトが発生した時にDiffとか1行なので無理的な。
　
– コードの保守性を上げる
Mixin, @extend, 変数、、Sassにある機能で。
SassのコメントはCSSにコンパイルすると残らないのでガンガンコメント残す。
　
– いくつか紹介(地味だけど便利なもの)
inline-blockのie6,7の対応のコード。
→グローバスな変数使って入れる入れないがコントロール出来る
　
– font familyの設定
毎回書くの面倒だからmixin。
@content(Sass3.2から)
mixinにしておけば一箇所にまとまるし、そこにハックのコメント書いておくとナイス

なんかハングルが出てきたのとかあったなー。韓国のエンジニアとも絡みってあるのでしょうか？
　
– TIPS
Global変数っていう仕掛けがない。
手前のブロックで上書かれると悲しい事になる。
ローカル変数の命名ルールを作ったり。
グローバル変数とMixinの引数は違うのよん、とか。
　
—
正直、コンパイルしてアスキーコード吐き出すってどうなの？って思ってたけど、
大規模にやるならメッチャいいな、と。Sass。
　
　
■ 軽快なウェブ開発(クックパッドの基盤系部署の人)

– HTML5範囲広すぎ
ドレンドを知る、試す => http://jsdo.it
　
– 開発環境
Macがオススメ。homebrewでnode.jsやrubyとか必要な環境が簡単に整う。
JSのテストをブラウザ立ち上げてテストするのはめんどくさい。
headlessで実行するツールを使う。capybara-webkitとか。Jenkinsとかで。
　
– travis-ci
githubと連携したCIツール
　
– JavaScriptをDOMから切り離して書くか？
JSはWebアプリにおいてはDOMを操作するもの。
んじゃHTMLでDOM用意してテストしなきゃいけないのか？タルい…
　
—
他にも色々お話はありましたが、個人的にはあんまりグッとこなくて。
講演者の方はJS界隈では有名な人で、以前JSの歴史的な講演を聞いた事があったけど、
今回よりも全然興味深かった気がします。もっと現場の泥臭い話とか聞きたかったなぁ。
　
　
■ HTML5によるタフなモバイル開発の最前線

– 今日のお題
モバイルブラウザで今出来る事に関する話
デブサミでもこの人の話きいたなー
　
– モバイルHTML5
iPhoneでFlashが動かないっていうのは本当に大きな出来事だったんだなぁ。
AndoroidでもFlashの新規配布は終了。
　
– ExGameのデモ
どっちがFlashかHTML5か分からないようなレベル
　
– ネイティブにはかなわない
WebGLってあるけどサポートしてる端末が少ない
　
– 描画。
1秒間に何フレームとかってのが重要
Canvas or CSS3 – 二択な状況。避けては通れない
　
– Canvas
Canvasの中身をJSで書き換え可能
　
– CSS3
GPUサポートなので高速で、デザイナーさんも書ける
端末間の互換性が微妙。GalaxyS3で動かないとか。
　
– 比較
Canvasは結構大変だからCSSを使う傾向が強い
使えるのであればCanvasを使った方が良い→DeNAのCanvas愛
　
ゲームだと起動しっぱなしになる。速度、メモリ、電池といった課題が発生
オンメモリCanvas。とにかくキャッシュ。キャッシュなくて空振りしても大した事にならない
GC対策。長く置いとくのとすぐ消すのとメモリを分ける
　
– スマホはメモリを使いすぎると落ちる。人は殴り続けると死ぬのと似ているｗ
iPhoneはiOS6になるとイイ感じに端末内情報が取れるようになる？
Androidはadbで。
＃iPhoneはJailBreakって選択肢も。
　
– メモリリーク
同じページに留まり続けてずっとJSを動かすようなとき
Chrome Developer Tool: Heap Snapshot
DOMやイベントリスナの登録解除忘れ。
console.logがデバッグ中だけーってのがある。オブジェクトをダンプするようなのは要注意。
　
– 電池の消費
電池はCPUのクロック周波数と連動する。Armの6と7でも違うし。
　
– Google MapsやGmailが出てJSが脚光を浴びた。スマホも？
日本のHTML5のモバイルは世界で最先端。鼻差くらいｗ
　
　
■ jQuery Mobileカスタマイズ自由自在

– コンセプトに合わせてデザインを
今時、普通のjQueryモバイルまんまのデザインはちと微妙。
jQueryモバイルを使ってるのがバレないようにするｗ
ThemeRoller で大まかなデザイン(フォント、背景色、各UIの色、角丸)
CSS使って細かく。
— ヘッダ(.ui-header .ui-title)
— ページ(.ui-header:ロゴとか, .ui-pageと.ui-content:背景色とか, .ui-content:パディングとか, .ui-footer:)
— ボタン(.ui-icon, .ui-btn:背景, .ui-btn-inner:大きさ, .ui-btn-text:フォント)
— リスト(スゲー複雑…)
これらをカスタマイズすればjQueryモバイルっぽさは無くせる
　
– 覚えておくべき2つのイベント
— pageinit : jQuery Mobileが最初に初期化されるときのイベント。loadイベントのかわりに。
— pageshow: 座標系さんやサイズ計算とかのライブラリの初期化
　
その他、Ajax周りに脆弱性とか、1.1.1でlocation.hrefにバグがあったりするよとか。
　
—
非常に聴き応えのある講演でした。
　
　
■ Lightning Talks
– ブルーライトの話(爆笑)

– Porkyというテストツールの話

– ディレクターさんの話

– フォントのレンダリングの話

– 営業資料をiPadアプリでという話

– グラフィックスの話(だったんでしょうか？ｗ)

– カヤックの人の話(アツかったす)

– Niftyの人のd3.jsの話

　
ってかYoutubeで見れるんですね。LT↓
[youtube https://www.youtube.com/watch?v=-gDNDTk3sZo&w=560&h=315]
　
　
■ クイズ
オールスター感謝祭的なゲーム。HTML5で出来てる。完成度高い。

↓こんな感じで、ほんとにテレビのアレみたい。

@yuji0316 は8問中6問正解して本もらってました。
　
そんなこんなでスタッフの方もたくさん。とても素敵なイベントでした。ありがとうございました。

　