CrossRoad

AR、MR、VR、Babylon.jsを中心とした技術ブログ。 If you're non-Japanese native guys, check "English" category.

Edgeブラウザの先行版Canary Channelで搭載されたDOMの3DView機能を試してみました

先日、このようなツイートがありました。

早速試してみましたが、機能の中身を勘違いしていたのと、いくつか詰まるところがあったので手順をまとめました。

以下の環境で動作を確認しています。

  • Windows版のEdge Canary:78.0.240.0

  • Mac版のEdge Canary : 77.0.237.0

なお、スクリーンショットは部分的にWindowsとMac版が混じっていますが説明や動作に影響はありませんので、ご了承ください。

1. DOM 3D ViewはWebGLで表現した3DCGをみるものではなく、DOMを3次元的に表示するもの

名称をみたとき、なぜかWebGLで描画した3DCGを開発者ツールでみられるものだと誤解していました。 (元のツイートに貼ってあるGIFアニメを見れば明らかなのですが、、)

ちなみに、DOMは下記のように定義されています。

Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイスです。
ページを表現するため、プログラムが文書構造、スタイル、内容を変更することができます。
DOM は文書をノードとオブジェクトで表現します。そうやって、プログラミング言語をページに接続することができます。

引用元:DOM の紹介 - Web API | MDN

つまりDOMとは、Webサイトの文章やレイアウトを定義するものです。今回の対象である「DOM 3DView」は、Webサイトを構成しているDOMを3次元的に見せるというものです。

2. DOM 3D Viewを使うための準備

2.1 Microsoft Edge Insider Channels から、Canary Channelをダウンロードする

Microsoft Edge Insider Channelsとは、Edgeブラウザのプレビュー版を試せるサイトです。

Microsoft Edge Insider Channels

現行のEdgeブラウザは「EdgeHTML」というレンダリングエンジンを採用していますが、2018年12月より「Chronium」というGoogle主体で開発されているレンダリングエンジンの採用が決まっています。

Insider ChannelではChroniumベースのブラウザを提供しています。

ダウンロードしたら、指示に沿ってインストールします。インストールされたブラウザアプリの名称がEdgeCanaryだったので、以降EdgeCanaryと表記します。

2.2 URL入力の場所に"about://flags"を入力して、Experimentsメニューを表示する

Experiment menu on Edge Canary

画面上部の検索フィールドに"Experiments"と入力すると、Developer Tools experimentsという項目が出るのでEnabledに変更します。

再起動してください、とあるのでEdge Canaryを再起動します。

2.3 開発者ツールから別のExperimentsを表示する

画面右側のアイコンからたどって、Developer Tools(開発者ツール)を表示します。この位置関係はGoogle Chromeと同じ場所です。

Developer Tools on Edge Canary

Developer Toolを表示させたら、Ctl +Shift + P(Macの場合はcmd+Shift+P)を同時に押して、別のExperimentsメニューを表示させます。

Experiments menu of dev tools on Edge Canary

画面右側に小さな入力フィールドが表示されるので、exと入力し、Show Experimentsを選択します。

Show 'Show Experiments' on Edge Canary

2.4 Settigs画面のEnable DOM 3DViewにチェックをつける

表示された画面の"Enable DOM 3DView"にチェックをつけ、ブラウザを再起動します。

Settings Experiments on Edge Canary

2.5 再度Settings画面を開き、Show DOM 3DViewにチェックをつける

何らかのWebサイトが表示された状態でDeveloper Toolをひらきます。2.3と同じく、Ctl + Shift + P(cmd + Shift + P)を押します。"DOM"などのキーワードを入力して"Show DOM 3DView"を選択します。

Show 'Show DOM 3DView' on Edge Canary

2.6 DOM 3D Viewのタブが表示されていることを確認してWebページを再読み込みする

このようにDOM 3D Viewのタブが表示されていたらWebサイトを再読み込みします。

DOM 3DView tab on Edge Canary

2.7 Take SnapShotでDOM 3DViewを取得する

このようなボタンが表示されるので押します。

Take Snapshot button of DOM 3DView on Edge Canary

これで3D View表示したDOMが確認できます。

3. おわりに

今回、Edge Canaryの存在を初めて知りました。個人的にはChromeに慣れていたので、ChromeとUIが近いのは助かりました。

Edge Canary自体面白そうなので、今回に限らずまた面白そうな技術があったら紹介したいと思います。