[フロントエンド]Chrome39リリース内容まとめ。Generator、Web Animation Playback Control, Web Manifestなど

こんにちは@yoheiMuneです。
10/9にThe Chromium BlogでChrome39ベータリリースが発表されました。今日はこのリリースでのChromeの変更点を書きたいと思います。

Special Thanks to https://flic.kr/p/6MsR3

目次

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

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

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

ECMAScript6のGenerator

ECMAScript6におけるジェネレーター（Generator）がサポートされました。 function*とyieldという新しく定義されたものを利用して実装を行います。 ジェネレーターを用いることで、イテレーション処理について以下のような実装を行うことができます。

// フィボナッチ数列を算出するジェネレーター
var fibonacci = function*() {
    var pre = 0, cur = 1;
    for (;;) {
      var temp = pre;
      pre = cur;
      cur += temp;
      yield cur;
    }
}

// ジェネレーターから値を1件ずつ取り出す
var f = new fibonacci();
for (var n of f) {
    if (n > 1000)
        break;
    console.debug(n);
}

// またはジェネレーターのインスタンスはイテレーターなので、
// next関数を使うこともできます
var f = new fibonacci();
var time = 10;
while (time--) {
    console.debug(f.next().value);
}

上記のfor(;;)コードは一見無限ループを起こしそうですが、ジェネレーター（function*）の中にありyieldによって処理が停止するために、無限ループでプログラムが動作不能になることはありません。 JavaScriptの世界にはなかった仕組みなので、最初はとっかかりが難しいですね。

Web Animation Playback Cntrol

Chrome36から利用可能となったWeb Animationですが、今回のリリースでplay()やpause()やreverse()などのプレイバックコントロールが追加されました（Chromeの状態の確認はchromestatus.comが便利です）。Web AnimationはWeb上でアニメーションを実現するための統一的な手段を提供するものですが、例えば以下のような実装を行うことができます。

// アニメーション作成
var $elm = document.querySelector('h1');
var player = $elm.animate([
  {transform: 'rotate(-45deg) scale(1)'},
  {transform: 'rotate(0) scale(2)'},
  {transform: 'rotate(45deg) scale(1)'},
], {
  duration: 1000,
  iterations: 3,
  easing: 'ease-in-out',
  direction: 'alternate',
  fill: 'both',
});

// プレイバックコントロール
player.play();
player.pause();
player.reverse();

またPolymerで作成された、Web Animationのプレイバックコントロールのデモも存在します。進化中のAPIって感じで楽しいですね。

Web Application Manifest

Android Chromeなどにおいて、スマホ本体のホームスクリーンにWebサイトのアイコンを置く場合に、アイコンのパスなどを<meta>タグや<link>タグを多用して指定する必要がありました。そしてこれらを表示するどのページにも設定する必要があり、これはコードの煩雑化やネットワークの浪費に繋がっていました。
Chrome39からはWeb Application Manifestを用いることでそれらの重複した実装をmanifest.jsonなどのファイルにまとめることができ、その中に記載することで重複したコードを防ぐことができます。

// HTML
<link rel="manifest" href="manifest.json">

// manifest.json
{
  "name": "Web Application Manifest Sample",
  "icons": [
    {
      "src": "launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png",
      "density": "1.0"
    },
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png",
      "density": "2.0"
    },
    // 解像度ごとの指定・・・
  ],
  "start_url": "index.html",
  "display": "standalone",
  "orientation": "landscape"
}

上記のように記載することで、「ホームに追加」の振る舞いを実装することができます。
詳細はdeveloper.chrome.comを参照ください。<meta>タグなどの重複は、実務ではPHPなどの何らかのテンプレートファイルなどを用いて管理することが多いですが、Web上のネイティブ機能としても用意してもらえるのはありがたいですね。

その他のアップデート

上記以外にも、以下のようなアップデートが含まれています。

Beacon API

Chrome39からBeacon APIを用いて、Beaconの送信（ユーザー行動のトラッキングなどを目的にデータを送ること）をページ遷移などに関わらず行うことができました。 Beaconを送信したい場合には、例えば以下のように実装します。

navigator.sendBeacon('http://localhost/log', 'Sent by a beacon!');

より詳しい説明はhtml5rocksにて確認することができます。

Scroll Offset

高い解像度のデバイスに対応するために、スクロール位置（scrollTop、scrollLeft）は、小数点の値も含む精度の高い値を返すようになりました。

XMLHttpRequestのProgressイベント内の変数名変更

XMLHttpRequestのProgressイベント内において、loadedとtotalのプロパティを用いるために、positionとtotalSizeはduplicatedとなりました。

最後に

Chromium Dashboardを見ると試験運用としてService Workerの機能も追加されたようですね。Service Workerはオフラインを扱うための機能ですが内容がすごく濃いため、また別のブログで紹介したいと思います。

Chromeのアップデートは楽しい機能がリリースされるので、毎回本当に楽しみにしています。今回は少し地味目なものも多かったですが、いつも通りたくさんの新機能が登場しましたね。Chromium Dashboardを見る限り今後のアップデートもとても期待しています。

今後も本ブログでは、フロントエンドに関する情報を書きたいと思います。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。
最後までご覧頂きましてありがとうございました！