Loading

S.F. Info.

S.F.@SFPGMR

2019/11/5 6:01:06

Shadow DOMというのもすでにブラウザでは実装されているのか。。

shadow DOM の使い方 - Web Components | MDN
Web コンポーネントにおいてカプセル化 (構造やスタイル、挙動を隠し、同じページの他のコードと分離すること) は重要です。これにより他の場所でのクラッシュを防ぎ、またコードが綺麗になります。Shadow DOM API はこの隠され分離された DOM を付加するための方法を提供しています。この記事では Shadow DOM を使う基本を記述しています。

2019/11/5 6:04:00

twitter apiのwidget.jsの動きをchrome developper toolで見ていて、「#shadow-root」なるものを見つけたので「これ何?」と思ったんだよね。まあしかし、ちょっと見ぬ間にいろいろ変わっとるなあ、Webの技術は。。 https://t.co/McrHnAjmio

2019/11/6 20:20:20

「Display Locking」なるものもあるしな。。

Display Locking によるレンダリングの最適化と Async DOM | blog.jxck.io
React や lit-html などにより、 DOM 操作の抽象化に加えて最適化が提供されることが一般的となった。見方を変えれば、本来ブラウザがやるような最適化を、ライブラリが肩代わりしていると捉えることもできる。これは、現在の標準 API には、規模が大きく処理が複雑な...

2019/11/7 6:03:24

仕様的には今こうなっているようだ。試してみたところ、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.

2019/11/7 6:11:54

ちなみにドラフトの仕様を私が試すと、chrome 78では死亡、Chrome Canaryでは動いた。が意図した動きにはならなかった。これは私の実装が悪いのかもしれないが。。今の仕様はHTML Attributeで表示・非表示をコントロールするようになったようですな。

2019/11/7 21:00:04

twitterのwidgets.jsを使うのではなく、いちから描画することにするかなあ。やっぱり。

2019/11/7 21:00:59

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

2019/11/11 6:13:16

今の状況。ちょっとずつ進めている。。 https://t.co/OACvnEz28i

2019/11/11 18:08:17

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.

2019/11/12 20:28:28

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.

2019/11/15 6:14:29

puppeteerによるプリンレンダリングはやめて、普通に自前描画することにした。

2019/11/15 6:14:31

そして今の成果物。Youtube Playerを埋め込んでみた。なんかちょっともたつくわな。。

No Image
Twitter APIを試す
https://t.co/Dx68nOG3N8

2019/11/17 7:00:00

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

No Image
Introduction to Tweet JSON — Twitter Developers

2019/11/17 7:05:03

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

2019/11/17 7:05:04

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

2019/11/17 7:07:44

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

2019/11/18 6:09:46

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

No Image
トップページをリニューアルする
https://t.co/nWwZ8f0JL9

2019/11/20 5:15:37

ogp/twitter card/json-ldのメタデータをpuppeteerで取り出すコードをようやく書き始めた。

2019/11/20 5:21:16

しかしquerySelector/querySelectorAllは便利ですなあ。。これでdom操作のためだけにjquery/d3を使わなくてもよくなってますな。しかしこのAPIを規格に入れさせたという点でjqueryの果たした役割は大きいわ。。

2019/11/20 6:17:48

d3はselectしたグループに対してまとめて何かできるという点でメリットはあるけどね。利用者側ではグループに対して何かするときにループ回さなくていいんだよね。。jqueryもそうだったかな?

2019/11/20 6:22:26

今日書いたのはこのコード。。

sandbox/make-embeded.mjs at 238f8f4b2c38082dcf5f944e364f2adcc10a5e80 · sfpgmr/sandbox · GitHub
JS,WebGL,three.jsをいじるためのレポジトリ. Contribute to sfpgmr/sandbox development by creating an account on GitHub.

2019/11/21 5:01:15

Array.reduceのつかいどころをようやく理解できた私。

2019/11/21 5:10:47

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

2019/11/21 5:13:34

Possible EventEmitter memory leak detected. 11 console listeners added to [Page]. Use emitter.setMaxListeners() to increase limit

2019/11/21 5:36:34

