Microsoft EdgeがChromiumを採用：Webデザイナーが知っておくべきこと

MicrosoftのInternetExplorerは、インターネット上で最大のミームの1つです。 新しく導入されたテクノロジーは単にサポートされていないため、これは多くのWebデザイナーの悩みの種でもあります。 MicrosoftがIEをMicrosoftEdgeにリブランドしたとき、当時は終わったという希望がありました。 デフォルトのWindowsブラウザーは最新のテクノロジーを簡単に採用し、Webにはまともな標準プラットフォームがあります。 それは起こりませんでした。 ただし、2018年後半に、MSは変更されることを発表しました。EdgeはChromiumエンジンを基盤として採用していました。

Microsoft Edge Chromium？ 大したことは何ですか？

この記事の執筆時点で、Chromiumベースを含むEdgeプレビュービルドをダウンロードできます。 これは開発ベースであり、ブラウザとしての日常の運転を目的としたものではありませんが、既存のEdgeを取り除くことを望んでいる人にとっては可能です。 ただし、初期段階では非常に骨の折れる作業です。 2019年が進むにつれて、OEMブラウザは通常どおり更新されてChromiumが含まれるようになります。

それはすべて素晴らしいです。 しかし、大したことは何ですか、あなたは尋ねますか？ さて、これに対する答えは3つあります。

1.マイクロソフトはオープンソースを採用しています

最近、マイクロソフトが過去のプロプライエタリモデルからオープンソースソフトウェアの領域に移行していることを示す複数の兆候が見られます。 彼らはGitHubを購入してAtomコードエディターの改善を始めて以来、この方向に進んでいます。おそらく最も重要なのは、最近の開発者の間でおそらく最も人気のあるエディターであるVisual StudioCodeのリリースです。 さらに、VS Codeが十分に強力でない場合は、Visual StudioIDEが無料でダウンロードできるようにリリースされています。

オープンソースの分野にEdgeを追加することは、消費者にとってより強力な製品になるだけです。 マイクロソフトはそれをこの声明の中で非常にうまく表現しています。

また、アクセシビリティ、タッチ、ARM64などの分野でChromiumへの貢献も開始しました。 私たちの計画は、並行プロジェクトを作成するのではなく、Chromiumでの作業を継続することです。 Googleのチームと直接連携しており、オープンソースコミュニティとさらに連携することを楽しみにしています。

MicrosoftがChromiumでGoogleと協力しているのは、自分たちの目的のためにフォークするのではなく、うれしいことです。 そして、プロジェクトが進むにつれて、ChromiumとWebデザインは全体としてより堅牢でオープンになります。

2.断片化が少なく、機能が多い

前述したように、Chromiumを採用するEdgeは、以前はブラウザーから除外されていた機能とテクノロジーを最終的に導入します。 ユーザーにとって、これは、エラーメッセージやクラッシュを受信する代わりに機能するため、ほぼすべてのWebサイトでのエクスペリエンスが向上することを意味します。 開発者にとっては、作業がユーザーにクラッシュしないことを意味しますが、IE / Edgeで動作させるためにハッキーソリューションをいじくり回すよりも、新しいプロジェクトやより優れた製品により多くの時間を費やすことができます。

このようなことが、Microsoft EdgeChromiumのアップグレードを取得している理由です。 彼らは具体的に彼らの目標は「私たちの顧客のためにより良いウェブ互換性を作り、すべてのウェブ開発者のためにウェブの断片化を減らすこと」であると述べました。

断片化の減少は、単にWebのより一貫した使用を意味します。 また、ユーザーが（願わくば）開発者からの（多くの）追加作業なしで拡張機能やアドオンを使用できることも意味します。

追加の作業なしで、Edgeブラウザーで同じ互換性が表示されることを保証します。

このニュースは、セキュリティの問題とプライバシーの不足のためにChromeを使用しないオプションを希望する人々にとって大きなニュースです。 これらの人々は、ウェブ上で可能な限り最高の、最も一貫した体験をしたいと思っています。 断片化が最小限であるため、プラットフォーム固有のバグや脆弱性の可能性が大幅に減少するため、セキュリティが向上します。

3.Webデザイナーは無料で設定できます

このリリースまで、Webデザイナーはいくつかの点で制限されていました。 多くの人がIEに基づいて自分自身を制限することなく魔法を使っていましたが、クライアントの訪問者はプロジェクトの範囲を非常に簡単に制限できました。

Webデザイナーと開発者のための重要なポイント

Chromiumの採用により、Web開発とデザインの世界は大きく開かれています。ここでは、回避策を作成する必要がなく、利用できるオープンエンドの機能をいくつか紹介します。完全に避けてください。 CSS-Tricksには、フロントエンド開発者が期待できることの徹底的な要約がありますが、これらはハイライトの一部です。

背景ブレンドモードCSSは機能します

