この記事は GMOアドマーケティング Advent Calendar 2019 12日目の記事です。

お久しぶりです。GMOアドマーケティング GMOSSP開発担当の@KazuakiMです。
今日はEdgeブラウウザについてアドテクに絡めてご紹介します。

Microsoft Edge: Making the web better through more open source collaboration

For the past few years, Microsoft has meaningfully increased participation in the open source software (OSS) community, becoming one of the world’s largest supporters of OSS projects. Today we’re a…

こちらの記事が発表された際に話題となりましたが、Microsoft様のEdgeがChromiumプロジェクトベースとなります。そして記事にある通り、MacOSにもEdgeを提供するという事となりました。

公式サイトにも

すべての人のために Web を便利な場所に

とあり、Macユーザを意識しているのは明らかでしょう。

なお、本記事作成時点(2019-11-19)ではまだ正式リリースがなされていないため、
ベータ版、開発版、カナリア版のバージョンを確認していきます。

$ brew cask info microsoft-edge-beta
microsoft-edge-beta: 79.0.309.12 (auto_updates)
https://www.microsoftedgeinsider.com/
/usr/local/Caskroom/microsoft-edge-beta/79.0.309.12 (132.4MB)
From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-beta.rb
==> Name
Microsoft Edge Beta
==> Artifacts
MicrosoftEdgeBeta-79.0.309.12.pkg (Pkg)

$ brew cask info microsoft-edge-dev
microsoft-edge-dev: 80.0.320.3 (auto_updates)
https://www.microsoftedgeinsider.com/
Not installed
From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-dev.rb
==> Name
Microsoft Edge Dev
==> Artifacts
MicrosoftEdgeDev-80.0.320.3.pkg (Pkg)

$ brew cask info microsoft-edge-canary
microsoft-edge-canary: latest
https://www.microsoftedgeinsider.com/
Not installed
From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-canary.rb
==> Name
Microsoft Edge Canary
==> Artifacts
MicrosoftEdgeCanary-80.0.337.0.pkg (Pkg)

$ brew cask info microsoft-edge-beta

microsoft-edge-beta: 79.0.309.12 (auto_updates)

https://www.microsoftedgeinsider.com/

/usr/local/Caskroom/microsoft-edge-beta/79.0.309.12 (132.4MB)

From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-beta.rb

==> Name

Microsoft Edge Beta

==> Artifacts

MicrosoftEdgeBeta-79.0.309.12.pkg (Pkg)

$ brew cask info microsoft-edge-dev

microsoft-edge-dev: 80.0.320.3 (auto_updates)

https://www.microsoftedgeinsider.com/

Not installed

From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-dev.rb

==> Name

Microsoft Edge Dev

==> Artifacts

MicrosoftEdgeDev-80.0.320.3.pkg (Pkg)

$ brew cask info microsoft-edge-canary

microsoft-edge-canary: latest

https://www.microsoftedgeinsider.com/

Not installed

From: https://github.com/Homebrew/homebrew-cask-versions/blob/master/Casks/microsoft-edge-canary.rb

==> Name

Microsoft Edge Canary

==> Artifacts

MicrosoftEdgeCanary-80.0.337.0.pkg (Pkg)

Windows10にインストールされているEdgeのバージョンは44.xxxとなりますが、Macにインストールできるバージョンは79.xxx, 80.xxxとなっています。このバージョン数が大幅に増えているのはChromiumプロジェクトからの派生である事が伺えます。

Google Developers Japan

新しい Cookie 設定 SameSite=None; Secure の準備を始めましょう

Chrome 80 以降、SameSite 値が宣言されていない Cookie は SameSite=Lax として扱われます。Cookie を扱っているサイトは対応が必要な可能性があります。内容をご確認ください。

Chromiumプロジェクトの派生である事から脳裏によぎる事といえば、Google様が皆に日々伝えているChrome 80でCookieの仕様が大きく変わるという事でしょうか。このブログ中に

Microsoft は先日、Microsoft Edge 80 より試験運用版としてこのモデルの実装を開始する計画を発表しました。

とあります。そのためChromiumプロジェクトベースのEdgeでGMOSSPのCookie(サードパーティCookie)を読むためにはCookieに SameSite=None; Secure を設定する必要がありそうです。

インストール

まずはMacにEdgeをインストールしてみましょう。
途中パスワードを問われるものの特に問題もなくインストールを完了しました。

$ brew cask install microsoft-edge-dev
==> Downloading https://officecdn-microsoft-com.akamaized.net/pr/C1297A47-86C4-4C1F-97FA-950631F94777/MacAutoupdate/MicrosoftEdgeDev-80.0.320.3.pkg
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'microsoft-edge-dev'.
==> Installing Cask microsoft-edge-dev
==> Running installer for microsoft-edge-dev; your password may be necessary.
==> Package installers may write to any location; options such as --appdir are ignored.
Password:
installer: Package name is Microsoft Edge Dev Update 80.0.320.3
installer: Upgrading at base path /
installer: The upgrade was successful.
microsoft-edge-dev was successfully installed!

