LoginSignup
5
5

More than 5 years have passed since last update.

@t-sato(t sato)inMercari

第66回 HTML5とか勉強会「Google I/O 2016特集」

Last updated at Posted at 2016-06-20

Official

Google I/O 2016年振り返り 及川卓也（Increments）

  • slide
  • Moble FirstからAI Firstへ
  • TPUとかプロセッサを開発可能なのはGoogleだけ
  • webは死んだか？
    • AndroidInstantApps
    • ChromebookからAndroidアプリが動作
    • return the web
    • webとアプリと相互互換
  • physicalWebとBeacon

PWAの開発パターン PRPL 小松健作（NTT Communications, Palo Alto office）

  • slide
  • PRPL
    • デザインパターンの一種
    • bundleファイルの肥大化の解決
  • PRPLは4つのテクノロジーで構成されている
    • Push
    • Render
    • Pre-cache
    • Lazy-load
  • 新しいテクノロジーを使用
    • CustomElement
    • HTMLImports
    • HTTP/2
    • ServiceWorker
  • サンプル
  • Toolbox
  • 実際PRPL使えるか？ -> 使えない
    • HTTP/2のpushはまだ未対応
    • bower使われてt、npm&webpackより煩わしい
    • HTTP/2のpushはブラウザキャッシュと愛称悪い
  • でも・・・
    • Bundleはベストプラクティスじゃない
    • 現状ツールがPRPLを取り入れていくことが必要

Webプラットフォーム周り＠I/O 2016 矢倉眞隆

ExtensibleWeb

  • Web技術でWebを拡張していく
  • 例: sw-toolbox
  • 遅いことをさせないようにメインスレッドを止めない
    • 必要な時に必要なものを提供
  • 止めてしまいがちなパターンには新しいAPIを提供
    • 例：IntersectionObservers
  • これからどうなっていく？
    • 標準だととっつきづらいものが多くなるかも
    • ライブラリで解決出来るレイヤーは優先度が低くなる
    • パフォーマンスを向上するAPIが増えていく

I/Oで紹介されたAPI

  • CredentialManagementAPI
    • パスワードマネージャーを透過的にAPIを作ってる
    • 自動ログインが可能になる
  • PaymentRequestAPI
    • モバイルでの決済時に打たなくてもいいようにする。
    • 決済サービスとも連携可能
  • CSS Houdini
    • CSSまわりのあれこれをJSのフックをつける
    • TypedOM：文字列操作ではないJSからのCSS操作
    • CustomProps:Variable2.0（イニシャライザがつく）
    • PaintAPI:描画用のコンテキストを提供
  • AMP
  • RichCards
    • Ruch Snippetsからの拡張

モバイルWebパフォーマンスのための3つのTIPS - High Performance Web UI 川田寛（ピクシブ株式会社）

  • slide
  • 2016年 Progressive Web App
  • 基本はUI操作
  • 同一ページ内でUIがコロコロ姿を変える。
  • RAILでいうRAを重要視される。（従来のwebはL)
  • 鉄板のUIコンポーネント
    • SideNavigation
    • SwipableCards
    • Expand & Collapse
  • SideNavigationをスルスル表示させたい
    • pointer-events: none （タップイベントを監視しない事で速度が速くなる。autoは最低限にイベント監視）
    • transrate（z）: メモリ上でTextureを置いて、GPUが処理する。
    • will-change: transform;
    • transform: translateX(-102%)
    • willl-cahnge:opacity
  • SwipableCardsをスルスル表示させたい
    • will-change:transform;
    • JSだとゲームループを応用
  • Expand & Collapseをスルスル表示させたい
    • これもtransform
  • 参考（Rendering performance）
  • CSSTrigers

Firebase I/O あんどうやすし（株式会社カブク）

WebFundamentalsの翻訳者になりませんか？ 田中洋一郎（Increments株式会社/Google Developers Expert Web担当）

5
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
5