【デブサミ2020】セッションレポート（AD）

PayPayモールとYahoo!ニュースの事例で紹介──HTMLのportal要素を活用した画面遷移設計とは【デブサミ2020】

【14-A-2】新しいHTMLを利用した画面遷移設計〜PayPayモールとYahoo!ニュースの事例を添えて〜

2020/04/06 12:00

ポスト

メッセージをやり取りする機能

　Portalsにはメッセージを送るインターフェースが用意されている。以下のソースコードの区切り線は、それぞれが別々のページで実行されているJavaScript。区切り線より上がportal要素で別ページを表示しているページのソースコード、下がportal要素として利用されているページのソースコードとなっている。

　window.portalHostに対してメッセージを送るソースコードも紹介された。上がportalとして利用されているページのソースコード、下がportal要素で別ページを表示しているページのソースコードである。

　PayPayモールの検索ページと商品ページは、これらを組み合わせることによって、2つのページをシームレスな画面遷移を実現しているのだという。

Portalsの良い点と注意点

　続いて、Portalsを使ってみて感じた、良い点と注意点について紹介された。

　良い点の一つ目に挙げられたのは、既存のMPA（マルチページアプリケーション）アーキテクチャ上でも画面遷移をシームレスにし、ユーザー体験を向上できるということ。

　ヤフーは規模が大きいサービスが多く、開発組織も領域ごとに分かれているため、MPAのままシームレスな画面遷移が実現できるPortalsがとても有効だったという。

　2つ目は、PortalsはシンプルなAPIなので、エンジニアだけでなくデザイナーも使えるということ。今回まさに、Yahoo!ニュースのPortalsページの実装をメインで行ったのはデザイナーだったことが、それを証明している。

　注意点として挙げられたのは、対応ブラウザが限られていること。Portalsは2020年2月現在、Google ChromeでPortalsのフラグを有効にした場合のみ利用可能な技術。実際のサービスに導入する際には、何らかのフォールバックを用意しておく必要がある。

　インプレッションの計測に関しても注意が必要だという。インプレッションの計測方法によっては、portal要素でページを取得した時点でインプレッションが計測されてしまう場合があるためだ。ログ計測や、特にインプレッション課金制の広告などは注意が必要だ。

　最後に、萩野氏と関氏がPortalsを使ってみた感想が述べられた。

　「デザイナーとしては、表現の幅が拡がって楽しい。アプリのようなリッチな体験を、どんどんWebでも気軽に実現できるようになってきたのは、エンジニア・デザイナー問わず、作りがいがあります。どんどん作って試す『プロトタイピング』と、エンジニアとデザイナーが協業する『ともにつくる』という気持ちが重要だと改めて感じました」（萩野氏）

　「ユーザーのストレスを軽減できるのがPortalsの魅力。検索ページから商品ページへの遷移に時間がかかることには以前から課題を感じていたし、自分自身もユーザーとしてストレスを感じていました。その課題を解決する方法の一つを見つけることができたことが大きい。いろいろ試して導入を検討していきたいと考えています」（関氏）

　両氏は今後もこうした新しい技術に積極的にトライし、「ユーザー体験向上のための最適な方法は何なのか」と常に問いながら、Yahoo! JAPANサービス運営を続けていきたいと語り、セッションを締めた。