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を参照(英語)。プルリフレッシュなどの機能を無茶せず作れるようになるとのこと。

  • scrollTopoffsetHeightなどのCSSは、ブラウザがズーム表示されている時に、long値ではなく、float値を返すようになったようです。詳しくはChromiumのForum(英語)を参照。

  • WOFF2.0というWebFontのフォーマットをサポートしたようです。WOFF1.0に比べて圧縮率が良く、平均30%程度サイズを削減できるようです。詳しくはChromiumのForumを参照。

  • ディベロッパーツールで、タッチイベントを正確にエミュレートできるようになったようです。これでAndroid Chromeなどのテストもちゃんとできるよーと。詳しくはRick Byersさんのコメント(英語)を参照。

  • CSS Transformがベンダープレフィックスなしに利用可能になったようです。詳しくはChromiumのForum(英語)を参照。



最後に

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。