portalタグを触ってみた

はじめに

最近、こんな記事を見ました。

グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム
https://japan.zdnet.com/article/35136847/

記事内では「ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジー」と紹介されており、ロマンを感じずにはいられない響きに興味を持ち、調べてみました。
そこで分かったことを書いていきます。

また、本記事ではPortalsのデモを用意していますが、執筆時点では試せるブラウザが限られています。
実際に試したい場合は、Google Chrome Canaryから chrome://flags/#enable-portals で有効化する必要があります。

Google Chrome Canary： https://www.google.com/intl/ja/chrome/canary/

また、バージョン76.0.3802.0（Official Build）canary （64 ビット）で動作確認を行いました。今後変更される可能性がありますので注意してください。

Portalsとは

以前からGoogleが開発し、「Google I/O 2019」で紹介がありました。
https://blog.chromium.org/2019/05/google-io-2019-whats-new-with-chrome.html

仕様はこちらにまとまっています。ただし、仕様策定中ですので変更される可能性があります。
https://wicg.github.io/portals/

技術名は Portals ですがhtmlで書く場合は <portal> となるようですね。
Portalsは、iframeタグと似ていて、自身のページに別ページを埋め込めるようになります。
Portalsの特徴はページへの遷移を前提にしており、ナビゲーションに重点を置いている点です。
イメージとしては、サンプルコードの動きを見せるためにCodePenを埋め込む場合は従来どおりiframe、アフィリエイトのように画面遷移が前提のリンクを貼る場合はPortalsみたいな感じだと思います。

具体的にどんな挙動をするのか実際に動かしたほうが分かりやすいと思いますので、下のボタンを順番にクリックしてみてください。

※画面遷移すると戻るボタンで戻れないため注意してください。

このデモから次のことが分かります。

YouTube内をクリックやスクロールしても何も起きない（YouTubeの画面の操作はできない）
画面遷移時に動画が止まらない（ページの再読込が無い）
画面遷移時にアドレスバーのURLが変わる
画面遷移後、戻るボタンで戻れない（historyが無くなる）

画面遷移時に再読込をしないため、スムーズに別画面に移動できるのが良いですね。
戻るボタンが効かないのはとても不便なので、今後変更されるのではないでしょうか。

Portalsの実装

さきほどのデモのソースコードを見ていきます。
HTML

<button id="sample1-button1">ここをクリックするとYoutubeを埋め込みます</button><br>
<button id="sample1-button2">ここをクリックすると画面遷移します</button><br />
<portal id="sample1" src="https://www.youtube.com/watch?v=dQw4w9WgXcQ" style="display: none;"></portal>

JavaScript

document.querySelector("#sample1-button1").addEventListener("click", () => {
  // YouTubeを表示する。
  document.querySelector("#sample1").style.display = "block";
});
document.querySelector("#sample1-button2").addEventListener("click", () => {
  // 画面遷移をする。
  document.querySelector("#sample1").activate();
});

画面遷移をするときはactivate()をしてあげる必要があります。
HTMLのみでは完結しないので、JavaScriptも書かないといけないということですね。

遷移先の画面は、Portalsとして表示されているのか分かる

window.portalHostというものがあり、通常通り表示した場合はnullが入っていますが、Portalsとして表示されている場合はPortalHostのインスタンスが入っています。
つまり、nullチェックをしてあげれば、Portalsとして表示されているかが判断つきます。

Portalsは遷移先にデータを送れる

Portalsは画面遷移だけでなく、遷移時にデータを送ることが出来ます。
activate()をするときに、第1引数に{data: "ここに送りたいデータ"}というオブジェクトを指定してあげればOKです。
遷移先の画面でportalactivateという名前のイベントが発火しますので、そこで送ったデータを受け取れます。

また、sendMessage()という関数も用意されていますので、これを使って双方向のメッセージのやりとりができます。
iframeにも同名の関数が用意されていますので、それと同じ感覚で使えるのではないでしょうか（すみません、ここらへんはあまり調べられていません）。

Portalsは遷移前の画面の情報も取得できる

遷移後の画面の中で、portalactivateという名前のイベントが発火したとき、adoptPredecessor()を呼ぶことが出来ます。
これの戻り値は、<portal src="遷移前の画面のURL"></portal>です。
戻るボタンでは戻れないですが、それに対して、activate()すると再度戻ることができます。

Portalsの使いみち

Portalsの使いみちを考えてみました。

動画サイトや配信サイトの遷移

最初のデモでもあったように、ページの再読込が無いおかげで動画を止めることなく画面遷移ができます。
たとえば、ある動画サイトのトップ画面で注目動画が再生されているとします。動画の詳細を見ようとリンクをクリックすると、画面遷移が完了するまで映像が見れない時間が発生してしまいます。
それをPortalsでシームレスに遷移するというアイデアです。
例えば、↓のような感じです（アニメーションも付けてみました）。
※1度しか動きませんので、再度動きが見たい場合はリロードしてください

動画が途切れなかったり、アニメーションもあったりするおかげで画面遷移が非常にスムーズにできます。
動画クリック時に、portal部分を左上に移動させ、アニメーション終了後にactivate()を呼んでいます。
動画サイトの方は、portalの場合とそれ以外の場合で見え方が変わるようにCSSで用意して、portal用の表示では動画部分のみを見せるようにしています。

シェアボタン

ブログによく設置されているシェアボタン。
例えば Twitterのシェアボタンだと、押すとTwitterのツイート画面に遷移するようになっています。
画面遷移ということはPortalsの得意分野ですね！
しかもPortalsは、遷移前の画面の情報も取得できますので、画面遷移なのに別画面をモーダルウィンドウのように出すことができます。
（このアイディアは、ここから拝借しました。）
どういうことか分かりづらいと思いますので、下のデモを見てください。
※1度しか動きませんので、再度動きが見たい場合はリロードしてください

画面遷移するとURL（しかも別ドメイン！）が変わっているのにも関わらず、背景に本ブログ記事が表示されていました。
実装的には、tweet入力フォームはモーダルウィンドウに見えるように作り、背景は先述の通りadoptPredecessor()を使って遷移前の画面から取得して表示しています。
遷移前の画面（別ドメイン）のレイアウトを表示できるなんて、もう革命ですね。