
S.F.@SFPGMR
Shadow DOMというのもすでにブラウザでは実装されているのか。。
shadow DOM の使い方 - Web Components | MDN
Web コンポーネントにおいてカプセル化 (構造やスタイル、挙動を隠し、同じページの他のコードと分離すること) は重要です。これにより他の場所でのクラッシュを防ぎ、またコードが綺麗になります。Shadow DOM API はこの隠され分離された DOM を付加するための方法を提供しています。この記事では Shadow DOM を使う基本を記述しています。
twitter apiのwidget.jsの動きをchrome developper toolで見ていて、「#shadow-root」なるものを見つけたので「これ何?」と思ったんだよね。まあしかし、ちょっと見ぬ間にいろいろ変わっとるなあ、Webの技術は。。 https://t.co/McrHnAjmio

「Display Locking」なるものもあるしな。。
Display Locking によるレンダリングの最適化と Async DOM | blog.jxck.io
React や lit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑な...
仕様的には今こうなっているようだ。試してみたところ、jxckさんの方法ではできなくなってるようだ。
GitHub - WICG/display-locking: A repository for the Display Locking spec
A repository for the Display Locking spec. Contribute to WICG/display-locking development by creating an account on GitHub.
ちなみにドラフトの仕様を私が試すと、chrome 78では死亡、Chrome Canaryでは動いた。が意図した動きにはならなかった。これは私の実装が悪いのかもしれないが。。今の仕様はHTML Attributeで表示・非表示をコントロールするようになったようですな。
twitterのwidgets.jsを使うのではなく、いちから描画することにするかなあ。やっぱり。
スレッドになってるのを1つのコンテンツとしてまとめたい欲求もあるしなあ。。
今の状況。ちょっとずつ進めている。。 https://t.co/OACvnEz28i

css grid + jsでやるのが、一番モダンなmasonryの実装方法かもね。。
Create Horizontal Masonry layouts with CSS Grid Layout
A tutorial to create a left-to-right masonry layout using CSS Grid Layout properties. Practical and dynamic use case involves a tiny bit of JavaScript.
tweetを独自描画するのもいいんだけど、puppeteerを使ってプリレンダリングしたものを静的HTMLとして保存するのはどうだろうか。ちょっと試してみようかなと。
GitHub - puppeteer/puppeteer: Headless Chrome Node.js API
Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub.
puppeteerによるプリンレンダリングはやめて、普通に自前描画することにした。
そして今の成果物。Youtube Playerを埋め込んでみた。なんかちょっともたつくわな。。
https://t.co/Dx68nOG3N8 No ImageTwitter APIを試す

今まではAPI得たデータを適当に解釈して表示してきたが、今後は以下を読んでちゃんとやるか。。
No ImageIntroduction to Tweet JSON — Twitter Developers
クォートされてるリツイートとかの処理とか、文中のURLやハッシュタグ、URL先のページもTwitter Cardに対応しているんであればそれを解析して表示してやらんといかんしな。。なかなかめんどい。widget.jsに任せると楽なんだけどちょっと重いし、プリレンダリングしずらいんだよなあ。
つまり自前描画はなかなか大変。。
私のやつは、ogpもひも解いてカード形式で表示しようと思ってるけどね。。オリジナリティがある?のはスレッドの表示部分だけなので+αをどこで出すか。。
といいつつogpあたりのところはほとんどいじらず、twitter videoのところをvideoタグで再生できるようにしたに留まる。。土日はほとんどコード書かずに終わる。。
https://t.co/nWwZ8f0JL9 No Imageトップページをリニューアルする

ogp/twitter card/json-ldのメタデータをpuppeteerで取り出すコードをようやく書き始めた。
しかしquerySelector/querySelectorAllは便利ですなあ。。これでdom操作のためだけにjquery/d3を使わなくてもよくなってますな。しかしこのAPIを規格に入れさせたという点でjqueryの果たした役割は大きいわ。。
d3はselectしたグループに対してまとめて何かできるという点でメリットはあるけどね。利用者側ではグループに対して何かするときにループ回さなくていいんだよね。。jqueryもそうだったかな?
今日書いたのはこのコード。。
sandbox/make-embeded.mjs at 238f8f4b2c38082dcf5f944e364f2adcc10a5e80 · sfpgmr/sandbox · GitHub
JS,WebGL,three.jsをいじるためのレポジトリ. Contribute to sfpgmr/sandbox development by creating an account on GitHub.
Array.reduceのつかいどころをようやく理解できた私。
puppeteerのevaluate()中でconsole.logの内容をホストに転送する方法。
Console.log() from page.evaluate() not working · Issue #1944 · puppeteer/puppeteer · GitHub
Hello, I'm trying to console.log() in a page.evaluate() function and it's not working... Any solutions ? Thank you !
しかし以下のIssueが発生。
EventEmitter memory leak detected. 11 exit listeners added · Issue #594 · puppeteer/puppeteer · GitHub
This is the full error message: MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added. Use emitter.setMaxListeners() to increase limit I run Node v8.1.2 with tip-of-tree Puppeteer The code is wr...
Possible EventEmitter memory leak detected. 11 console listeners added to [Page]. Use emitter.setMaxListeners() to increase limit
これを回避するには以下を追加しないといけないようですな。。
process.setMaxListeners(Infinity); // <== Important line
さらにいかによれば
「Note: you don't need to launch browser just to create a page. Instead, you can open multiple pages in the same browser:」
らしい
EventEmitter memory leak detected. 11 exit listeners added · Issue #594 · puppeteer/puppeteer · GitHub
This is the full error message: MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added. Use emitter.setMaxListeners() to increase limit I run Node v8.1.2 with tip-of-tree Puppeteer The code is wr...
たしかにこれも考慮せんと同じエラーが出ますな。。 https://t.co/2Gd3AoW7YF

ページからのメタデータの取り出しはそこそこできたと思うので、これを描画するコードを追加することにしよう。あとは無限スクロールをどう実装するかですな。
ページのメタデータ(ogp/twitter card/json-ld/html meta)を取り出してカード形式で表示する部分は少し進捗。イメージの取り出しはもうちょっとちゃんとしないとなあ。。json-ldをもうちょっとちゃんとパースするとか、faviconも対象にするとか、アバターのイメージも含めるとか。。 https://t.co/KJpoZfGQ07

ツイート内部やカード内部のレイアウトはcss gridを使ってる。これはほんとに便利で楽。flexboxよりもずっとわかりやすいしね。