S.F. Info.

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を使うのではなく、いちから描画することにするかなあ。やっぱり。

スレッドになってるのを１つのコンテンツとしてまとめたい欲求もあるしなあ。。

今の状況。ちょっとずつ進めている。。 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を埋め込んでみた。なんかちょっともたつくわな。。

No Image

Twitter APIを試す

今まではAPI得たデータを適当に解釈して表示してきたが、今後は以下を読んでちゃんとやるか。。

No Image

Introduction to Tweet JSON — Twitter Developers

クォートされてるリツイートとかの処理とか、文中のURLやハッシュタグ、URL先のページもTwitter Cardに対応しているんであればそれを解析して表示してやらんといかんしな。。なかなかめんどい。widget.jsに任せると楽なんだけどちょっと重いし、プリレンダリングしずらいんだよなあ。

つまり自前描画はなかなか大変。。

私のやつは、ogpもひも解いてカード形式で表示しようと思ってるけどね。。オリジナリティがある？のはスレッドの表示部分だけなので＋αをどこで出すか。。

といいつつogpあたりのところはほとんどいじらず、twitter videoのところをvideoタグで再生できるようにしたに留まる。。土日はほとんどコード書かずに終わる。。

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 !

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 w...

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 w...

たしかにこれも考慮せんと同じエラーが出ますな。。 https://t.co/2Gd3AoW7YF

ページからのメタデータの取り出しはそこそこできたと思うので、これを描画するコードを追加することにしよう。あとは無限スクロールをどう実装するかですな。

ページのメタデータ(ogp/twitter card/json-ld/html meta)を取り出してカード形式で表示する部分は少し進捗。イメージの取り出しはもうちょっとちゃんとしないとなあ。。json-ldをもうちょっとちゃんとパースするとか、faviconも対象にするとか、アバターのイメージも含めるとか。。 https://t.co/KJpoZfGQ07

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

ogpのメタデータ取り出しコードは思いっきりバグっていたことが発覚。修正した。メタデータ取り出しコードを実際書いてみると、json-ldのほうが楽でいいわ。textContent取り出してJSON.parseするだけだもんね。こりゃgoogleもこれからはjson-ldで行くって言うわな。。

データをmetaタグや普通のタグに埋め込むのは解析コストが高いですわな。私ごときではメタデータを使って関係や構造の解析まではとてもできんが、検索エンジンとかはふつうにやってるんだろうかね。。

metaデータのパーサはnode moduleであったのですな。

GitHub - blakeembrey/node-htmlmetaparser: A `htmlparser2` handler for parsing rich metadata from HTML. Includes HTML metadata, JSON-LD, RDFa, microdata, OEmbed, Twitter cards and AppLinks.

A `htmlparser2` handler for parsing rich metadata from HTML. Includes HTML metadata, JSON-LD, RDFa, microdata, OEmbed, Twitter cards and AppLinks. - blakeembrey/node-htmlmetaparser

まあ自前のコードでかなりのことができるようになったのでこのままで行くけどね。。

twitterのuser_timeline apiは過去３２００ツィート分までは遡れるので、APIを使って取れるだけデータを取った。これを使って無限スクロールで過去コンテンツをさかのぼれるようにし、かつページングもできるようなデータ＆ページ構造を考えて実装してみることにする。

youtubeコンテンツは初期はサムネイルとタイトル表示とし、クリックしたらplayerに差し替えて再生するように変更した。そしたらページ表示がかなり軽くなった。

ページングと無限スクロールの両立は以下の技術でなんとかなりそうな気がしてきた。

・fetch
・DOMParser
・いろいろなObserverたち
・HTML History

Mutation/Intersection/Resize Observerはなかなか強力である。。

MutationObserver - Web API | MDN

MutationObserver とは、指定したコールバック関数を DOM の変更時に実行させる API です。この API は、DOM3 Events の仕様で定義されていた Mutation Events を新しく設計し直したものです。

Intersection Observer API - Web API | MDN

Intersection Observer API (交差監視 API) は、ターゲットとなる要素が、祖先要素もしくは文書の最上位のビューポートと交差する変更を非同期的に監視する方法を提供します。

ResizeObserver - Web API | MDN

ResizeObserver インターフェイスは、Element のコンテンツ矩形または SVGElement のバウンディングボックスへの変更を監視します。コンテンツ矩形は、コンテンツを配置できるボックスです。つまり、ボーダーボックスからパディングを引いたものです。(ボーダーとパディングの説明はボックスモデルを見てください。)

Intersection Observerを使用してInfinite Scrollを実装してみた。

トップページをリニューアルする

Programming,Music,HTML5,WebGL,javascript,WebAudio

iphone7だと処理が追いつかない感じ。。

fetch + domparser + intersection observer の組み合わせがモダンなinfinite scroll の実装方法なのかなーと思ってるけどね。。

fetchはjsonではなく次のページを読んで、domparserでパースしてからarticleだけを抜き出してる。それを適宜appendしてくんだよね。

挿入のタイミングは番兵エレメント+intesection observerの組み合わせでコントロールするわけですな。

1981年のI/O表紙。「パーコン」は「パーソナルコンピューター」の略語。このころI/Oは「パーコン」、ASCIIは「パソコン」と記述していた。最終的に残ったのは「パソコン」だけど、当時表記がぶれていた歴史的事実を知ってほしい。 https://t.co/Dfg9xIcDlf

