chrome 50 の変更点
◆ 今回はあまりユーザ的には違いなさそう
◆ web開発者向けな変更がメインです
◆ web開発者向けな変更がメインです
chrome 50 が来ましたね
Chrome 49 の変更点を書いてからまだ 1 ヶ月ちょっとなので更新間隔が短く感じます
今回これといって普通に使う人からして違いが見つかりませんでした
見つかれば追加していきます
input の文字
前に入力したことあるのが 候補に出ますがその文字が太文字になります
前
50
input のデフォルトの横幅もちょっと広くなってます
ここからは chrome を使ってデバッグしたりなにか作ったりする人向けです
new Date のバグが修正された
49
「Sun Mar 06 2016 12:53:56 GMT+0900 (æ±äº¬ (æ¨æºæ))」
50
文字化けしていたのが直りました
擬似クラスのON/OFF が 「:hov」に
これまでピンマークでなにかよくわからなかったのが 「:hov」 になって :hover とかを設定できるものだとわかりやすくなりました
履歴からの補完が見やすくなった
前回の追加機能の履歴からの補完ですが どれが履歴で どれが実際に存在するものなのかわかりづらかったです
それが 履歴はコンソールっぽく 「>」 がついてわかりやすくなりました
49
50
いろいろ deprecated なものが消えました
くわしく
気にしたほうがいいのは Object.observe の削除です
便利機能だったので使っていた人もいるかもですが ES の提案から取り下げられて 消される予定とは言われていましたが 思いの外早かったです
たしか 最近の フレームワークでは使われておらず 使用率も少ないからというのが理由になっていたと思いますが Chrome だけにあっても 他で使えない以上使う人はごく一部だと思うので 正式な機能にならないうちに使用率なんて言われても と思うのですよね
正式に決まってからが多くの人が使い始めて人気が出てくると思います
フレームワークが取り入れないと言ってもフレームワーク使わない人のほうが多いし フレームワークになってくると IE も対象にしないといけなかったりで 人気無いから取り下げと決めるのは早すぎです
あとのものは ほとんど聞いたこともないようなものなので あまり困らなそうです
追加もいろいろです
canvas ではデータを blob 化できるようになりました
あまり使いどころがわからないです
ダウンロードなら data uri スキームをクリックすればいいですし blob にする必要もないですし
また blob から canvas へ直接書き込みができるようになりました
こっちは便利そうです
URL の画像をキャンバスに書き込みたいときは
くわしく
通知機能では アイコン付きのボタンや通知を閉じた時のイベントや再通知機能が増えました
くわしく
web アニメーションの機能がいろいろ改善されました
web animation では JavaScript で簡単にアニメーション制御ができます
要素に animate メソッドを使うだけです
jQuery なんていらないです！
返り値のオブジェクトの onfinish プロパティに関数を設定するとアニメーションが終わると呼び出してくれます
途中でキャンセルや一時停止 逆再生もできます
くわしく
新機能かと思ったら前からあったんですね
知らなかったです……
また DOMTokenList に support メソッドが追加されました
こんな風に使うようです
sandbox や relList は DOMTokenList です
では 同じ DOMTokenList ですが supports メソッドが意味なさそうな classList にやってみます
エラーになりました
DOMTokenList のメソッドといっても 使える場合と使えない場合があるようです
Chrome 49 で コンソールにオブジェクトを表示した時にどの関数のインスタンスかがわかりづらくなっていたのがちょっと改善しました
48 まで
49
50
Element では 直りましたが Date はそのままです
@@toStringTag を見てみると
undefined になっています
自分で設定すると
ちゃんとなりました
わざわざ自分で設定するほどのところではないですが Object {} と表示されるとみづらいときは一時的に設定するといいかもです
Chrome 49 の変更点を書いてからまだ 1 ヶ月ちょっとなので更新間隔が短く感じます
今回これといって普通に使う人からして違いが見つかりませんでした
見つかれば追加していきます
input の文字
前に入力したことあるのが 候補に出ますがその文字が太文字になります
前
50
input のデフォルトの横幅もちょっと広くなってます
ここからは chrome を使ってデバッグしたりなにか作ったりする人向けです
new Date のバグが修正された
49
「Sun Mar 06 2016 12:53:56 GMT+0900 (æ±äº¬ (æ¨æºæ))」
50
文字化けしていたのが直りました
擬似クラスのON/OFF が 「:hov」に
これまでピンマークでなにかよくわからなかったのが 「:hov」 になって :hover とかを設定できるものだとわかりやすくなりました
履歴からの補完が見やすくなった
前回の追加機能の履歴からの補完ですが どれが履歴で どれが実際に存在するものなのかわかりづらかったです
それが 履歴はコンソールっぽく 「>」 がついてわかりやすくなりました
49
50
いろいろ 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)
ctx.drawImage(img, 0, 0)
URL の画像をキャンバスに書き込みたいときは
fetch(url)
.then(res=> res.blob())
.then(blob => createImageBitmap(blob))
.then(img => ctx.drawImage(img, 0, 0))
と書けます.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
}
これでフェードアウトができますanim.onfinish = function(eve){
elem.hidden = true
}
要素に animate メソッドを使うだけです
jQuery なんていらないです！
返り値のオブジェクトの onfinish プロパティに関数を設定するとアニメーションが終わると呼び出してくれます
途中でキャンセルや一時停止 逆再生もできます
くわしく
新機能かと思ったら前からあったんですね
知らなかったです……
また DOMTokenList に support メソッドが追加されました
こんな風に使うようです
var iframe = document.createElement("iframe")
console.log(iframe.sandbox.supports("allow-scripts"))
console.log(iframe.sandbox.supports("allow-scripts"))
var link = document.createElement("link")
console.log(link.relList.supports("stylesheet"))
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.(…)
Uncaught TypeError: Failed to execute 'supports' on 'DOMTokenList': DOMTokenList has no supported tokens.(…)
エラーになりました
DOMTokenList のメソッドといっても 使える場合と使えない場合があるようです
Chrome 49 で コンソールにオブジェクトを表示した時にどの関数のインスタンスかがわかりづらくなっていたのがちょっと改善しました
48 まで
Element.prototype
// Element { }
Date.prototype
// Date { }
// Element { }
Date.prototype
// Date { }
49
Element.prototype
// Node { }
Date.prototype
// Object { }
// Node { }
Date.prototype
// Object { }
50
Element.prototype
// Element { }
Date.prototype
// Object { }
// Element { }
Date.prototype
// Object { }
Element では 直りましたが Date はそのままです
@@toStringTag を見てみると
Element.prototype[Symbol.toStringTag]
// "Element"
Date.prototype[Symbol.toStringTag]
// undefined
// "Element"
Date.prototype[Symbol.toStringTag]
// undefined
undefined になっています
自分で設定すると
Date.prototype[Symbol.toStringTag] = "Date"
Date.prototype
// Date { }
Date.prototype
// Date { }
ちゃんとなりました
わざわざ自分で設定するほどのところではないですが Object {} と表示されるとみづらいときは一時的に設定するといいかもです
