Portalsの実装方法を実例で解説
続いては、PayPayモールとYahoo!ショッピングを担当するフロントエンドエンジニアの関氏から、Portalsの実装方法が解説された。関氏はPayPayモールではVue.jsやAMP、Yahoo!ショッピングではReactやTypeScriptなどの技術を使って、開発を行っている。
まず関氏は、A.htmlとB.htmlという2つのページを例に使い、実装の流れを説明した。
windowにHTMLPortalElementがあるかチェックした上でcreateElement()でportal要素を生成。srcにはportal要素で表示したいページのURL（B.html）を指定し、portal要素をDOMに追加する。
portal要素を埋め込んだら、アニメーションをして、portal要素を画面全体に表示します。
「アニメーションを使わなくてもPortalsの機能を利用することはできますが、シームレスな画面遷移を実現するためにはアニメーションは不可欠です」（関氏）
Portalsにはアニメーションの機能はないため、CSS Transitionなどで各自実装する。
「CSS Transitionを使う場合、可能な限りtransformもしくはopacityを使うことをお勧めします。transformとopacityはアニメーションする要素を別レイヤーに切り分けて、他の要素に影響することなくアニメーションするため、よりネイティブアプリに近い体験を実現することができます」（関氏）
この時点では画面全体にB.htmlが表示されているが、URLはA.htmlのままである。続いて、activate()という関数を実行すると、B.htmlに直接ナビゲートすることができる。通常の画面遷移のように一瞬画面が真っ白になったりすることがなく、シームレスな画面遷移を実現できるという仕組みだ。
activate()関数には引数でデータを渡す実装方法についてもコード例が示された。
Portalsを使って、2つのページを行き来する方法
続いては、2つのページを行き来する方法について。Portalsを使えば、それぞれのページのJavaScriptや、UIの状態を保持して行き来したり、アニメーションを挟んだりすることも可能となる。
2つのページを行き来するためにはPortalActivateEventを利用する。A.htmlでactivate()を実行する際に引数で渡したデータは、event.dataで取得することができる。
また、PortalActivateEventはevent.adoptPredecessor()で、A.htmlをportal要素として取得。それをDOMに追加すれば、逆にB.htmlにA.htmlを埋め込むことができる。
Portalsには、PortalHostというインターフェースがあり、window.portalHostで自身がportal要素として、利用されているか判定することができる。portal要素として利用されている場合のみ、UIを変更したり追加したりすることが可能だ。
「この例では、B.htmlに×ボタンを追加しています。このボタンのクリックでactivate()を実行するように実装すれば、モーダルのようなコンテンツが作れます」（関氏）
