Chrome更新情報

この記事では、Chromeブラウザの更新情報を書きます。Chromeブラウザのバージョンは、【chrome://version】と打つと確認することができます。この記事を書いている時点では、Version68ですね。

Chromeブラウザの更新は「一般ユーザ向け」と「開発者向け向け」と別々に情報が書かれます。本家のサイトでは、次の名前でリンクが貼られていますね。また、本家サイトの他には、youtubeチャンネルで確認することができます。

※動画はある時とないときがある。

※記事が最新に追いついていないのはご容赦ください。

  1. 一般ユーザ向け
    1. Chrome 69ー2018/09
    2. Chrome 68ー2018/07
    3. Chrome 67ー2018/05
    4. Chrome 66ー2018/04
    5. Chrome 65ー2018/03
    6. Chrome 64ー2018/01
      1. JavaScriptの機能強化
    7. 2017年のChromeブラウザのアップデート５６▶６３
  2. 開発者ツールの機能強化
    1. ChromeDev 70ー2018/08
    2. ChromeDev 68ー2018/05
    3. ChromeDev 67ー2018/04
    4. ChromeDev 66ー2018/02
    5. ChromeDev 65ー2018/01
    6. ChromeDev 64ー2017/11
  3. まとめ
スポンサーリンク

一般ユーザ向け

Chrome 69ー2018/09

本家サイトを見ると更新情報が書かれています。まとめるのは、後ほど。

 

Chrome 68ー2018/07

本家サイトを見ると大きな更新点は4点です。

1つ目は、Chromeで「ホーム画面へ追加」への挙動を自前のプログラムでより制御できるようになるというもの。PWAをやっている方なら、制御したいと思う項目ですね。私が注目しているのは、「ボタンをクリックしたときにホームスクリーンに追加」というイベントを作れるところですね。「一昔前のブックマークに追加するボタン」に似ていますね。

2つ目は、PageLifeCycleAPIの改善です。サイトがバックグラウンドで実行されている場合、システムはリソースを節約するためにサイトを中断することがあります。新しいPage Lifecycle APIを使用すると、これらのイベントをリッスンして応答できるようになります。最近、非表示タブの挙動が安定しないなぁと思っていましたが、次のズを意識する必要があります。

3つ目は、Payment Handler API です。これ私が作って見たかった機能の1つです。簡単に実装できると書いてありますが、、、本当かな。

4つ目は、キャッシュ更新時の動作が変わる模様。。。すぐには解釈できないが、キャッシュ設計に対して考え方が変わるかもしれません。あとでちゃんと咀嚼が必要ですね。

Chrome 67ー2018/05

本家サイトを見ると大きな更新点は3点です。

  • Progressive Web Apps are coming to the desktop
  • The generic sensor API makes it way easier to get access to device sensors like the accelerometer, gyroscope and more.
  • And BigInts make dealing with big integers way easier.

1つ目は、PWAがデスクトップ版のChromeでも可能になりましたというもの。現在PWA化している人が気にすることは、ブレークポイントの数だけだそうです。んー、WordPressをPWA化した私の場合は、通知機能だけ実装できていればいい感じですね。

2つ目は、generic sensor API が実装されたというもの。JavaScriptがNativeアプリの機能を意識していますね。PC版ではあまり気にしませんがスマホの場合は、利用価値ありですね。ジャイロ操作とかブログじゃ使いませんが、サンプルを見ているのは楽しいです。

3つ目は、BigIntsの実装。業務用アプリじゃないと使わなさそう。

あとは、、、GoogleIO2018のChrome And Webの動画リンクが貼ってありました。

Chrome 66ー2018/04

本家サイトから抜粋すると、今回は一般ユーザ向けの大きな変更点はないです。

  • CSS Typed Model Object
    • JavaScriptからCSSのプロパティを操作する際に、Java等のObjectのように簡単に扱えるようなものを作成したも模様。ユーザ様のPCのChromeのバージョンを制限出来ていれば今すぐにでも取り入れたい感じです。実際は数年先になりそう。
  • Async Clipboard API／New Canvas Context BitmapRenderer
    •  JavaScriptから非同期でクリップボードにアクセスできるようになった。簡単に書くと、JavaScript上でHTMLのDOMを指定してほかの場所へコピペできるようなものが構文に追加されました。テキストだけではなくBitmapもコピペ可能になりました。これはうまく使うと、ChromeBookにJavaScript製のプリントスクリーンが可能になるかもしれませんね。

Chrome 65ー2018/03

本家サイトから抜粋すると次の機能が増えています。

  • CSS Paint API
    • CSSで指定する“background-image”をJavaScriptから操作できるようになります。これをうまく利用すると、転送量を少なくできます。
  • Server Timing API
    •  WebサーバがHTTPヘッダを利用して、ブラウザにサーバの状態を通知できるようになります。これにより、手軽にサーバサイドのベンチマークをDevToolから可視化できるようになります。
  • CSSのdisplay:Contentの改善

Chrome 64ー2018/01

