最近Portal Elementの様子を見たりしていて、今日は#portals_studyに話しに行く。あと30人参加できるので来てください。
web-study.connpass.com
適当に触れる砂場としてこのブログを使っていて、ヘッダのインターン来てくれバナーも実はPortal対応している。対応ブラウザで見てください。
はてなブログの記事はカードとして貼れるようになっているけど、サービスとしての対応がなくても、JS/CSSを書ければカード的なものを作れるはずと思っていたのでやってみた。
この何の変哲もないブログ記事のカード部分がportalになっている。
頭痛(8) - hitode909の日記
貼られる側の対応
デザイン編集画面でJSやCSSを書いて用意しておく。
- window.portalHostが真ならdocument.body.classListにportalクラスを足す
- windowにportalactivateイベントが発火したらportalクラスを外す
- bodyにportalクラスが付いてるかどうかを使ってカードっぽいスタイルを切り替える
- ブログタイトルを消したり、フォントサイズを小さくしたり、pをinlineにしたり
- 冒頭のimgだけを表示したかったけどできてない
貼るときの対応
portalの中にiframeを書いておくとフォーバックしてくれるので、内側に普通のブログカードを貼っておく。
<portal src="https://blog.sushi.money/entry/2019/05/11/210013" title="頭痛(7) - hitode909の日記" class="embed-card embed-blogcard" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"> <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fblog.sushi.money%2Fentry%2F2019%2F05%2F11%2F210013" title="頭痛(7) - hitode909の日記" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> </portal>
論点
- カードとして貼り付けられた場合のエンドポイントを別に用意しなくて済み、その後のページ遷移も高速化できるのは嬉しい
- portal内でもトラッキングや広告のタグが二重に動いてしまう
- そのうち、トラッキングタグ側で対応してもらえて、portalとして貼られた数を計測できるようになるのではないか
- 広告のヒットは倍になるとまずそう、このブログでは広告を外している
- portal内に貼られたときにはサイドバーとか表示してないのでページロード時にいろんな通信をしなくて良いはず
- 非表示になっている場合は通信しないことにして、表示されたタイミングでIntersectionObserverとかを使って遅延ロードするようになるとよりよさそう
- X-Frame-Optionsを無視してなんでも貼れるのでクリックジャッキングなどに使われる恐れがある
- いずれportalの仕様としてoriginを制限するようなものは必要ですねという話になっているので、そのうち動かなくなるはず
- 本来のportalは複数のブラウザのコンテキストを切り替えできる、ブラウジング体験を根本から変え得るものであるので、このような使い方はportalは便利なiframeであるという認識を助長させるのでよくないのではないか
- という話をパスタ君とよくしている。ブラウザをつくってる人のムーブメントを応援するべきという考えは賛成だけど、僕は道具は動くなら動くように好きに使ったら良いじゃんと思っているのでちょっと考えが違うと思う。食洗機でりんごを茹でたりする。
