Please Sleep

From notes on my laptop

25 Oct 2012

Chrome Tech Talk Night #4

Chrome Tech Talk Night #4 を開催します - Google Japan Developer Relations Blog

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

Variations on the Mobile Web (Boris Smus)

Variations on the Mobile Web - Google IO 2012

Boris Smus (borismus) on 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
  • 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 サポートチェックなどを使う
    • borismus/device.js
    • サーバ上でデバイス判定
    • ua でやる
    • device db
  • input variation
    • touch != mouse
    • dev tool でタッチイベントをエミュレートできる
    • touch event
    • mouse & touch 両方をサポートしたい
    • pointer event
    • mouse / touch event -> pointer event に変換される
    • borismus/pointer.js
    • ジェスチャーの実装は大変
    • ライブラリがたくさんある

Wonderous Web Dev Workflow & Yeoman (Paul Irish)

Wonderous Web Dev Workflow & Yeoman - Google IO 2012

Paul Irish (paul_irish) on Twitter

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

  • bulding web app with very enjoynable way
  • trivia to valuing tools
  • your shell
  • deploy on push
    • github の hook で
  • yeoman
    • Yeoman - Modern workflows for modern webapps
    • 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
  • style iteration & devtools
    • sass + livereload
    • chrome devtools support for sass
    • webstorm liveedit
  • Setapp | Share and discover insanely great tools
    • 好きなツールをシェア
  • 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