これを回避するには以下を追加しないといけないようですな。。
process.setMaxListeners(Infinity); // <== Important line

2019/11/21 5:36:35

さらにいかによれば

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

2019/11/21 5:47:18

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

2019/11/21 20:50:31

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

2019/11/24 5:59:16

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

2019/11/24 10:58:47

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

トモカズ@tomo0354

2019/11/24 8:33:41

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

葛飾出身@ahtamaraneze

2019/11/23 3:53:48

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

S.F.@SFPGMR

2019/11/19 5:02:05

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

No Image
Amazon CAPTCHA

カヂロ🍠🍠🍠原稿@kadikadisake

2019/11/17 21:47:51

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

S.F.@SFPGMR

2019/11/17 8:16:30

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

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

2019/11/17 8:19:25

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

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

2019/11/17 8:21:03

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

Youtube - Haruomi Hosono - Living Dining Kitchen

2019/11/17 8:23:15

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

Youtube - Gradated Grey - YMO

S.F.@SFPGMR

2019/11/17 7:09:43

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

No Image
Dwitter - javascript demos in 140 characters

Dwitter is a social network for building and sharing visual javascript demos limited to 140 characters. See the impressive creations crammed into so few characters, and play around with your own code!

2019/11/17 7:11:26

No Image
fleur v2 by netule | Dwitter

S.F.@SFPGMR

2019/11/7 20:59:14

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

2019/11/15 6:16:59

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

S.F.@SFPGMR

2019/11/11 13:08:16

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

2019/11/11 13:09:02

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

2019/11/11 19:56:13

今年買ったゲームは(全部STEAM)、

・Shadow Of The Tomb Raider

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

2019/11/11 20:06:51

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

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

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

2019/11/11 20:06:51

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

Youtube - Cities: Skylines - Release Trailer

2019/11/11 20:06:51

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

Youtube - Official Call of Duty®: WWII Reveal Trailer

2019/11/11 20:09:22

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

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

2019/11/11 20:10:38

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

2019/11/11 20:52:54

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

2019/11/11 20:55:50

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

2019/11/11 20:59:17

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

Youtube - PC Longplay [563] Wolfenstein 3D

2019/11/11 21:00:27

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

Youtube - [60FPS] DOOM (1993) LONGPLAY

2019/11/11 21:01:30

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

Youtube - Half-Life: Full Game Walkthrough

2019/11/11 21:04:29

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

2019/11/11 21:06:11

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

2019/11/11 21:08:35

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

2019/11/11 21:11:13

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

Youtube - Boreal Alyph Mini Update: October 2019

2019/11/11 21:15:49

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

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

2019/11/11 21:23:11

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

2019/11/11 21:30:32

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

D.S.A.@ym2413

2019/11/11 7:42:17

Comparing YM2413 sounds between:
- Real YM2413 chip
- New emu2413 1.0.0-alpha5
- Old emu2413 v0.61 https://t.co/53fZB8oNFK

うつぼかずら@vstcpp

2019/11/11 12:16:25

VST自作の断念要因

第1位:C++

(当社調べ) twitter.com/jscmla1118/sta…

ataritoobin@ataritoobin

2019/11/11 3:35:22

ALERT! ALERT!
#ナムコ #ボスコニアン https://t.co/Y72ANZAPZn

S.F.@SFPGMR

2019/11/9 7:19:08

No Image
Display requirements – Twitter Developers
Tweets are one of our most visible brand elements, so it’s important that they are presented correctly. You should comply with the display requirements below when you display Tweets, timelines, and other Twitter content.

S.F.@SFPGMR

2019/11/7 7:28:49

No Image
CSS Containment Module Level 2 (日本語訳)

S.F.@SFPGMR

2019/11/6 20:18:24

いやーしかし喉が痛いなあ。。

S.F.@SFPGMR

2019/11/5 7:22:34

No Image
The Rise of "Worse is Better"

Rui Ueyama@rui314

2019/11/4 21:25:39

IPv6がなかなか普及しない理由について考察してみました。 note.mu/ruiu/n/n1676c1…

荒木健太郎@arakencloud

2019/11/4 3:41:43

