読了: 約 3 分

先日サイバーエージェントで行われたFrontrend x Chrome Tech Talk Night Extendedに参加しました。
Googleからフロントエンド界隈で知らない方がいないだろうというお三方が参加していて、パフォーマンス、画像処理、デバック等のツール紹介と具体的な方法等についてのプレゼンテーションで非常に面白かったので色々ご紹介されていたURLと共にメモしておきます。

スクリーンショット 2013-11-04 10.39.19

描画・アニメーション

setintervalを使ってアニメーションを創るのではなく、requestAnimationFrameを使った方がいいというセッションで紹介されていたjquery-requestanimationframe。

 

gnarf/jquery-requestAnimationFrame · GitHub

デバック系

Googlerの方々も仰っていましたが、今はモバイル端末が異常な程増えていて、これからもどんどん増えて行く。
androidとか異常に増えていますが、そうした現状の中、開発者にとって一番大変なのが、各端末のデバッギングですね。と。
ですからそこを簡単にするためのツールやフレームワークを導入して、楽にしましょうという事ですね。

Telemetry: Performance testing framework – The Chromium Projects

Androidのremoteデバックのページですが非常に詳しいのでデバックする時は参考になります。
Remote Debugging on Android

macbre/phantomas · GitHub

jsHybugger | Android debugging for HTML5, CSS and JavaScript

Cross-Browser Testing Tool – BrowserStack

バーチャルマシーンの日付の設定を変更している所です。今作っているアプリケーションではサーバーと時間の設定がずれているとloginできないため。
スクリーンショット 2013-11-14 13.52.28
androidの各種端末はこのように選択する事が出来ますが複数同時は無理です。
スクリーンショット 2013-11-14 14.11.14

  • 複数端末でないし起動がクソ遅いのでdebug toolまだ実用的ではないかなというのが使ってみた印象です。androidのデバックは数多い端末でやるので早くやりたいので。
  • simulatorも遅過ぎてちょっと辛いですね。

BBC-News/wraith · GitHub

Huddle/PhantomCSS · GitHub

Ghostlab

Emmet LiveStyle — live bi-directional CSS edit of new generation

Adobe Edge Inspect | Edge Tools & Services | Adobe & HTML JP

Remote Preview

LTで話されていた系のブクマ

JavaScriptを使って飛行機を飛ばすものをnode.jsで作りましたよーというもの。
デモプレイも実際行っていたのですが、風の音だけで自分のイチからは見えずに残念。。。

studiomohawk/node-gyro-cli · GitHub

こちらは、マークアップエンジニアの谷さんがご紹介されていたWeb Components。
アプリケーションの開発スピードが早い場合、特にスタートアップや新規のサービスを作っているときは大概そうですが、
作った部品を使い回したり、影響を限定して改修したりしたいわけですが、そのためにWEB componentsがあります。
タグに特別な書き方をして使います。

Web Components!

Web Components in Action

web componentsを使用する場合下記のpolymerをinstallしてから使用します。

yeoman/generator-polymer · GitHub

ちょっと試してみました。
インストールが終わるとこんな感じになります。
yo polymer