第2回 HTML5minutes！ 〜triton-js〜 MEMO

基調講演 吉川 徹氏 【モバイル時代のWebパフォーマンスTips】

API

・APIが足りないためネイティブアプリを選択する

Tools, Education

・スキルセットがない人が実装するのは難しい

Performanec

・デスクトップでは十分
・モバイルはPCの1/5の性能しかない
・日々向上中
・ネイティブアプリに近づける努力が必要

Google I/O 2014

page load

・リソースの最適化
　webサイトの63%は画像
　モバイル回線ではとても重要　

・リクエスト数を抑える
　・HTTPリクエストはとても高コスト
　・1リクエスト増やすと200ms~1000ms増えるかも
　・JS,CSSは結合して1ファイルに
　・画像はCSS Spriteを使用
　・DNSプリフェッチを使う

・リダイレクトを避ける
　・scriptタグは最後に
　・スクロールで表示させるものは後回し
　・Lazy Loadを使う。

・レンダリング
　・変形や透過処理を抑える
　・過度な装飾は重い
　・border-radius,box-shadow,text-shadow,opacity
　・transformによる変形(移動は割りと軽い)

・requestAnimationFrameを使う
　・DOMアクセスの最適化
　・DOMプロパティを変数のように使わない
　・DOMプロパティへのアクセスは最小限に

・メモリの最適化
　・GCが発生しないようにメモリをコントロールする
　・最初に必要なメモリをすべて確保

パフォーマス改善：PageSpeed Insights

資料：slideshare

林 優一氏 LIG inc.【CSS Living Style Guide】

ちゃんとしたスタイルガイドは難しい
納品時には死んでいる。

・自動化させる grunt gulp
・FrontNote FrontNote npm
　・nodeで作られている
　・ラベルを付けれる
　・デモがない
　・テストは不十分
　・手伝ってくれる方募集

資料：slideshare

中島 俊治氏【FirefoxOSスマホ体験記】

・アプリマネージャーでアプリを作れる

本多 大和氏【Canvas × スクロール芸 × コーポレートサイト】

・声を実体化
・Web Speech AP(音声認識)Iを使用
・httpsにすることでchromeの認証を一度に
・3D文字はThree.jsが◎

資料：slideshare

太田 智彬氏【jadeで作るclient template】

・jadeはHTMLテンプレートエンジン
・ライブラリは必要ない
・コンポーネント管理ができる
・JSのコンパイルも可能
・MV*との相性が良い
・SPAのときに良い

資料：slide

仲 裕介氏【WebRTC】

・WebRTCはカメラやマイクをブラウザで使える
・Mandatoryが決まらない
・IETFによる標準化
・コーデック議論がたくさん行われている

資料：slideshare

kon Yuichi氏 【Angular.JSの高速化】

・Angularは遅い?
・$scopeによる 2wey data binding
・one-time- binding 変わらなそうなものは、一度だけ評価する

資料：slideshare

ヒヨシ ヨウスケ氏【PolymerでゆるふわMaterialDesign体験】

・polymerとはWebCompoents UIフレームワーク
・Material DesignとはUI/UXのデザインガイドライン
・bowerからPolymerとコンポーネントをインストール

鈴木 安美氏【かすたむ！　※コスプレ有り】

・Web Componentsが熱い
・template,custom Element,shadowDOM,Html importの4つ
・custom Elementは独自のタグを作れる
・独自の属性も作れる
・開発者以外も分りやすく管理がしやすい

資料：slideshare

金子 拓矢氏【HTML5でできるフォーム最適化】

・placeholderいいよ
・type=email でスマホのキーボードが変わる アドレスチェックができる
・tyoe=URL URLチェックができる
・type=tel 番号チェックができる
・type=date カレンダーが表示できる
・type=number 上限設定ができる
・type=lang レンジが表示できる
・type=color カラーピッカーを表示できる
・type=pattern 正規表現で入力形式を指定できる
・実装ブラウザは少ない

礒田 優氏【Node.jsでシングルページウェブアプリケーション】

・node.jsでのサーバー管理
・認証、データベースの設定、データ検証
・sails.js
　・RubyOnRailsライク

・認証
　・passport.js
　・データ検証
　・バリデーションの定義が不要
　・自分で設定もできる

手島 拓也氏【Web Componentsを公開しよう】

・なぜ公開するのか
　・普及する可能性が高い
　・HTMLタグを記述するだけなので潜在的ユーザーが多い
　・ギャラリーがまだ少ない

1,Polymerを勉強しよう
2,Web Compornentsを作る
　・タグ名を決める
　・attributeを決めたり
3,DEMOをつける
4,READMEをしっかり書く
5,bowerで登録

道家 陽介氏【Webサービス開発のモジュール設計】

・モジュール設定はしっかりやろう