宇宙から見た今朝の朝焼けがきれい. https://t.co/3OqeXuyWfa

S.F.@SFPGMR

2019/11/4 9:18:25

Youtube - 中川家ブルース 〜大阪地下鉄堺筋線〜

2019/11/4 14:35:51

堺筋線というのが渋いね。。

ワンダバン@wandaban

2019/11/3 21:04:28

ニューラルネットでゴジラ1954をカラーにしてみた。(その3)

#ゴジラの日 https://t.co/dsaLgJrf2v

まかべひろし@sinpen

2019/11/4 9:19:25

昔、エミュに頼りまくって作ったGameBoyソフトが実機でまったく動かず、アルファ版提出したらクライアントに超怒られたのを思い出した。エミュは完璧じゃない前提でいないとダメね。(学生時代の思い出 twitter.com/mucom88/status…

S.F.@SFPGMR

2019/10/20 6:41:09

pm2も前はes moduleが読み込まれない「--experimental-modulesが無視される」というのがあったんだけど、今は解消されているようだね。とするとrollupでわざわざ変換しなくてもよくなるなあ。

pm2/mjs.sh at 29cccd9437e75e36f56d1afb0de3d73a5d033d21 · Unitech/pm2 · GitHub
Node.js Production Process Manager with a built-in Load Balancer. - Unitech/pm2

2019/10/22 8:49:07

と思って試してみたらまだ解消されてなかったな。。

--experimental-modules flag appears to be ignored · Issue #3294 · Unitech/pm2 · GitHub
I'm using the node_args section as follows to enable module support in a Node v9.1 project: "node_args": "--experimental-modules" It appears to ignore the flag, as starting my script manually using the above works perfectly. Is there som...

2019/10/22 9:41:54

理由はこれらしい。

Node v10.5 + ESM not working · Issue #3751 · Unitech/pm2 · GitHub
Repro here: https://github.com/damianobarbati/yarsk/tree/50ms Just clone, yarn install and yarn serve:dev. It fires pm2-runtime which just reports the following: [WARN] PM2 Daemon is already running (node:4716) ExperimentalWarning: The E...

2019/10/22 9:48:53

これによると、

・pm2は.mjsファイルをrequireによってサイド・ローディングしようとするので、そこで以下エラーが発生する

[ERR_REQUIRE_ESM]: Must use import to load ES Module

2019/10/22 9:51:03

回避するには2つの方法がある。

1.esmを使ってesmファイルの拡張子を.mjs -> .jsに変えてnode_argsに-r esm をつけて実行

2.ダイナミック・ローディングを使って.jsから.mjsをインポートする

ということらしい

2019/10/22 9:52:19

この2つの方法でもいいような気がするが、私はrollupでバンドルしたjsで実行することにした。。

2019/10/22 9:54:05

というわけでkoaに移行して、ようやくnode12かつhttp/2でWebをホストできるようになった。

S.F. Web
Programming,Music,Game,etc..


あとはコンテンツをちゃんと作り直さんとな。。

2019/10/22 9:55:11

ああ、ちょっとすっきりしたな。。

2019/10/22 18:17:06

トップページはTwitter,Youtube etc ... のアクティビティ表示をメインにするつもりなのだが、まだ具体的なアイデアは浮かばんな。。

2019/10/22 18:18:40

年内はページ改造で終わってしまいそうだな。。うーむゲーム音源作りはしばらくお預けか。。でもできるだけはやくこれを片付けて次に進もう。。

2019/10/22 18:22:22

HTTP2で動いてるかチェックしてたらhttp/2+quic/46とかいうプロトコルを発見した。なんじゃこれは。。 https://t.co/pdfs97LotU

2019/10/22 18:24:35

quic(くぃっく)ちゅうプロトコルなのね。。udpによる多重接続か。。

No Image
QUIC - Wikipedia

2019/10/22 18:25:31

くそう、HTTP/2のサポートは結構はやめにやったんだけど、もう時代遅れになっとるのか。。いうてもまだquicはこれからのようだのぉ。。

2019/10/22 18:27:16

nginxも1.17でquicをサポートするのですな。。

2019/10/22 18:29:18

nodeもquicのサポートをしようとしとるのか。。

GitHub - nodejs/quic: Exploring a QUIC implementation for Node.js core
Exploring a QUIC implementation for Node.js core. Contribute to nodejs/quic development by creating an account on GitHub.

2019/10/22 18:29:30

いやぁ。知らんかったなあ。。

2019/10/22 18:30:30

udpと聞くとゲームに向いてる気がする。なぜか..。

2019/10/22 18:32:50

いまでこそTCP/IPが標準となってるが、私がNWを知ったころはIPXやらNetBEUIやらとかもありましたなあ。なんか思い出してしまったわ。。

2019/10/22 18:35:29

まあそれはさておき、ejsを復習しつつ、今のテンプレート・エンジン界隈をチェックするとするか。。

2019/10/23 12:44:50

画像最適化戦略 Lazy Loading 編 | blog.jxck.io
長らく議論されてきた `<img>` や `<iframe>` における Lazyload について、仕様と実装が動きを見せている。ここでは、特に画像 `<img>` に注目し、 Lazyloading の議論の変遷を踏まえた上で現状を解...

2019/10/26 15:09:10

トップページはTwitter、YouTube、自作ブログシステムのポストを時系列で表示するものにしようかなと思ってる。まずはtwitterのツィートをAPI経由で取り出してテンプレート・エンジンでHTMLしてみようかなと思っている。データのマネジメントはsqlite3で行おうかなと思ってる。

2019/10/26 15:33:29

これすごく便利だと思うんだよね。。

SQLite3のJSON機能が便利だった - Qiita

2019/10/28 6:01:52

とりあえず、Twitter APIをいじってみた結果。。200個のTweet&RetweetをCSS Gridでただ並べただけ。。

No Image
Document
https://t.co/I2RN8E5UsY

2019/10/28 6:04:21

Tweetのレンダリングはoembedに任せてみてるが、このままじゃいかんよなあ。。

No Image
GET statuses/oembed — Twitter Developers

2019/10/28 6:08:49

表示のカスタマイズをしたいと思うけど、ルールを守らんといかんので、よく読んどかんといかんわな。。

No Image
Display requirements – Twitter Developers
Tweets are one of our most visible brand elements, so it’s important that they are presented correctly. You should comply with the display requirements below when you display Tweets, timelines, and other Twitter content.

2019/10/28 7:46:53

masonryっていうのか、このレイアウト。私がやりたいのはまさにこれなのだった。今はそうなってないけど、家に帰ったらトライしよう。。

最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法 | SiTest (サイテスト) ブログ
Masonry のようなグリッドレイアウトを CSS だけで実装する方法をサンプルコードを交えながらご紹介します。codepen でサンプルを公開しています。

2019/10/28 7:48:05

cssだけでできることが増えてるんだなあ。トランジション系のやつもチェックしとかんといかんな。。

2019/10/28 7:59:09

flexboxを使う方法もあるのか。。

digipress.info/tech/pure-css-…

2019/10/28 8:01:16

これはcss gridを使うmasonryレイアウトの実装方法。これが良さそうですな。。

Masonry style layout with CSS Grid - Andy Barefoot - Medium
I’ve been working on a way of using CSS Grid and a small amount of JavaScript to make Masonry style layouts. I reproduce all the functionality of Masonry whilst remaining flexible and responsive…

2019/10/28 8:01:41

家に帰ったら試してみよう。。

2019/10/29 6:03:29

いろいろあって今minimasonry.jsを試してる。。

No Image
MiniMasonry.js
Minimalist dependancy free Masonry layout library
https://t.co/xaLbI2rK48

2019/10/29 12:50:46

このソースコードを読んだが、なかなか面白いなあ。translate3d使って高速に配置するというね。。gpuのアクセラレーションが期待されるんだな。。と思ったらホームページに書いてあるわ。。

2019/10/29 12:52:00

コードも138行しかないわ。。

2019/10/31 20:17:35

このライブラリ、リサイズするとちょっと間隔がおかしくなるバグがある。ソース短いのでclassモジュール化するのと合わせてバグ修正を行った。

2019/10/31 20:21:16

このライブラリはcss gridを使っているわけではなくて、親をposition:relative、子をposition:absoluteにして、JSで指定した幅で子を並べるという単純なものである。こういうJSはむかし見かけたことがあるが、違うのはtranslate3dを使って位置決めをしているところである。

2019/10/31 20:23:45

ちなみに修正したソースはこれである。

sandbox/minimasonry.js at master · sfpgmr/sandbox · GitHub
JS,WebGL,three.jsをいじるためのレポジトリ. Contribute to sfpgmr/sandbox development by creating an account on GitHub.

2019/11/1 6:08:18

現在の状況。ぼちぼち進めてる。。 https://t.co/05kMAngTTa

2019/11/3 8:00:03

twitter APIのstatuses/user_timelineで取得できるtextが途中でtruncateされてしまうので調べたところ、ここに行き着いた。。

ios - Twitter api text field value is truncated - Stack Overflow

2019/11/3 8:01:01

新しいパラメータ「tweet_mode:'extended'」が必要なのね。ドキュメントには書いてなかったんだよなあ。。

2019/11/3 8:22:35

masonryレイアウトの勉強ついでに関連する技術について勉強中。。

No Image
Binary Tree Bin Packing Algorithm

2019/11/4 8:19:26

twitter APIで得たデータをmasonryレイアウトで表示してみてる。現在の成果。oembedで取得したHTMLをレンダリングして並べることができるようになった。が、猛烈に遅いな。。 https://t.co/cHvvLoMPO7

2019/11/4 8:19:27

これがレンダリング時の動画。。猛烈に遅いことがわかっていただけると思う。oembedで取得したHTMLはwidgets.jsにレンダリングを任せてるんだけど、そこがまず遅い。これが200個ともなるとまあこうなるわな。。

Youtube - Twitter APIで取得したデータをMasonryレイアウトで表示してみる。

2019/11/4 8:26:00

事前に静的にページをレンダリングするときにwidgets.jsを実行すればこれは解消しそうだけど、Twitterのステータスはリアルに変動するから静的な領域にそれを移行するのは全部は難しいと思う。

2019/11/4 8:26:00

工夫した点としては、widgets.jsはレンダリング終了時にイベントを発火してくれるので、それを捕まえてminimasonry.jsのlayout()を呼んでいるところだろうか。各tweetの高さはJSによるレンダリングが完了しないと判明しないので、layout()は最後に処理する必要がある。

2019/11/4 8:28:27

あと一応レスポンシブに作ってるんだけどブラウザのサイズを変更すると妙な隙間が空いてしまう点も何とかせんといかんな。。

2019/11/4 8:36:10

あと各ツィートの横幅もある程度可変できるようにしたいんだよな。

2019/11/4 8:38:09

トップページはTwitterだけではなくて、Youtubeのアップデートとか、ブログの記事とか、Qiitaの記事とかをまとめて表示するつもりなんだけどね。10~30アイテム位でページングしようと思っているんだよね。

2019/11/4 9:42:01

これが今今の成果物ですがね。。まあ描画が遅いわ。。

No Image
Document

D.S.A.@ym2413

2019/11/4 9:35:20

SINテーブル、指数テーブル、エンベロープ生成器を全交換した emu2413 の演奏です。動画はステレオで右チャンネルが emu2413、左チャンネルが ym2413 実チップの演奏。だいぶ実機に近くなったと思います。 https://t.co/XoL6mPzItZ

KenKenMkIISR@KenKenMkIISR

2019/11/3 22:11:23

やったー、できた!ボタンの代わりに基板を傾けて動かすパックマン。本体を軽くノックするとゲームスタート。PIC32マイコンと加速度センサー、液晶、圧電ブザーのシンプルな構成で、作るのも簡単。モバイルバッテリーをつなげればどこでも遊べちゃう。 https://t.co/P9jao5y2Vb

三重野 慶art@mienokei

2019/11/4 0:32:41

この絵が出来たの2年前
丸々1年半この絵だけ描いてた
もうすごい昔に感じるな https://t.co/nYVa0Z7KGK