2014/05/28更新

[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。

こんにちは、@yoheiMuneです。
5/22にThe Chromium Blog（英語）でChrome36β版のリリースが発表されました。ちょっと遅れましたが、36での機能の変更点について、ブログに書いておきたいと思います。

Special Thanks to https://flic.kr/p/nKFp2v

Chromeベータ版の入手、新機能の動作設定

Chromeのβ版は、以下から入手することが可能です。
https://www.google.com/intl/en/chrome/browser/beta.html

また、追加された機能によっては、chrome://flagsから、「JavaScriptの試験運用機能を有効にする」を有効にする必要があります。

element.animate()

W3CのWeb Animation 1.0の仕様に合わせた、JavaScriptでアニメーションを行う機能が追加されたようです。詳細はhtml5rocksの記事（英語）で解説されていますが、以下のような記述ができるようです。

var element = document.querySelector('#someElm');
element.animate([
  {cssProperty: value0},
  {cssProperty: value1},
  {cssProperty: value2},
  //...
], {
    duration: timeInMs,
    iterations: iterationCount,
    delay: delayValue
});

実際に、雪の降るアニメーションがサンプルとして実装されています（ポリフィル版はこちら）。自分が使ってみた感じだと、イーズの指定ができないとか、開始と終了の少なくとも2つを指定する必要があったりと、少し気になる点もありました。

HTML Imports

Web Componentsの仕様の一つで、Chrome31で初めて実装されたImportの挙動が、最新仕様に対応したようです。詳細は、html5rocksの記事（日本語）で解説されていますが、以下のように使うことができます。

<head>
  <link rel="import" href="/path/to/imports/stuff.html">
</head>

インポートした内容は、以下のようにJavaScriptから利用できます。

var content = document.querySelector('link[rel="import"]').import;

html5rocksの記事（日本語）を読むと、この機能が非常に重要であることが分かりました。

Object.observeのサポート

Canaryで利用可能であったObject.observeが、Chrome36βから利用可能になったようです。 JavaScriptオブジェクトを監視して、変更があったら、その内容を受け取る仕組みです。データバインディングが必要なフレームワークなどで特に便利とのこと。以下のように使うことができます。

// 監視対象のオブジェクト
var obj = {};

// 監視する
Object.observe(obj, function (changes) {
    changes.forEach(function (change) {
        console.log(change.type, change.name, change.oldValue);
    }); 
});

// 追加を検知する
obj.prop1 = 'aaa'; // => add prop1 undefined

// 更新を検知する
obj.prop1 = 'bbb'; // => update prop1 aaa 

// 削除を検知する
delete obj.prop1;  // => delete prop1 bbb

その他

タップスクロール時にtouchcancelイベントを発火しないようになったようです。詳細はhtml5rocksを参照（英語）。プルリフレッシュなどの機能を無茶せず作れるようになるとのこと。
scrollTopやoffsetHeightなどのCSSは、ブラウザがズーム表示されている時に、long値ではなく、float値を返すようになったようです。詳しくはChromiumのForum（英語）を参照。
WOFF2.0というWebFontのフォーマットをサポートしたようです。WOFF1.0に比べて圧縮率が良く、平均30%程度サイズを削減できるようです。詳しくはChromiumのForumを参照。
ディベロッパーツールで、タッチイベントを正確にエミュレートできるようになったようです。これでAndroid Chromeなどのテストもちゃんとできるよーと。詳しくはRick Byersさんのコメント（英語）を参照。
CSS Transformがベンダープレフィックスなしに利用可能になったようです。詳しくはChromiumのForum（英語）を参照。

最後に

Chromeの記事は毎回読むたびに、技術的に新しい発見があって、読んでいて楽しいです。ぜひ原文もご覧下さい。たくさんの興味深い関連リンクがあります！
最後までご覧頂きましてありがとうございました！