Portalsをさわってみた

背景

• 話題の Portals を使った画面遷移 UX の未来という記事を読んでPortalsを知りました
• 詳しいことは上記の記事に書いてありますが自分なりにさわってみた記録を書きます

Portalsとは

• <portal>という新しいHTMLタグのことです
• <iframe>のように別のページを埋め込むことができます
• <iframe>と違うところは表示したページに遷移させることができる点です
• すでにページ上に埋め込まれているページに遷移するため高速に遷移することができます
• ただし<iframe>のように埋め込んだ中のページを操作することはできずプレビューのみといったイメージです

作ったもの

• 言葉だけだとよくわからないと思うのでデモアプリを載せます

• mouseEnter/mouseLeaveでPortalsの表示/非表示を切り替えてクリック時に遷移するように実装してあります

• 普段使い慣れているのでReactで書いています

• コードあまりきれいではないですがリポジトリはこちらです

  • https://github.com/ozaki25/portal_demo

• デモアプリはこちらです

  • https://ozaki25.github.io/portal_demo/

• ※ChromeCanaryを引数付きで起動しないと動作しません

  • 上記ブログ記事より引用

  現状 Chrome Canary で Portal は試せます。起動フラグを付けて Canary を立ち上げてください。
  Mac: open -a Google\ Chrome\ Canary --args --enable-features=Portals
  Windows: ショートカットを右クリック、リンク先に --args -enable-features=Portals のオプションを付けて起動。
  Linux: Canary は Linux ではサポートされていません。代替として Chromium をご利用ください。

Portalsの使い方

• デモアプリではややこしいことをしていますが単に使うだけであればとても簡単です
• 以下のファイルを作成してブラウザで開いてみて下さい
  • ※ChromeCanaryを引数付きで起動するのを忘れずに
• ①ページを表示するとQiitaのトップページが表示されます
• ②画面をクリックするとQiitaへ遷移します

index.html

<portal src="https://qiita.com" style="height: 1000px; width: 1000px"></portal>
<script>
  const portal = document.querySelector('portal');
  portal.addEventListener('click', () => portal.activate());
</script>

①ページを表示するとQiitaのトップページが表示される

• <portal>タグのsrc属性に表示したいURLを設定するだけで表示することができます
• 上のデモで表示/非表示を切り替えていたのはタグ自体を挿入したり削除したりしていただけです

②画面をクリックするとQiitaへ遷移する

• Portalsでページ遷移させるためにはJavaScriptによる操作が必須となります
• <portal>のDOMを取得し.activate()を実行するとPortal内に表示しているページに遷移することができます

まとめ

• Portalsはiframeのようなものと冒頭で紹介しましたが、単に別のページを埋め込むだけでなく新たなUXの実現ができるような面白いタグだということがわかりました
• まだ一般的なブラウザでは動作しませんが実装はとても簡単なので今後が楽しみです