S.F.@SFPGMR
Shadow DOMというのもすでにブラウザでは実装されているのか。。
developer.mozilla.org/ja/docs/Web/We…
twitter apiのwidget.jsの動きをchrome developper toolで見ていて、「#shadow-root」なるものを見つけたので「これ何?」と思ったんだよね。まあしかし、ちょっと見ぬ間にいろいろ変わっとるなあ、Webの技術は。。 https://t.co/McrHnAjmio
「Display Locking」なるものもあるしな。。
blog.jxck.io/entries/2019-0…
仕様的には今こうなっているようだ。試してみたところ、jxckさんの方法ではできなくなってるようだ。
github.com/WICG/display-l…
ちなみにドラフトの仕様を私が試すと、chrome 78では死亡、Chrome Canaryでは動いた。が意図した動きにはならなかった。これは私の実装が悪いのかもしれないが。。今の仕様はHTML Attributeで表示・非表示をコントロールするようになったようですな。
twitterのwidgets.jsを使うのではなく、いちから描画することにするかなあ。やっぱり。
スレッドになってるのを1つのコンテンツとしてまとめたい欲求もあるしなあ。。
今の状況。ちょっとずつ進めている。。 https://t.co/OACvnEz28i
css grid + jsでやるのが、一番モダンなmasonryの実装方法かもね。。
google.com/amp/s/w3bits.c…
tweetを独自描画するのもいいんだけど、puppeteerを使ってプリレンダリングしたものを静的HTMLとして保存するのはどうだろうか。ちょっと試してみようかなと。
github.com/GoogleChrome/p…
puppeteerによるプリンレンダリングはやめて、普通に自前描画することにした。
そして今の成果物。Youtube Playerを埋め込んでみた。なんかちょっともたつくわな。。
sfpgmr.net/sandbox/new-pa… https://t.co/Dx68nOG3N8
今まではAPI得たデータを適当に解釈して表示してきたが、今後は以下を読んでちゃんとやるか。。
developer.twitter.com/en/docs/tweets…
クォートされてるリツイートとかの処理とか、文中のURLやハッシュタグ、URL先のページもTwitter Cardに対応しているんであればそれを解析して表示してやらんといかんしな。。なかなかめんどい。widget.jsに任せると楽なんだけどちょっと重いし、プリレンダリングしずらいんだよなあ。
つまり自前描画はなかなか大変。。
私のやつは、ogpもひも解いてカード形式で表示しようと思ってるけどね。。オリジナリティがある?のはスレッドの表示部分だけなので+αをどこで出すか。。
といいつつogpあたりのところはほとんどいじらず、twitter videoのところをvideoタグで再生できるようにしたに留まる。。土日はほとんどコード書かずに終わる。。
sfpgmr.net/sandbox/new-pa… https://t.co/nWwZ8f0JL9