場所は日吉の慶応大学って事で、高校受験した時以来かも。
会場に入る手前で @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問正解して本もらってました。
そんなこんなでスタッフの方もたくさん。とても素敵なイベントでした。ありがとうございました。