グラデーションとデュオトンは今かなり暑くてトレンディです。 そして、それらを使用する最も簡単な方法の1つは、 background-blend- modeCSSを使用することです。 このChromiumがEdgeをリリースするまで、この効果はMicrosoftブラウザーでは表示されませんでした。 ブレンドする画像が何であれ、代わりにフルカラーになり、ブレンドしようとしている雰囲気全体が台無しになる可能性があります。 それはもう問題ではありません。 Diviのようなページビルダーを使用している場合は、それらに含まれているブレンドエフェクトもレンダリングされるので、どうしても必要な場合を除いて、スタイルシートを掘り下げる必要はありません。

エッジは透明性のある16進カラーコードを理解します（最終的に）

ですから、これは生活の質の向上であるため、それほど驚くべき新機能ではありません。 そして、一部の人々にとって、これはまったく問題ではないかもしれません。 ＃ffffff45ではなくrgba（255、255、255、.45）として色を書き出すことを気にしない人々です。 あなたが（多くの人のように）16進色を好むなら、あなたは幸運です。 最終的に、好きなスタイルの使用を開始し、スタイルシートを整理して整理することができます。

基本的に、この変更でEdgeでレンダリングする16進数に透明度を含めることができます（上記の例の最後にある45に注意してください。これは、45％の透明度を示します）。これは、CSSを組み合わせる必要がないことを意味します。 私たちが言ったように、それは生活の質の特徴です。

テキスト指向と書き込みモードのCSSがレンダリングされます

高度なCSSテクノロジーは、Edgeの強力なスーツではありませんでした。 実際、それは弱いスーツでさえありませんでした。 それはエッジのクローゼットにはまったくありませんでした。 Diviのようなページビルダーができることを超えた高度なCSSを利用したいような開発者であれば（確かにそれほど多くはありません）、MicrosoftEdgeとInternetExplorerに常に不満を感じています。 彼らはただいくつかのもので動作しないからです。 Chromiumが内部にあるのは過去のことであり、私たちのお気に入りの効果の1つ（技術的には2つ）はテキスト指向/書き込みモードです。

横向きと縦向きのテキストにしばらく前に投稿しました。 この更新が行われるまで、次のコード（したがって投稿での効果）をEdgeに表示することはできませんでした。

.sideways-text {
transform: rotate(90deg); /* makes entire paragraphs and lines rotate sideways */
}
 
.vertical-yellow {
text-orientation: upright; /* makes individual characters stand upright, not whole lines like transform: rotate */
writing-mode: vertical-lr; /* continues left-to-right at line break */
color: yellow;
font-size:2rem; /* this will make the body text twice the relative size of the default set for the whole site */
line-height: 200%; /* line height is VISUALLY line-width when it's vertical */
text-transform: uppercase;
font-family: monospace; /* this just pretties up the whole deal, making all characters the same width */
}
 
.vertical-white {
text-orientation: upright;
writing-mode: vertical-lr;
color: white;
font-size:2rem;
line-height: 200%;
text-transform: uppercase;
font-family: monospace;
}

これらの種類の効果と高度なテクノロジーが、The Powers ThatBeによってブロックされなくなったことを喜んでみましょう。

標準のブックマークのインポートと拡張機能

はい、あなたはその権利を読みます。 Edgeは拡張機能をサポートします。 また、EdgeはワンクリックでChromeからブックマークをインポートできるようになります。 これにより、スワップオーバーを計画している場合に簡単になるだけでなく、すでに使用しているのと同じ強力なツールにアクセスできるようになります。

多くのWebデザイナーは、拡張機能を使用して生活を楽にしています。 たぶんそれはカラードロッパーなので、その完璧な色のヘックスをWebサイトから取得することができます（これはEdgeでも使用できます！）、または定規を使用して適切なサイズまたはフォントグラバーを取得します。 たぶん、あなたはこのリストのすべてをインストールしていて、それらのためにChromeを離れたくないでしょう。

さて、今あなたはできます。

EdgeはChromiumをベースにしていますが、 Chromeではありません。 それはまだマイクロソフト製品であり、それはあなたが彼らが彼らの評判を再構築しているソフトウェアの品質を手に入れることを意味します。 Googleの常に中規模の担当者ではありません。

WebサイトをHTMLとして保存

Chromiumがアップグレードされるまで、WebページをHTMLとして保存することはできませんでした。 控えめに言っても、右クリックのコンテキストメニューは制限されていました。

Chromiumエンジンでは、それはもはや当てはまりません。 最後に、実際のコンテキストメニューが表示されます。

「名前を付けて保存…」を押すだけで、そのサイトのローカルコピーを取得してチェックアウトし、いじくり回して、すべての要素が正確に正しいことを確認できます。

要素といえば、どうあるべきか…

エッジは最終的にページ検査を可能にします