$ brew cask install microsoft-edge-dev

==> Downloading https://officecdn-microsoft-com.akamaized.net/pr/C1297A47-86C4-4C1F-97FA-950631F94777/MacAutoupdate/MicrosoftEdgeDev-80.0.320.3.pkg

######################################################################## 100.0%

==> Verifying SHA-256 checksum for Cask 'microsoft-edge-dev'.

==> Installing Cask microsoft-edge-dev

==> Running installer for microsoft-edge-dev; your password may be necessary.

==> Package installers may write to any location; options such as --appdir are ignored.

Password:

installer: Package name is Microsoft Edge Dev Update 80.0.320.3

installer: Upgrading at base path /

installer: The upgrade was successful.

microsoft-edge-dev was successfully installed!

外観

では、さっそくEdgeを起動してみます。

アイコンなどがスタイリッシュで個人的にはだいぶ良い印象を受けます。次にUserAgentを見てみましょう。

UserAgent

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3952.0 Safari/537.36 Edg/80.0.320.3

一見、Macでアクセスされているという事を除いて、いつも通りのEdgeのように見えます。
Windowsにインストールされている現在のEdgeのUserAgentを確認してみましょう。

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.18362

こちらの一番の違いは現在のEdgeのUserAgentは Edge となっているのに対して、ChromiumプロジェクトベースのEdgeのUserAgentは Edg となっています。
今まではChromeブラウザ用の処理を実装する場合にUserAgentを見て、Edgeを取り除いて残ったChromeに対して、処理を実装してきました。
もし、今後Edge用の実装を行いたい場合には Edg を対象に実装する必要があるでしょう。
Edg といえば、Android版EdgeとiOS版Edgeが似たUserAgentとなっている事を思い出します。

— Android
Mozilla/5.0 (Linux; Android 8.0; Pixel XL Build/OPP3.170518.006) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.0 Mobile Safari/537.36 EdgA/41.1.35.1

— iOS
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_2 like Mac OS X) AppleWebKit/603.2.4 (KHTML, like Gecko) Mobile/14F89 Safari/603.2.4 EdgiOS/41.1.35.1

EdgeはいろいろなUserAgentの上に成り立っているので、ちょっと複雑です。

拡張機能

拡張機能はMicrosoft Storeからインストールできます。今の所そこまで充実しているという印象を受けませんが、Chromiumプロジェクトベースという事でChromeのサポートしているextension APIで作成された拡張機能はストアに登録できる事から増加が期待され、互換性があるFireFoxのWebExtension APIからの移植もあるかもしれません。

microsoftedge.microsoft.com

Microsoft Edge Insider Addons

デバッグツール

こちらもChromiumプロジェクトベースという事でChromeとほぼ同じようなデザインとなっています。

DRM

Microsoft様のブラウザがChromiumプロジェクトベースになるという事で個人的にはこの話題は外せないと考えています。Microsoft様が開発したDRM技術であるPlayReadyが利用できるのか、
それともGoogle様が買収したDRM技術であるWidevineが利用できるのか。

Macの開発版、カナリア版を確認しましたが、現状はWidevineのみサポートのようです。ただし、海外メディアの記事を読みますとPlayReadyのオプションが表示され、
デュアルサポートが期待できるような記事が目立ちます。DRM技術についてはリリースまでいったん様子見というところでしょうか。

まとめ

今後、EdgeはChromiumプロジェクトベースとなるためChromeと同様の処理を行う事で、
だいたいのケースにおいていい感じに処理してくれるでしょう。
また、Chromeとほぼ同等の使い勝手が期待できる事から新しいブラウザとしての選択肢として期待できます。

明日は、T.Mさんによる「スクラム開発はじめました」です。
引き続き、 GMOアドマーケティング Advent Calendar 2019 をお楽しみください！

■エンジニア採用ページ　～福利厚生や各種制度のご案内はこちら～
https://www.gmo-ap.jp/engineer/
■Wantedlyページ　～ブログや求人を公開中！～
https://www.wantedly.com/projects/199431
■エンジニア学生インターン募集中！　～就業型インターンでアドテクの先端技術を体験しよう～
https://hrmos.co/pages/gmo-ap/jobs/0000027

KazuakiM

インストール

外観

UserAgent

拡張機能

デバッグツール

DRM

まとめ

おすすめ

Cookieが使えなくなる？今からでも遅くないプライバシーサンドボックス

スケルトンスクリーン（ローディング）をJavaScriptとCSSのみで実装

2022年上半期ライトニングトーク大会とテックイノベーション賞の授賞式を開催！