◆ 今回はあまりユーザ的には違いなさそう
◆ web開発者向けな変更がメインです

chrome 50 が来ましたね
Chrome 49 の変更点を書いてからまだ 1 ヶ月ちょっとなので更新間隔が短く感じます


今回これといって普通に使う人からして違いが見つかりませんでした
見つかれば追加していきます



input の文字

前に入力したことあるのが 候補に出ますがその文字が太文字になります


chrome50-input-01


50
chrome50-input-02

input のデフォルトの横幅もちょっと広くなってます



ここからは chrome を使ってデバッグしたりなにか作ったりする人向けです



new Date のバグが修正された

49
「Sun Mar 06 2016 12:53:56 GMT+0900 (東京 (標準時))」

50
chrome50-date

文字化けしていたのが直りました



擬似クラスのON/OFF が 「:hov」に

これまでピンマークでなにかよくわからなかったのが 「:hov」 になって :hover とかを設定できるものだとわかりやすくなりました

chrome50-hover




履歴からの補完が見やすくなった

前回の追加機能の履歴からの補完ですが どれが履歴で どれが実際に存在するものなのかわかりづらかったです
それが 履歴はコンソールっぽく 「>」 がついてわかりやすくなりました

49
chrome49-10


50
chrome50-complementation




いろいろ deprecated なものが消えました

くわしく

気にしたほうがいいのは Object.observe の削除です
便利機能だったので使っていた人もいるかもですが ES の提案から取り下げられて 消される予定とは言われていましたが 思いの外早かったです

たしか 最近の フレームワークでは使われておらず 使用率も少ないからというのが理由になっていたと思いますが Chrome だけにあっても 他で使えない以上使う人はごく一部だと思うので 正式な機能にならないうちに使用率なんて言われても と思うのですよね
正式に決まってからが多くの人が使い始めて人気が出てくると思います

フレームワークが取り入れないと言ってもフレームワーク使わない人のほうが多いし フレームワークになってくると IE も対象にしないといけなかったりで 人気無いから取り下げと決めるのは早すぎです

あとのものは ほとんど聞いたこともないようなものなので あまり困らなそうです



追加もいろいろです

  • symbol いろいろ
  • canvas の toBlob
  • createImageBitmap
  • notify の機能
  • animation
  • DOMTokenList の supports メソッド


canvas ではデータを blob 化できるようになりました
あまり使いどころがわからないです
ダウンロードなら data uri スキームをクリックすればいいですし blob にする必要もないですし

また blob から canvas へ直接書き込みができるようになりました
こっちは便利そうです
var img = createImageBitmap(blob)
ctx.drawImage(img, 0, 0)

URL の画像をキャンバスに書き込みたいときは
fetch(url)
.then(res=> res.blob())
.then(blob => createImageBitmap(blob))
.then(img => ctx.drawImage(img, 0, 0))
と書けます
くわしく


通知機能では アイコン付きのボタンや通知を閉じた時のイベントや再通知機能が増えました
くわしく


web アニメーションの機能がいろいろ改善されました
web animation では JavaScript で簡単にアニメーション制御ができます
var anim = elem.animate([ { opacity: 1 }, { opacity: 0 } ], 500);
anim.onfinish = function(eve){
    elem.hidden = true
}
これでフェードアウトができます
要素に animate メソッドを使うだけです
jQuery なんていらないです!

返り値のオブジェクトの onfinish プロパティに関数を設定するとアニメーションが終わると呼び出してくれます
途中でキャンセルや一時停止 逆再生もできます

くわしく

新機能かと思ったら前からあったんですね
知らなかったです……


また DOMTokenList に support メソッドが追加されました
こんな風に使うようです
var iframe = document.createElement("iframe")
console.log(iframe.sandbox.supports("allow-scripts"))
var link = document.createElement("link")
console.log(link.relList.supports("stylesheet"))

sandbox や relList は DOMTokenList です
では 同じ DOMTokenList ですが  supports メソッドが意味なさそうな classList にやってみます
document.body.classList.supports("test")
Uncaught TypeError: Failed to execute 'supports' on 'DOMTokenList': DOMTokenList has no supported tokens.(…)

エラーになりました
DOMTokenList のメソッドといっても 使える場合と使えない場合があるようです



Chrome 49 で コンソールにオブジェクトを表示した時にどの関数のインスタンスかがわかりづらくなっていたのがちょっと改善しました

48 まで
Element.prototype
// Element { }

Date.prototype
// Date { }

49
Element.prototype
// Node { }

Date.prototype
// Object { }

50
Element.prototype
// Element { }

Date.prototype
// Object { }

Element では 直りましたが Date はそのままです
@@toStringTag を見てみると
Element.prototype[Symbol.toStringTag]
// "Element"
Date.prototype[Symbol.toStringTag]
// undefined

undefined になっています
自分で設定すると
Date.prototype[Symbol.toStringTag] = "Date"
Date.prototype
// Date { }

ちゃんとなりました
わざわざ自分で設定するほどのところではないですが Object {} と表示されるとみづらいときは一時的に設定するといいかもです