ベッドの脇に(PCと)ディスプレイを設置
当時のラジカセを置いてあるかのような感じになり、サイズもほぼ同じ。
中学生の頃に戻ったみたい。（懐古趣味） https://t.co/R0Lbzv6qA9

今日の日記です（527）
アホみたいに時間がかかりました https://t.co/jYpShT0YEp

@osmk15 当時使っていたのはこれですね。

No Image

Amazon | 1stモール スマホにキーボード　無線キーボード Bluetooth 搭載 カバー ケース アンドロイド デザイン おしゃれ iPhone Android iPad　ブラック ST-１STSMAPASO2 | COM-SHOT | パソコン用キーボード 通販

にんげんってなんだ https://t.co/05XcMpqjAi

最近この「ろっか・ばい・まい・べいびい」がとても気に入っていて、よく聴く。ギターとベースのシンプルなバッキング。ギターの音が心の琴線に触れているような感じ。デモをそのままミックスしたらしいね。。

Youtube - 細野晴臣 - ろっか・ばい・まい・べいびい

細野さんの曲で一番好きなのは「夏なんです」だ。これもアコギの音が耳に心地よいし、凝ってるなあという印象。。

Youtube - Happy End - 風街ろまん - 07. 夏なんです

「夏なんです」に匹敵するくらい好きなのが「L.D.K.」なんですわ。これが。

Youtube - Haruomi Hosono - Living Dining Kitchen

「灰色の段階」。いっときこればかり聴いてたときもある。ヤオヤのリズムってほんといいなあと思わせる一曲。

Youtube - Gradated Grey - YMO

タイムラインで流れてきたので知った、dwitterなるサービスもなかなか面白いよねぇ。。

No Image

Dwitter - javascript demos in 140 characters

No Image

fleur v2 by netule | Dwitter

のどの痛みがようやく引いてきた感じ。。

まだ咳は出ている。痰の粘度が高く、のどにへばりついてとても気持ちが悪い。それで咳が止まらないようだ。

久しぶりにゲームをSTEAMで購入。
セール品だけどね。前から欲しかったやつを3つほど。。

しかしやる時間があまりない。tomb raider も途中までで放置してるし。。

今年買ったゲームは（全部STEAM）、

・Shadow Of The Tomb Raider

Youtube - シャドウ オブ ザ トゥームレイダー ”Launch"トレーラー 日本語吹き替え版

・コナミ アーケード・クラシックス

これはサンダークロスやりたさに衝動買い。。

Youtube - 「アーケードクラシックス アニバーサリーコレクション」ローンチトレーラー

・Cities Skylines
以外にシム・シティみたいなやつ好きなんだよね。。

Youtube - Cities: Skylines - Release Trailer

・Call Of Duty WW2
まあこれは昔好きだったFPSが、WW2に回帰したバージョンである。。

Youtube - Official Call of Duty®: WWII Reveal Trailer

そしてこれ。。R-TYPE Dimensions。これもちょっとやりたくてね。。3D <--> 2Dがシームレスに切り替わるのがちょっとすごいですわ。。

Youtube - R-Type Dimensions　プロモーションムービー

セール品も含んでるので全部で10Kくらいですわ。STEAMのセールはちょっとやばい。。

ゲームの振り幅が大きいのはまあしょうがない。風船割りゲームくらいからのお付き合いですからなあ。。

何年も心待ちにしてるゲームは１つだけあって。「Half-Life 2 Episode Three」なんだけどね。

FPSはWolfenstein 3Dからだけなんだけど、あんまり面白いとは思わんかったんだよね。

Youtube - PC Longplay [563] Wolfenstein 3D

DOOMが出てそのグラフィックに「すげえ。」とは思ったものの、これもそんなに面白いとは思わんかった。。

Youtube - [60FPS] DOOM (1993) LONGPLAY

FPSにハマったのは「Half-Life」からであろう。やはり。

Youtube - Half-Life: Full Game Walkthrough

なんちゅうかもう、イントロから映画的で。そして謎ときも少しあったり、エイリアンだけでなく第3の存在が現れて3つ巴の争いになったりするとことか。単なるFPSではないところがいいんだよな。

「Half-Life 2」もその路線で、期待を裏切らない出来だった。パッケージで持ってたのにまた「オレンジ・ボックス」を買いなおしたくらいですからな。。

EPISODE 2がなんか尻切れなというか、続編を匂わすようなエンディングだったような気がするんだな。なんか忘れてるなあ。。もう一回やるか。。 https://t.co/6CwQC0rwrQ

なんかファン・メイドのEpisode 3とかあったりして。

Youtube - Boreal Alyph Mini Update: October 2019

Half-Lifeをリメイクした「Black Mesa」もXenまでできとるということは完成が近いのかいな。。

Youtube - Black Mesa: Xen - Opening Minutes (HALF-LIFE 1 REMAKE)

しかし「Black Mesa」も相当な期間経ってるから、グラフィック見る限り時代遅れ感が半端ないような気もするな。。

このような「Half-Life」ネタをtweetしてしまうということは、何年かに一度訪れる「Half Lifeしたい発作」かもしれんな。。