HTML5minutes! #2に参加してきた

HTML5minutes!というイベントが近場であったので参加してきた. フロントエンドよりのイベントに参加するのは初めてだったので, なんかちょくちょくいくあたりのイベントの雰囲気との違いに困惑した. 具体的に言うとなんか明るい感じだったw. 人間的にゴミな私にはまぶしい世界でした.

Vue.jsが最近流行っているといっていた人がいたので, なんか自分の調査はあながちまちがっていなかったのだなぁと安心できたので行ってよかった.

クライアントサイドの実装についてもっと聞きたかったなぁ.こんなフレームワーク使ってますよっていうのはよく聞くんだけど,じゃあそのフレームワーク使って,どんなアプリケーションをどういうふうに実装しているのかが知りたい今日この頃….

ちなスライドをみつけたやつはリンクを貼った.HTML5でつくるデジタルインスタレーションはすごかったなぁ〜.

以下要約.なお速記のため書けてないところアンド, 自分が理解できてないところはまるまる空白の模様.

モバイル時代のWebパフォーマンスTips

基調講演(19:35〜20:05)吉川 徹氏(html5j 新リーダー)

  • html5に足りないところ
    • Performance: especially mobile
    • APIs: power management / wifiなど…
    • Tools
  • なんでhtml5で書いたか
    • cross platform

WebパフォーマンスTips

  • リソースの最適化
    • 画像圧縮
    • JS, CSS minify
  • リクエスト数をおさえる
    • モバイル回線に置いては200msec/req増えるくらいコストが高い
    • JS/CSS結合,画像の埋め込みなど
    • DNSプリフェッチ: 事前にDNS Lookupを済ませてキャッシュしておく
  • リダイレクトを避ける
    • 同一URIで複数UAに対応
  • レンダリングの優先度
    • jsはレンダリングをブロックするので最後に読み込む
    • ファーストビューリソースを最優先にロードする
    • 画像の遅延読み込み(lazy load)
    • progressive jpegなど…
  • Runtime
    • 角丸系,陰,opacityなどの変形や等価処理をおさえる
    • アニメーションを避ける
    • requestAnimationFrameを使う(非対応ブラウザにはpolyfilがある)
  • DOMアクセスの最適化
    • DOMプロパティを変数のように扱わない(特にoffset*, client*, scroll*)
  • メモリの最適化
    • 最初に必要なメモリを確保するなど
    • 再利用可能なオブジェクトをオブジェクトプールへ

CSS Living Style Guide

  • 静的につくる: 納品時には死んでいる
  • ジェネレータなどで自動化(StyleDog/FrontNoteなど…)

FirefoxOSスマホ体験記

LTが始まると思ったらカラオケがはじまった

HTML5でつくるデジタルインスタレーション

  • Chrome/Web speech API
  • Googleの音声認識エンジン
  • ユーザによる許可はhttpsにすると1回で済む
  • 3D文字はWebGLでためしたがやめて,Three.jsのTextGeometry
  • Three.js: デフォルト日本語使えないが,ちょっとめんどくさいことするとできるようになる

jadeで作るclient template

  • クライアントテンプレート:データとテンプレートを用いて文字列を生成する
    • Mustache/Hogan.jsなど
    • jadeを使うという選択肢がある
  • jadeとは何か
    • html template engine
    • compile optionを指定するとjsにもコンパイルできる
    • browserifyを使用する

5分で分かるWebRTCコーデックウォーズ

  • WebRTCとは
    • ブラウザでデバイスリソースを扱える
    • プラグインレス
  • コーデックウォーズとは
    • IETFの標準化の現場で行われているビジネスチックな戦争
    • H.264とVP8
  • 標準コーデック決まらない問題
    • いろいろあったけどコーデックがまだ決まらない
    • お金・利権の問題
    • 今後も決まらない感じ

Angular.JSの高速化

  • Augular.js:パフォーマンス悪い
  • なぜか
    • 2 way data bindingに起因
    • Pure JS Objectを ViewModelとして使う
    • Dirty Checking
    • Angular 1.3からone-time bindingが導入されたー
    • PolymerでゆるふわMaterialDesign体験
    • Polymer: WebComponentsのUI Framework
    • MaterialDesign: Google I/Oで発表されたUI/UXガイドライン
    • platform.js
    • DEMO
bower install --save Polymer/polymer

かすたむ! ※コスプレ有り

ぜ か ま し

  • WebComponentsがアツい
  • Template/Custom Elements/ShadowDOM/Html Import
  • 実装はChromeのみ
  • Custum Elements
  • 独自のタグ作れる
  • <ni-so></ni-so> のタグ作れる!
  • <pantsu></pantsu> のタグ作れる!
  • <pantsu ichigo> とかできる!
  • 実用的なところでページネーションなんかに使える!
  • パーツの設計をしっかりしていればとても便利

HTML5でできるフォーム最適化

<input type="text" required>
<input type="email">
<input type="url">
<input type="email">
<input type="tel">
<input type="date">
<input type="color">

pattern:正規表現で指定できる

<input type="text" pattern="[regex]">

Node.jsでシングルページウェブアプリケーション

  • jsでDOMを構築,UI/UXに優れている
  • フロントエンドMV*フレームワーク

Sails.js

  • サーバーサイドJSMVCフレームワーク
  • CRUD標準
  • passport.js: twitterやFacebookなどの認可
npm install sails

詳しくはO’Rilly シングルページアプリケーション

公開しよう自作Web Components

  • HTMLタグを記述するだけなので潜在ユーザ多い
  • ブラウザに標準実装される予定で普及可能性が高い
  • 今のうちに好きなコンポーネント名を取ってHTML5技術者として名を売るチャンス
  • Web Components Gallary Siteがある
  • 手順
    • Polymerを勉強する
    • WebComponentsを作る
    • 書きそびれた
    • ReadMeをかく

Webサービス開発のモジュール設計

すごいディレクトリ構造参考になったけど,書き写す余裕はなかった.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください