Chrome 64 の変更点
◆ 開発向け変更多め
◆ 一般のユーザ向けは広告ブロックが改善されたみたいだけどいまいち条件がわからなかった
◆ 一般のユーザ向けは広告ブロックが改善されたみたいだけどいまいち条件がわからなかった
久々に変わったところを調べてみました
普通に使う分には 操作方法やボタンが増えたといった目に見えて変わったところはないようです
Ctrl-F の見た目とリンクの下線が変わってました
開発者向けツールが色々変わってました
といっても見た目の変化はまとめ方が変わった部分がほとんどで 選択要素の削除とフォーカスが増えたくらい
削除は Delete ボタンでよかったので フォーカスのほうが重要です
input 系に使うとフォーカスしてくれるので地味に便利です
63
64
実装はされていませんし 65 の devtools の更新に載っています
https://developers.google.com/web/updates/2018/01/devtools
使っていないので詳しくはわかりませんが 簡単に見たところでは devtools で更新した CSS の差分をローカルに保存することで変更を永続的に維持できる機能のようです
これで つい F5 を押して消してしまった！ が消えるのですね
また リロードして再度確認したいときに F5 したらもとに戻ってしまう だけどまだ元ソースを更新したくないってときなどに使えそうです
これまででもローカルとファイルマッピングしていれば 永続化できましたが これはソース自体を変えてしまうので一時的に別の色を試してみたいってときにはあまりむいてませんでした
なので ローカルの別ファイルでオーバーライドできる機能は嬉しい機能です
それに ローカルマッピングだとサーバで使用するソースを書き換えることができる必要があったので自分管理のサーバでだけ有効でした
この機能だとローカルファイルでオーバーライドするわけなので 好きなサイトに使えそうです
適当なウェブサービスでカスタムスタイル当てたいときに devtools でいじって CSS 埋め込みツールに差分 CSS を登録するわけですが この機能だとそれすらいらなくなりそうです
1 年くらい前に ***Observer 系を調べてたときに見つけて使ってみた記憶があるようなないような なのですが 64 で実装されたようです
気のせいだったのか Chromium で試したか Firefox で試したのか…… ResizeObserver という言葉に覚えはありますし どういう機能かも知ってるので使ったことあるのは間違いないと思うのですが
ついでなので他の ***Observer 系
このコードが書かれたページを開いて タブを切り替えて待ちます
alert が起きるとファビコンのところに青色の●がでます
このタブをアクティブにすると alert が表示されます
今回の変更は alert のみで confirm の場合は変わらず関数呼び出しのタイミングでタブが強制的に切り替えられます
また prompt は 56 からバックグラウンドだと遅延もなくその場で null が変えるようになっています
現時点のをまとめると
説明では tab-under というタイプの広告をブロックできるようです
これは 別タブのポップアップと同時に元タブも別ページに移動するタイプのものみたいです
とりあえずそういう動きをするページを作ってみました
mal.html
a1, a2 はそのページ側で両方のページを開きます
a1 は普通のリンクで Google に移動します
JavaScript のクリックリスナで同時に別タブで YahooJapan のページを開きます
a2 は target="_blank" つきなので別タブで Google のページを開きます
JavaScript のクリックリスナでは自身のページを YahooJapan へ遷移します
これでそれぞれクリックしてみましたが どちらもそのタブと別タブ両方でページが開かれました
そのページが 2 つを開く処理をしているならページ製作者の意図したもので ブロックする必要はない と判断したのかもしれません
そう思ってつくったのが a3 です
クリックすると mal.html を開いて mal.html 側から開いた元のページを遷移させます
これまででも noopener 付きで開くことでブロック可能な方法です
これもクリックしてみましたが 両方ともページが開かれました
「閲覧中タブと別タブの両方でページを開くこと」 じゃなくて 意図しない広告に飛ばされることを避けるために導入された機能らしいので Chrome がブラックリストを持っていて そこにマッチしたらブロックするとかなのかもしれません
mal2.html
こっちも特にブロックされませんでした
63 まではこれはエラーになります
もうひとつ名前付きキャプチャにも対応しました
こういうのです
ただでさえ長くてわかりづらい正規表現が長くなるし 名前つけないとわからないような複雑なのは使うべきじゃないと思うので 個人的はなくても良かったと思う機能です
あんまり好きじゃなく使える言語でも使ったことないので 使えるようになっても使わないような気がしてます
これのデフォルト値がこれまでの動きと異なる影響で 「y」 や 「/」 などの文字のところで下線が途切れるようになりました
フォントサイズが小さいと線がちゃんと表示できてないように見えて 大きくても途切れていて気持ち悪い見た目になりました
別記事
別記事
それが 64 ではお気に入りのように URL が表示される部分の内側にアイコンがでるようになっていました
常に出ているわけではなく検索バーを表示しているときのみアイコンが表示されます
アイコンを押しても閉じることもなく何も起きません
変に真ん中寄りになるより右上の端にいた昔のほうでよかったのに
他にも コンソールにサイドバーが増えたとか 要素の .focus メソッドに {preventScroll: true} を渡せばスクロールせずフォーカスできるようになったとか色々ありますが 残りは省略します
Ctrl-F の見た目とリンクの下線が変わってました
開発者向けツールが色々変わってました
Element タブの右クリック
右クリックメニューがちょっと変わってましたといっても見た目の変化はまとめ方が変わった部分がほとんどで 選択要素の削除とフォーカスが増えたくらい
削除は Delete ボタンでよかったので フォーカスのほうが重要です
input 系に使うとフォーカスしてくれるので地味に便利です
63
64
Override?
What's New によると一番目に書かれてる大きな機能なのですが 65 に延期になったみたいです
実装はされていませんし 65 の devtools の更新に載っています
https://developers.google.com/web/updates/2018/01/devtools
使っていないので詳しくはわかりませんが 簡単に見たところでは devtools で更新した CSS の差分をローカルに保存することで変更を永続的に維持できる機能のようです
これで つい F5 を押して消してしまった！ が消えるのですね
また リロードして再度確認したいときに F5 したらもとに戻ってしまう だけどまだ元ソースを更新したくないってときなどに使えそうです
これまででもローカルとファイルマッピングしていれば 永続化できましたが これはソース自体を変えてしまうので一時的に別の色を試してみたいってときにはあまりむいてませんでした
なので ローカルの別ファイルでオーバーライドできる機能は嬉しい機能です
それに ローカルマッピングだとサーバで使用するソースを書き換えることができる必要があったので自分管理のサーバでだけ有効でした
この機能だとローカルファイルでオーバーライドするわけなので 好きなサイトに使えそうです
適当なウェブサービスでカスタムスタイル当てたいときに devtools でいじって CSS 埋め込みツールに差分 CSS を登録するわけですが この機能だとそれすらいらなくなりそうです
ResizeObserver
要素のリサイズが起きたときに関数を実行してくれるオブザーバーです1 年くらい前に ***Observer 系を調べてたときに見つけて使ってみた記憶があるようなないような なのですが 64 で実装されたようです
気のせいだったのか Chromium で試したか Firefox で試したのか…… ResizeObserver という言葉に覚えはありますし どういう機能かも知ってるので使ったことあるのは間違いないと思うのですが
ついでなので他の ***Observer 系
- MutationObserver (ツリーを監視して子要素の変更や属性変更をトリガーに関数を呼び出してくれる)
- InteractionObserver (要素の一定の割合が画面内に入ったり出たときに関数を呼び出してくれる)
- PerformanceObserver (通信や画面表示などの performance 系のイベントをトリガーに関数を呼び出してくれる)
バックグラウンドタブの alert
バックグラウンドタブで alert が実行されたときに そのタブがアクティブになるまで遅延するようになりました<script>
setTimeout(_ => console.log(prompt("alert")), 5000)
</script>
setTimeout(_ => console.log(prompt("alert")), 5000)
</script>
このコードが書かれたページを開いて タブを切り替えて待ちます
alert が起きるとファビコンのところに青色の●がでます
このタブをアクティブにすると alert が表示されます
今回の変更は alert のみで confirm の場合は変わらず関数呼び出しのタイミングでタブが強制的に切り替えられます
また prompt は 56 からバックグラウンドだと遅延もなくその場で null が変えるようになっています
現時点のをまとめると
| alert | タブがアクティブになるまで遅延してアクティブになったら alert が出る |
| confirm | confirm を実行したタブに強制的に切り替え |
| prompt | prompt は出ないで null が結果になる (キャンセルや×で閉じたときと同じ返り値) |
ポップアップブロック
前から迷惑な広告をブロックする機能が 64/65 で導入されると聞いていたのですが いまいち詳しい条件がわかりませんでした説明では tab-under というタイプの広告をブロックできるようです
これは 別タブのポップアップと同時に元タブも別ページに移動するタイプのものみたいです
とりあえずそういう動きをするページを作ってみました
<!doctype html>
<div><a id="a1" href="https://www.google.com">Link</a></div>
<div><a id="a2" href="https://www.google.com" target="_blank">Link</a></div>
<div><a id="a3" href="mal.html" target="_blank">Link</a></div>
<script>
document.querySelector("#a1").onclick = ev => window.open("https://www.yahoo.co.jp")
document.querySelector("#a2").onclick = ev => location.href = "https://www.yahoo.co.jp"
</script>
<div><a id="a1" href="https://www.google.com">Link</a></div>
<div><a id="a2" href="https://www.google.com" target="_blank">Link</a></div>
<div><a id="a3" href="mal.html" target="_blank">Link</a></div>
<script>
document.querySelector("#a1").onclick = ev => window.open("https://www.yahoo.co.jp")
document.querySelector("#a2").onclick = ev => location.href = "https://www.yahoo.co.jp"
</script>
mal.html
<!doctype html>
<p>mal.html</p>
<script>
window.opener.location.href = "https://www.google.com"
</script>
<p>mal.html</p>
<script>
window.opener.location.href = "https://www.google.com"
</script>
a1, a2 はそのページ側で両方のページを開きます
a1 は普通のリンクで Google に移動します
JavaScript のクリックリスナで同時に別タブで YahooJapan のページを開きます
a2 は target="_blank" つきなので別タブで Google のページを開きます
JavaScript のクリックリスナでは自身のページを YahooJapan へ遷移します
これでそれぞれクリックしてみましたが どちらもそのタブと別タブ両方でページが開かれました
そのページが 2 つを開く処理をしているならページ製作者の意図したもので ブロックする必要はない と判断したのかもしれません
そう思ってつくったのが a3 です
クリックすると mal.html を開いて mal.html 側から開いた元のページを遷移させます
これまででも noopener 付きで開くことでブロック可能な方法です
これもクリックしてみましたが 両方ともページが開かれました
「閲覧中タブと別タブの両方でページを開くこと」 じゃなくて 意図しない広告に飛ばされることを避けるために導入された機能らしいので Chrome がブラックリストを持っていて そこにマッチしたらブロックするとかなのかもしれません
iframe からの遷移
対処する予定があるらしい iframe の中から親のタブを遷移させるタイプの広告の対処も一応確認してみました<!doctype html>
<iframe src="mal2.html"></iframe>
<iframe src="mal2.html"></iframe>
mal2.html
<!doctype html>
<script>
window.parent.location.href = "https://www.google.com"
</script>
<script>
window.parent.location.href = "https://www.google.com"
</script>
こっちも特にブロックされませんでした
Unicode
やっと Unicode のプロパティが使えるようになりましたconst regexp = /\p{ID_Start}|\p{ID_Continue}/u
63 まではこれはエラーになります
もうひとつ名前付きキャプチャにも対応しました
こういうのです
const regexp = /^(?<scheme>.+?)\:\/\//
regexp.exec("http://var.blog.jp")
// [ ]
// 0: "http://"
// 1: "http"
// groups: {scheme: "http"}
// index: 0
// input: "http://var.blog.jp"
// length: 2
regexp.exec("http://var.blog.jp")
// [ ]
// 0: "http://"
// 1: "http"
// groups: {scheme: "http"}
// index: 0
// input: "http://var.blog.jp"
// length: 2
ただでさえ長くてわかりづらい正規表現が長くなるし 名前つけないとわからないような複雑なのは使うべきじゃないと思うので 個人的はなくても良かったと思う機能です
あんまり好きじゃなく使える言語でも使ったことないので 使えるようになっても使わないような気がしてます
text-decoration-skip-ink
CSS のプロパティが実装されましたこれのデフォルト値がこれまでの動きと異なる影響で 「y」 や 「/」 などの文字のところで下線が途切れるようになりました
フォントサイズが小さいと線がちゃんと表示できてないように見えて 大きくても途切れていて気持ち悪い見た目になりました
別記事
chrome://discards
discard 対象の優先順位を確認できる画面が見やすくテーブル表示になりました別記事
Ctrl-F の見た目
これまでは画面の右上 拡張機能のボタンの下にボックスが出ていましたそれが 64 ではお気に入りのように URL が表示される部分の内側にアイコンがでるようになっていました
常に出ているわけではなく検索バーを表示しているときのみアイコンが表示されます
アイコンを押しても閉じることもなく何も起きません
変に真ん中寄りになるより右上の端にいた昔のほうでよかったのに
その他
大きいもの 気になるものだとこんな感じです他にも コンソールにサイドバーが増えたとか 要素の .focus メソッドに {preventScroll: true} を渡せばスクロールせずフォーカスできるようになったとか色々ありますが 残りは省略します