これはウェブデザイナーにとって大きなものです。 以前はEdgeでの作業はほぼ不可能でした。これは、機能のサポートが不足しているためではなく（非常に重要ですが）、内部を掘り下げて個々の要素を調べて問題をデバッグおよびトラブルシューティングすることができなかったためです。 実際に作品に簡単にアクセスできなかったため、作品をうまく微調整したり微調整したりすることはできませんでした。

それはもはや事実ではありません。 したがって、Webデザイナーは喜んでいます。 ついにJSコンソールを使用したり、CSSスタイルシートで遊んだり、心ゆくまで要素を突いたり、プロデュースしたりできるようになりました。

プライベートブラウジングはここにあります

そこにあるほとんどすべてのブラウザでは、履歴のないクリーンなプライベートウィンドウでページを実行できます。 Edgeを除く。 繰り返しになりますが、Chromiumを使用すると、デザイナーは自分の作品を開いて、ログアウトしたり、キャッシュやCookieをクリアしたり、12のフープを飛び越えたりすることなく、ユーザーにどのようにレンダリングされるかを確認できます。 Chromeのシークレットタブと機能的に同じInPrivateウィンドウにアクセスできるようになりました。 右クリックするだけで、そこにいます。

クリーンなデザインをすぐにテストできることは、作業ピクセルを完璧にする必要があるWebデザイナーにとって不可欠です。 この機能は、特にプライベートウィンドウを使用しないのは面倒なので、多くの設計者がEdgeで作業することを制限する機能です。 あなたが毎日何十ものそれらを開くようなデザイナーなら、Edgeがあなたのワークフローにどれほどうまく適合しているかに驚くかもしれません。

そして、はるかに

これらは氷山の一角にすぎません。 そしてこれは、ChromiumをEdgeに導入することでWebデザイナーがアクセスできるようにする機能のほんの一部です。

• flat（）とflatMap（）はEdgeでサポートされます
• 動的JavaScriptモジュールをインポートできます（最終的に）
• CSSを使用したプレースホルダーテキストのスタイル設定
• 表示： CSSグリッドおよびフレックスボックスユーザーがコンテンツを利用できるようになりました
• TextEncoderとTextDecoderにより、ライブストリームの表示が大幅に改善されます

基本的には、次のように考えてください。Chromeでできることは何でも、Edgeでもできることです。 それは素晴らしい考えではありませんか？

Microsoft EdgeChromium固有の機能

Microsoftは、Chromiumを採用してEdgeをそれに置き換えるだけではありません。 彼らもそこに独自の機能を追加しています。

1.Chromeセキュリティ

ユーザーは、Chromeユーザーが持っているのと同じ種類のセキュリティ対策（特に拡張機能を介したもの）によって保護されていることを確認できます。 さらに、Microsoftは、ブラウザ用の一連の新しいセキュリティ対策と追跡ブロッカーを導入しています。 ユーザーは、まったくないものから非常に厳格な封鎖まで、独自の優先レベルの保護を設定できます。 Microsoftは、ユーザーのプライバシー保護を明確かつ簡単かつシンプルにしたいと述べています。 多くのセキュリティソリューションはユーザーにとって非常に複雑に見えます。Edgeが広く普及しているため、これは適切なステップです。

2.新しいコレクション

さらに、Chromiumベースでは、MSが「コレクション」と呼んでいる機能を導入し、ユーザーがインターネットからテキストや画像などのコンテンツを収集して共有およびキュレートできるようにします。 彼らはChromiumベースを使用して、資料のソースを手元に置いておくだけでなく、MS Officeスイートにエクスポートし、後で操作するためにデータ構造を維持しています。

3.IEエミュレーション

そして、抵抗のピースがあります。InternetExplorerエミュレーターが組み込まれています。そうです、あなたはそれを正しく読んでいます。 新しいMicrosoftEdge Chromiumには、IEが組み込まれています。 少し後ろ向きに聞こえるかもしれませんが、実際には美しいものです。 Chromiumへの交換により、EdgeはIEの制限から解放され、開発者とユーザーが前進するためのより良いエクスペリエンスを得ることができます。 しかし、IE専用に設計された古いサイトはどうでしょうか。 まあ、それらは壊れます。 また、IEはまだ多くの企業で使用されているため、これらのアプリやページをレンダリングするための内部エミュレーターがあるということは、ワークフローやサービスが中断されないため（または追加のトレーニングやアップグレード—まだ）。 それは移行チームによる本当に素晴らしいタッチです。

未来は明るい

近い将来、Microsoftブラウザが冗談の矢面に立たされない日があることを願っています。 このChromiumエンジンへの移行が成功し、Web全体の標準化の時代の到来を告げるのに役立つことを本当に望んでいます。 ユーザー、デザイナー、開発者にとっては良いことであり、正しく処理されれば（まるでそうであるように見えます）、この移行により、インターネットは多くの人々に開かれる可能性があります。 また、多くのデザイナーの生活もはるかに楽になる可能性があります。

Microsoft Edge Chromiumについてどう思いますか？

ProStockStudio / shutterstock.comによる記事特集画像