デブサミ2020【14-A-2】新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜 #devsumiA #devsumi
-
- いいね！3
Yahoo!デベロッパーネットワーク
@ydnjp
#devsumiA にて登壇中のセッション 「新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜」について資料を公開しています。 #devsumi slideshare.net/techblogyahoo/…
2020-02-14 11:06:37
materia
@materia_x64
このブログポストから突っ込んだ内容になるのかな。 #devsumi #devsumiA ／ 新しいHTMLタグportal、Portals機能で変わるWebの遷移体験！ CDS2019で紹介されたヤフーの実装例 #UIUX #ydnjp techblog.yahoo.co.jp/entry/20191118…
2020-02-14 11:08:07
materia
@materia_x64
<portal> = <a> + <iframe> 特定のページ要素を予め取得して表示しナビゲートできる。 #devsumi #devsumiA
2020-02-14 11:16:32
まあくん
@ruzxa1
画面遷移が発生しているけれど、portalを利用することで簡易ページを間に挟んでシームレスな体験を作っている。portalを利用していない場合と比べてみると気持ちよさの違いが良くわかる #devsumiA
2020-02-14 11:18:49
materia
@materia_x64
遷移中でも、遷移前のページ情報を利用して簡易スケルトンを表示する。 非対応ブラウザは普通の<a>として動作する。 <portal>使うとめっちゃぬるぬる動かせるんだなー #devsumi #devsumiA
2020-02-14 11:20:31
ozaki25
@ozaki25rn
PayPayモール - 一覧ページから商品ページへの遷移にPortalsを使用 - List to Detail Yahooニュース - 記事から記事への遷移にPortalsを使用 - Detail to Detail #devsumi #devsumiA
2020-02-14 11:20:45
ozaki25
@ozaki25rn
Portalsを使えば音声の再生を継続したままページ遷移できる - iframeではできない #devsumi #devsumiA
2020-02-14 11:22:07
materia
@materia_x64
リッチな表現 2つの考え方 ・プログレッシブエンハンスメント ・グレースフルデグラデーション #devsumi #devsumiA
2020-02-14 11:25:07
materia
@materia_x64
非対応ブラウザの考慮。 IEとかIEとかIEとか('ω') #devsumi #devsumiA pic.twitter.com/jP5H4AcKTY
2020-02-14 11:27:36
拡大
oekazuma
@oekazuma
ちゃんとみんな使えるようにデザインしないといけない #devsumiA pic.twitter.com/feOqONKbaN
2020-02-14 11:27:37
拡大
materia
@materia_x64
portal埋め込み #devsumi #devsumiA pic.twitter.com/FMFV9UoQ3K
2020-02-14 11:31:17
拡大
ozaki25
@ozaki25rn
サーバサイドで<portal src="/b.html"></portal>のように埋め込むこともできるけど、非対応ブラウザのことを考慮すると現状ではJSで実装する必要がある #devsumi #devsumiA
2020-02-14 11:31:37