はじめに
最近、こんな記事を見ました。
グーグルが発表した新ウェブ技術「Portals」とは--「Google Chrome」向けのウェブナビゲーションシステム
https://japan.zdnet.com/article/35136847/
記事内では「ウェブページのローディングやナビゲーションに新風を吹き込む「Portals」と呼ばれる新たなテクノロジー」と紹介されており、ロマンを感じずにはいられない響きに興味を持ち、調べてみました。
そこで分かったことを書いていきます。
グーグルが発表した新ウェブ技術「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は、iframeタグと似ていて、自身のページに別ページを埋め込めるようになります。
Portalsの特徴はページへの遷移を前提にしており、ナビゲーションに重点を置いている点です。
イメージとしては、サンプルコードの動きを見せるためにCodePenを埋め込む場合は従来どおりiframe、アフィリエイトのように画面遷移が前提のリンクを貼る場合はPortalsみたいな感じだと思います。
具体的にどんな挙動をするのか実際に動かしたほうが分かりやすいと思いますので、下のボタンを順番にクリックしてみてください。
※画面遷移すると戻るボタンで戻れないため注意してください。
このデモから次のことが分かります。
戻るボタンが効かないのはとても不便なので、今後変更されるのではないでしょうか。
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
HTMLのみでは完結しないので、JavaScriptも書かないといけないということですね。
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は画面遷移だけでなく、遷移時にデータを送ることが出来ます。
遷移先の画面で
また、
iframeにも同名の関数が用意されていますので、それと同じ感覚で使えるのではないでしょうか(すみません、ここらへんはあまり調べられていません)。
activate()
をするときに、第1引数に{data: "ここに送りたいデータ"}
というオブジェクトを指定してあげればOKです。遷移先の画面で
portalactivate
という名前のイベントが発火しますので、そこで送ったデータを受け取れます。また、
sendMessage()
という関数も用意されていますので、これを使って双方向のメッセージのやりとりができます。iframeにも同名の関数が用意されていますので、それと同じ感覚で使えるのではないでしょうか(すみません、ここらへんはあまり調べられていません)。
Portalsは遷移前の画面の情報も取得できる
遷移後の画面の中で、
これの戻り値は、
戻るボタンでは戻れないですが、それに対して、
portalactivate
という名前のイベントが発火したとき、adoptPredecessor()
を呼ぶことが出来ます。これの戻り値は、
<portal src="遷移前の画面のURL"></portal>
です。戻るボタンでは戻れないですが、それに対して、
activate()
すると再度戻ることができます。Portalsの使いみち
Portalsの使いみちを考えてみました。
たとえば、ある動画サイトのトップ画面で注目動画が再生されているとします。 動画の詳細を見ようとリンクをクリックすると、画面遷移が完了するまで映像が見れない時間が発生してしまいます。
それをPortalsでシームレスに遷移するというアイデアです。
例えば、↓のような感じです(アニメーションも付けてみました)。
※1度しか動きませんので、再度動きが見たい場合はリロードしてください
動画サイトや配信サイトの遷移
最初のデモでもあったように、ページの再読込が無いおかげで動画を止めることなく画面遷移ができます。たとえば、ある動画サイトのトップ画面で注目動画が再生されているとします。 動画の詳細を見ようとリンクをクリックすると、画面遷移が完了するまで映像が見れない時間が発生してしまいます。
それをPortalsでシームレスに遷移するというアイデアです。
例えば、↓のような感じです(アニメーションも付けてみました)。
※1度しか動きませんので、再度動きが見たい場合はリロードしてください
動画が途切れなかったり、アニメーションもあったりするおかげで画面遷移が非常にスムーズにできます。
動画クリック時に、portal部分を左上に移動させ、 アニメーション終了後に
activate()
を呼んでいます。動画サイトの方は、portalの場合とそれ以外の場合で見え方が変わるようにCSSで用意して、portal用の表示では動画部分のみを見せるようにしています。
シェアボタン
ブログによく設置されているシェアボタン。例えば Twitterのシェアボタンだと、押すとTwitterのツイート画面に遷移するようになっています。
画面遷移ということはPortalsの得意分野ですね!
しかもPortalsは、遷移前の画面の情報も取得できますので、画面遷移なのに別画面をモーダルウィンドウのように出すことができます。
(このアイディアは、 ここから拝借しました。)
どういうことか分かりづらいと思いますので、下のデモを見てください。
※1度しか動きませんので、再度動きが見たい場合はリロードしてください
画面遷移するとURL(しかも別ドメイン!)が変わっているのにも関わらず、背景に本ブログ記事が表示されていました。
実装的には、tweet入力フォームはモーダルウィンドウに見えるように作り、背景は先述の通り
adoptPredecessor()
を使って遷移前の画面から取得して表示しています。遷移前の画面(別ドメイン)のレイアウトを表示できるなんて、もう革命ですね。
おわりに
Portalsの仕様を簡単に見ました。また、その活用方法を考えてデモを用意しました。
まだ仕様を検討している段階ですので今の所安定していませんが、使い方次第ではWebに革新を起こすかもしれませんね。
これからの動向に注目です。
まだ仕様を検討している段階ですので今の所安定していませんが、使い方次第ではWebに革新を起こすかもしれませんね。
これからの動向に注目です。