もう既にweb上に色々な情報が出回っていますが、本家のサイト「New in Chrome 64  |  Web  |  Google Developers」から情報をスキミングすると次の情報があります。

  • ポップアップブロック機能の改善
  • Webサイトごとの音声ミュート機能
  • 動画のオートプレイがデフォルトで無効に
  • 詳しいことは、わかりませんが当然のようにセキュリティも強化

JavaScriptの機能強化

Chrome64になると、JavaScriptの機能が強化/改善されます。

  •  ResizeObserversのサポート
    • JavaScriptの機能強化がされました。
    • 要素のコンテンツ矩形のサイズが変更されたときのイベントをキャッチできるようになった。
  • import.metaのサポート
    • Chrome 64ではモジュール内のimport.metaプロパティがサポートされ、import.meta.urlモジュールのURLが公開されるようになりました。現在のHTMLドキュメントではなく、モジュールファイルを基準にしてリソースを解決ができるようになります。
  • window.alert()の機能改善
    • 今まで、アラートのポップアップが表示されると、タブ切り替えができませんでしたが、タブ切り替えができるようになります！

2017年のChromeブラウザのアップデート５６▶６３

上記のリンクがわかりやすくまとまっています。

開発者ツールの機能強化

ChromeDev 70ー2018/08

※ChromeDev 69は、大人の事情でSKIP。

DevToolサイトを見ながら、あとで纏めます。

ChromeDev 68ー2018/05

DevToolsサイトを見ると更新項目が書かれています。

今回のUPDATEの感想は、ChromeDevToolのデバッグ機能がどんどん機能強化されているなぁと思うところです。今回、私が気になった点は次のところです。

1つ目は、オートコンプリートやプレビュー機能の強化です。

The Console is printing the result of the sort() operation before it has been explicitly executed.

コンソールに式を入力すると、コンソールはその式の結果のプレビューをカーソルの下に表示できるようになりました。

2つ目は、chrome 68にはLighthouse 3.0が付属されるようになりました。そもそも、
Lighthouse はオープンソースの自動化されたツールでウェブアプリの品質向上に使うもので、拡張機能かコマンドラインで使うものだったんですが、標準装備されました。その結果、UIも変わったようです。

The new report UI in Lighthouse 3.0.

 

ChromeDev 67ー2018/04

DevToolsサイトを見ると目玉アップデートはありませんが、細かいUPDATE情報が記載されています。

  • Search across all network headers
  • CSS variable value previews in the Styles pane
  • Copy as fetch
  • New audits, desktop configuration options, and viewing traces
  • Stop infinite loops
  • User Timing in the Performance tabs
  • JavaScript VM instances clearly listed in the Memory panel
  • The Network tab in the Sources panel has been renamed to the Page tab
  • Dark theme updates
  • Certificate transparency information in the Security panel
  • Site isolation features in the Performance panel

私が気になったのは、開発者ツールの背景色に黒になるアップデート（青）とJavaScriptで誤って無限ループをした際に止めることができるようになった（赤）ことです。

Demo Of "Stop Current JavaScript Call" Button In DevTools (Chrome 67)

 

ChromeDev 66ー2018/02

DevTool本家サイトに説明が載っています。私が気になった点を書きます。今回気になるのは、1点だけですね。

  • Blackboxing in the Network panel
    • NetworkパネルのInitiator列に、リソースが要求された理由が表示できるようになりました。パフォーマンスを追求する場合は、自身が作成したJavaScriptからのリソース要求を確認できるようになります。

ChromeDev 65ー2018/01

DevTool本家サイトに説明が載っています。私が気になった点を書きます。

  • LocalOverrides
    • Ctrl+Shift+Iでページの解析を出してくれて、それを変更プレビューして保存ができないという状態でしたが、保存ができるようになります。また、ローカルのファイルを読み込んで作成して即プレビューすることができます。
      これ、HTMLエディターはChromeDevToolで事足りるようになるのではないかと思います。でもまだ使いづらい(笑)
  • New SEO and performance audits
    • 2018/7からGoogleのモバイル検索ランキングのページのスピードが指標として取り入れるらしいです。DEVTOOLもページ自体のスピード改善をするための機能を追加したらしいです。これ、私もダイレクトに影響するところじゃないですが、、、。
      DEVTOOLの動画の３分～３分４０秒のところをみましょう。
  • Reliable code stepping
    • ChromeのDebug実行の解析がより詳細にできるようになりました。これは見ているだけで楽しいですね。３分４５秒あたりから説明しています。完全にパフォーマンスを意識していますね、これ。

ChromeDev 64ー2017/11

開発者向けのツールが大幅に機能強化されたと本家のサイト「What’s New In DevTools (Chrome 64)  |  Web  |  Google Developers」に記載があります。動画を見るだけでも何となくイメージが湧きます。どんなものがあるかというと、次の点です。

  • Performance Monitorの追加
    • ブラウザにタスクマネージャみたいなメモリやCPU等の情報を表示できる機能が追加されます。
  • コンソールログの見え方が改善された
    • 大規模なサイト向けに、コンソールログのグループ化や似たログをわかりやすく表示できるようになる。

まとめ

Chromeブラウザの変更点をまとめました。Chromeブラウザは2018年09月で10周年の節目。これからも動向に注目していきます。

ホーム