この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
Chrome Tech Talk Night
先日Google Chrome Tech talk Night #4に参加してきました。非常に楽しく、刺激的なセッションとLTを見ることができました。自分の知らなかった素晴らしいツールやサイトの紹介もあったので、当日のメモを中心に、ざっとまとめておきます。ニュアンスと意訳で書いてる部分があるので、そんなこと言ってないよ！等ありましたら、ツッコミをお願いします
Session1：モバイルウェブのバリエーションについて
Boris Smus
多種多様なモバイルウェブを対象とするアプリケーション開発で、注意すべき事項や、UIの最適化のための様々な情報を紹介。
- スクリーン密度の違いによる最適化について
- 大きさやプラットフォームの違いによるレイアウトの最適化について
- Inputのバリエーションについて
画像の最適化について
- 同じ大きさで表示する画像において、「ピクセルサイズを落として品質を高めに保つ」よりも、「ピクセルサイズをそのままに品質を低め」に設定した方がきれいに描画される ⇒ large, compressed images
- 画像をスケーリングするときは、Manualでスケーリングする方が良い
- 複数の画像を用意して、端末の違いに応じて、最適な画像を用意する ⇒ 実現するためのjavascript libraryが豊富にある
- Media Queryを使う
- image-setを使う。ただし、SafariとChromeだけしか今のところ使えない
- src-setを使う。ただし、CSS4なので補完ライブラリを使う srcset-polyfill
Form Factor
- プラットフォームの違いよりもバリエーションが豊富(タブレットだったり電話だったり) ⇒ 大きさもそうだし、縦横も対応するとバリエーションはさらに膨大に
- Responsive Design！ ⇒ Demo
- MediaQueryでResponsiveな動きを実現しようとすると、少し制限があるので、Javascriptの中でMediaQueryを利用しよう
- スマートフォンに適したWebサイト構築。Google Webmaster
- クライアントサイドで判定してごにょごにょやるためのライブラリ device.js
- サーバーサイドで判定してごにょごにょやるためには。devicedatabaseを使おう！User-Agent文字列を解析して、デバイスの情報を得るみたい。APIが用意されてるものがいくつか
Input Variation
- モバイル独自の入力(Touch、ジェスチャ)
- Chrome Dev toolにはジェスチャをエミュレートできる機能があるよ
- Click, Mouseイベントには、300msの遅延があるのが良く知られてるよ。Touchイベントは遅延なし Faster Buttons
- 描画のタイミングは、ブラウザに移譲。AnimationFrameを使う
window.webkitRequestAnimationFrame - MouseとTouch両方使いたい時はどうする？ ⇒ PointerEventを使おう！ PointerEvents w3c Pointer.js
- ジェスチャの実装は超大変 ⇒ ライブラリが一杯公開されてるので使おう！ Touch Event Libraries
Session2: ウェブアプリケーション開発のワークフローと Yeoman
Paul Irish
Yeoman というツールの紹介とデモンストレーション。テスト、パッケージ管理やライブラリ管理など、開発が楽に、楽しくなるようなツールが満載でした。基本的にGithubに公開されているものを組み合わせて構成されているようです。ウェブアプリケーションの開発において、非常に強力なツールになりそうです。
終始、「楽しく開発しようぜ！」というメッセージがちらほら見られ、楽しんで開発している様子でした。
Yeomanはこんな要素が含まれているようです
- Compass, Sass, Coffeescript
- AMD Module support, RequireJS, ECMAScript6 Module experiment
- Bootstrap, Stripped HTML5 Boilerplate, Modernizr
- Twitter Bower
- Mocha, PhantomJS
- r.js OptiPNG, jpegtran, confess.js
自分も全て追いきれていないので、初見のものもありました。Webアプリケーション開発の世界は早くてなかなか追いきれません・・・
パッケージ管理
これが非常に強力そうです。yumやapt-getなどのように、インストールしたいjavascriptライブラリをsearchし、インストールすると依存関係を自動的に解決してくれます
Yeoman特徴
- Scaffoldをさくっと構築できる (Lightning-fast scaffolding)
- 編集を即座に反映（Live-recompile, Live-refresh） # 恐らくnode.jsによるpush通信によるものだと思われ
- Sass, Coffeescript, AMD & ES6 Modules (Automatically compile CoffeeScript & Compass, Support for ES6 module syntax)
- 言語チェック (Automatically lint your scripts)
- テストは、ブラウザでテスト、PhatomJSによるHeadless(スクリーンがない)テストが可能 (PhantomJS Unit Testing)
- 画像の最適化 (Awesome Image Optimization)
- Clound上のモバイルブラウザのエミュレータによる様々な端末のブラウザのテスト
- パッケージ管理によるライブラリのインストール、依存関係を解決 (Integrated package management)
まとめ
なかなか自分の知らないライブラリや最先端のウェブアプリの開発手法を知ることができ、貴重なセッションを聞くことができました。海外からは、Chrome 開発者の方々が来ていたり、各セッション後の英語や日本語での活発な質疑応答、懇親会での多くのLTなどもあり、非常に刺激を受けた勉強会でした
非常に楽しい企画をしていただいたGoogleの方々をはじめ、懇親会を沸かせたLTをされた方々、さらにChrome開発者の方々、ありがとうございました。
14
