デブサミ2020【14-A-2】新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜 #devsumiA #devsumi

萩野 誠一[ヤフー] 関 真由美[ヤフー] https://event.shoeisha.jp/devsumi/20200213/session/2384/ Developers Summit 2020の講演資料・参加レポート一覧: https://codezine.jp/article/detail/11981
devsumi デブサミ2020 デブサミ
1
ねむたいぱんだ @8022
portalタグについて学びます。 #devsumiA
Yahoo!デベロッパーネットワーク @ydnjp
#devsumiA にて登壇中のセッション 「新しいHTML<portal>を利用した画面遷移設計 〜PayPayモールとYahoo!ニュースの事例を添えて〜」について資料を公開しています。 #devsumi slideshare.net/techblogyahoo/…
materia @materia_x64
このブログポストから突っ込んだ内容になるのかな。 #devsumi #devsumiA / 新しいHTMLタグportal、Portals機能で変わるWebの遷移体験! CDS2019で紹介されたヤフーの実装例 #UIUX #ydnjp techblog.yahoo.co.jp/entry/20191118…
ozaki25 @ozaki25rn
会場内Portals知ってる人ほとんどいない #devsumi #devsumiA
materia @materia_x64
WebでもAppでもページ表示の体感速度は速いほうがいい #devsumi #devsumiA
materia @materia_x64
ネイティブアプリは(色々できるけども)体験できるまで遠い #devsumi #devsumiA
materia @materia_x64
<portal> = <a> + <iframe> 特定のページ要素を予め取得して表示しナビゲートできる。 #devsumi #devsumiA
まあくん@雑談用 @ruzxa1
画面遷移が発生しているけれど、portalを利用することで簡易ページを間に挟んでシームレスな体験を作っている。portalを利用していない場合と比べてみると気持ちよさの違いが良くわかる #devsumiA
materia @materia_x64
遷移中でも、遷移前のページ情報を利用して簡易スケルトンを表示する。 非対応ブラウザは普通の<a>として動作する。 <portal>使うとめっちゃぬるぬる動かせるんだなー #devsumi #devsumiA
ozaki25 @ozaki25rn
PayPayモール - 一覧ページから商品ページへの遷移にPortalsを使用 - List to Detail Yahooニュース - 記事から記事への遷移にPortalsを使用 - Detail to Detail #devsumi #devsumiA
ozaki25 @ozaki25rn
Portalsを使えば音声の再生を継続したままページ遷移できる - iframeではできない #devsumi #devsumiA
kouki kurihara @kk55525
ネイティブアプリのような体験 #devsumiA
kouki kurihara @kk55525
プログレッシブエンハンスメント グレースフルでグラデーション #devsumiA
materia @materia_x64
リッチな表現 2つの考え方 ・プログレッシブエンハンスメント ・グレースフルデグラデーション #devsumi #devsumiA
materia @materia_x64
非対応ブラウザの考慮。 IEとかIEとかIEとか('ω') #devsumi #devsumiA pic.twitter.com/jP5H4AcKTY
拡大
カズマ @kzm_you64
ちゃんとみんな使えるようにデザインしないといけない #devsumiA pic.twitter.com/feOqONKbaN
拡大
yaaka @yaaka4
プログレッシブエンハンスメントとグレースフルデグラデーション 単語すら聞いたことなかった。 #devsumiA
ozaki25 @ozaki25rn
PWAの思想まんまだけどプログレッシブエンハンスメントを意識することも大事 #devsumi #devsumiA
ozaki25 @ozaki25rn
サーバサイドで<portal src="/b.html"></portal>のように埋め込むこともできるけど、非対応ブラウザのことを考慮すると現状ではJSで実装する必要がある #devsumi #devsumiA
残りを読む(6)

コメント

コメントがまだありません。感想を最初に伝えてみませんか?

ログインして広告を非表示にする
ログインして広告を非表示にする