Google Developers Japan: Chrome Tech Talk Night #4 を開催します

Paul Irish はじめ Google の Chrome チームがやってくるとのことで, 話を聞きに行って来ました. インターネットで見たことある人がいろいろいてスター軍団という感じがありありです.

Variations on the Mobile Web (Boris Smus)

no title

Boris Smüs(@borismus)さん | Twitter

モバイルのウェブ開発をするにあたって対処しないといけない問題とその解決方法を紹介するという内容. どういう問題があって, その解決策にどういうアプローチがあって, それぞれにこういう pros, cons があって, というのを丁寧に説明してくれていて非常に面白かったです. トピックは mobile な web dev な方々にはおなじみなのかもしれませんが自分には新鮮でしたし, なにより問題に対処するアプローチを複数出してきてその中でのベストプラクティスを紹介してくれていたのでかなり興味をそそれれました. 遅刻して途中からしか聞けなかったのが悔やまれます.

• responsive-image
  • client side approach
    • js で src を書き換え
      • look ahead parser 対応がダメ
    • media query
      • 回線速度を考慮できない
  • server side apporech
    • ua で反映するしか無い
  • browser approach
    • image-set
      • 404 Not Found
      • 回線速度も考慮してくれる
      • まだ chrome, safari だけ
      • GitHub - borismus/srcset-polyfill: [Warning: not for production code]
• device variation
  • たくさんの端末にどう対応するか
  • one version to rule them all
    • デバイス間で差異が
  • a version for each evice
    • デバイス多すぎ
  • responsive design approach
    • css で条件わけ
    • 充分でないこともある
    • form factor に応じて切り替えたい
      • js でやる
  • multiple versions
    • tablet, phone などで分ける
    • modernizr の touch サポートチェックなどを使う
  • GitHub - borismus/device.js: Semantic client-side device detection with Media Queries
  • サーバ上でデバイス判定
    • ua でやる
    • device db
• input variation
  • touch != mouse
  • dev tool でタッチイベントをエミュレートできる
  • touch event
  • mouse & touch 両方をサポートしたい
    • pointer event
    • mouse / touch event -> pointer event に変換される
    • GitHub - borismus/pointer.js: [deprecated] Pointer.js consolidates pointer-like input models across browsers and devices.
  • ジェスチャーの実装は大変
    • ライブラリがたくさんある

Wonderous Web Dev Workflow & Yeoman (Paul Irish)

Google IO 2012

Paul Irish(@paul_irish)さん | Twitter

Yeoman の紹介を中心に, web 開発を楽に楽しくするツールの紹介. とにかく良さ気なツールやサービスが大量に出てきてお腹いっぱいになる発表でした. よさげなツールはあとで消化せねば...

• bulding web app with very enjoynable way
• trivia to valuing tools
• your shell
  • dotfiles/.bash_prompt at master ? paulirish/dotfiles ? GitHub
• deploy on push
  • github の hook で
• yeoman
  • The web’s scaffolding tool for modern webapps | Yeoman
  • package management
    • yeoman コマンドでインストールなど
    • 依存パッケージに新しいバージョンが出たら notify
  • generators
    • mvc ライブラリと連動していて, yeoman コマンドからコントローラーを足したりできる
  • Scaffold in a snap
  • Live-recompile, Live-refresh
  • Sass, Coffeescript, AMD & ES6 Modules
  • Run unit tests in headless WebKit via PhantomJS
  • Robust build script
• testing
  • in the browser
    • qunit とか
  • in headless webkit
    • pahtomjs
    • yeoman test
  • in cloud mobile browsers
    • Cross Browser Testing Tool. 1000+ Browsers, Mobile, Real IE.
    • GitHub - ryanseddon/bunyip: Automate client-side unit testing in real browsers using the CLI
  • make test more fun
    • nayncat
• style iteration & devtools
  • sass + livereload
  • chrome devtools support for sass
  • webstorm liveedit
• no title
  • 好きなツールをシェア
• continually learn how to develop better
• styled console message
• questions
  • 環境をどこまでめんどうみてくれるのか (sass だと ruby とか, node とか)
    • 最初に yeoman をインストールするときにチェックして, 必須のものが無ければインストールを促す
    • インストールを自動化するスクリプトもある
  • dependency を定義してインストールしてくれるようなものはあるのか
    • まだ無い
    • いずれ入る
  • dart や typescript などのサポート
    • まだない
    • yeoman は grunt.js 上で実装しているから拡張はわりと簡単
    • 自分で拡張することも可能
  • grunt から yeoman へのマイグレート
    • yeoman チームでも priority の高い issue
  • yeoman のパッケージインストール元. github 以外で, 例えば自前リポジトリを使えるようにできるか
    • bower が対応してくれている

LT

• opera のダニエルさんの visibility api の話が面白かった
  • Page Visibility API - Web APIs | MDN
  • Page Visibility
  • ページが visible かどうかを通知するイベント
  • タブがインアクティブの時はアニメーションを止めて cpu 負荷を下げたり, などの使い道がある
• Google Developers - YouTube
  • google の開発関連の生放送チャンネル
  • その場でコミュニケーションしたり投票したり