2014/04/23更新

[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM

このエントリーをはてなブックマークに追加            

こんにちは、@yoheiMuneです。
4/10のThe Chromium Blogによると、Chrome 35 betaがリリースされたようです。β版ということは、次のメジャーバージョンにも反映される内容です。
かいつまんで、Chrome 35 betaでの追加/削除された機能をメモ的に残したいと思います。

画像

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



Chrome beta版のインストール

この記事で扱う機能は、Chrome 35 betaに搭載された機能です。そのため、安定板Chromeのバージョンが35になるまでは、β版で試す必要があります。 β版のインストール先を下記に記載しますので、そちらよりダウンロード&インストールしてみてください。

https://www.google.com/intl/en/chrome/browser/beta.html

また、chrome://flagsから、「JavaScriptの試験運用機能を有効にする」を有効にする必要があります。



TouchとZoomをより柔軟にコントロールする

touch-action CSS propertyを使うことで、タップスクロール、ピンチによるズーム、ダブルタップによるズーム、といった挙動を選択的に制限することができるようになります。 これは、300ms click delay on mobile問題への対応や、精度の高いフリック、polyfills of Pointer Eventsなどに使えるようです。 またこれは、将来的にスクロールやズーム動作が、main threadを妨げないための布石ともなっているようです。



JavaScript

たくさんのECMAScript 6の機能がサポートされました。これらの機能を使うことで、より明快に、より強力に、よりメモリに優しいコーディングが可能となります。 注目されているPromiseはまだサポートされていませんが、近い将来に実装されるようです。

またWeakMapWeakSetは、その名前の通り格納するデータに対して弱い参照を保持するデータ構造です。これを用いることで、Map内やSet内にしか存在せず、他から参照されていないようなデータについては、ガーベッジコレクション対象となり、メモリリークを防ぐことができます。Firefoxでは既に利用可能なようですね。

Object.observe(obj, func)を使えば、JavaScriptのオブジェクトを監視することができ、監視対象のオブジェクトに変更があると、通知を受けることができます。これを使うことで、setTimeoutなどで対象オブジェクトを定期的に監視するようなコードを書く必要がなくなります。便利ですね。



プレフィックスなしでShadow DOM

Shadow DOMは、Web Componentsで定義する機能の1つです。Webコンポーネントを使うことで、以下のようなことを行うことができます。
  • HTMLやCSSにスコープの概念を持ち込むことができ、モジュール内にスコープを限定することができます。その結果、既存のモジュールとCSSがぶつかるといった問題を回避することができます。
  • Custom Elementを作ることができます。



その他の新機能

  • CSS Font Loadingの機能を用いて、フォントを読み込むことができるようになりました(デモ)。必要な時にロードすることができ、ロードが完了した際に通知を受けることができます。
  • SVGのPaint Order Propertyを用いることで、fill、stroke、markerの描画順を指定することができるようになりました。
  • Web Audio APIがベンダープレフィックスなしで使えるようになりました。



削除された機能

Web健全性のため、またChromeの将来の進化のため、セキュリティ向上のために、削除された機能もあるようです。以下、列挙しておきます。
HTMLVideoElement-specific prefixed fullscreen APITextTrackCue constructor<isindex>Legacy Web Notificationssupport for NPAPI on LinuxAttr.isId, ownerElement, prefix setterです。

より詳しい情報は、mailing listで「Intent to Remove」や「Intent to Deprecate」のスレッドを参照してください。



将来削除予定の機能

Chrome 36では、window.showModalDialogが削除されるようです。IE6の頃に良く使ったなぁと思い出します。理由は、セキュリティ向上のため、実装が大変、ほとんど使われていないの3つのようです。より詳しい情報は、DEV.OPERAで解説されています。

他にも、 Element.setAttributeNodeNSoverflowchanged EventHTMLSourceElement.mediaMediaError.MEDIA_ERR_ENCRYPTEDPrefixed media source extensionswebkitRequestAnimationFrame、 が削除予定のようです。



最後に

Chromeは仕事で使う中心的なツールの1つなので、しっかりと機能の増減についてはキャッチアップしていきたいとことです。 またChromium Blogの記事にはたくさんの関連リンクが掲載されており、それらを1つずつ見ていくのも本当に勉強になります。ぜひ見てみてください〜☆

最後までご覧頂きましてありがとうございました。





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

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

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