Portalsを使ったデザイン設計のコツ
萩野氏は、Portalsを活用したリッチなウェブページを設計するうえで、「ページ同士のつながりをシームレスにできる」という意識が重要だと話す。iframeタグでは実現できない楽曲再生を例に、萩野氏はこれを説明した。
「たとえばPortalsを使うと、A画面にいながらB画面で楽曲を再生でき、そのままB画面の再生を維持しながらほかの画面に切り替えるといったことが可能です。ネイティブアプリなら当たり前のことではありますが、これがウェブサービスでも実現できる。過渡期における注意点こそあるものの、新しい体験を実現するという意味で、Portalsは多くの可能性を秘めていると言えます」
また萩野氏は「プログレッシブエンハンスメント」と「グレースフルデグラデーション」というふたつのウェブデザイン手法の違いも意識する必要があると紹介。萩野氏自身もPortalsを使うようになりはじめて、その違いを密に意識するようになったという。
前者の手法では、Portalsに対応していないブラウザ向けに基本的なUXを先に考え、リッチなUXは追って整えていくという流れをとる。PayPayモールはこちらのアプローチで開発された。一方、後者はPortalsに対応しているリッチなUXを前提に、そのあとでPortals非対応ブラウザに向けた基本的なUXを整えていくというアプローチであり、「これが難しかった」と振り返る。その理由は「Portalに対応していないブラウザ用に、UIを検討する必要があったから」と萩野氏は言及した。
「作り手としては、リッチなUXにひきずられやすいですが、利用できない環境のユーザーもしっかり意識しなくてはなりません」
Portalsを実装するには
Portalsを実装するうえでは、アニメーションとURLの切り替えがポイントになる。そこで、関氏は基本的な例として、「A.html」と「B.html」というふたつのhtmlを用いた解説をした。
まず、A.htmlのなかでB.htmlを<portal>を使って埋め込む。この際、「対応していないブラウザも考慮し、JavaScriptを使ったコーディングを行うこと」、また「シームレスな体験を作るためにはアニメーションを活用すること」が重要だと関氏は説明する。なお、Portals自体にはアニメーション機能がないので、「CSS transitions」を活用することもポイントだ。
こうして作成されたウェブページの遷移には、URLがA.htmlのまま、埋め込んだB.htmlの画面が全体に表示されるという段階が入り、その後、URLがB.htmlに切り替わる。そのため、ユーザーからは遷移時にギャップが感じられないという仕組みだ。
また、遷移で用いる関数には引数をわたすことも可能。これを利用し、遷移先のB.htmlの中で、A.htmlを<portal>要素として取得して埋め込める。これによりA.htmlへ戻る場合にも、先ほどと同様の過程を経るため、滑らかなに遷移することが可能となる。
Portalsにはメッセージを送るインターフェースも用意されている。<porta>要素経由でメッセージを取得することで、「ページのレンダリングが終わったタイミングで受け取り、そこから画面を切り替える」といったパフォーマンスチューニングのためにも活用できるのだ。PayPayモールの検索ページと商品ページの移動でも、実際にこうした仕組みを用いているという。
Portalsは現在、WICG（Web Platform Incubator Community Group）で仕様について議論されている。「詳細についてはWICGがドラフトレポートで掲載されているので、興味があればご覧になってください」と関氏は補足した。
