takker99/ScrapBubbleの開発ログ兼ね作業ログ
from takker99/ScrapBubble
2023-07-01
06:34:43 https://github.com/takker99/ScrapBubble/pull/126
watch listから参加しているproject idsを除いた
2022-10-29
17:35:24 やっばいデグレた
scrapbox.Project.name入れないと反応しない!
17:21:36 release
16:58:34 git cherry-pickがうまくいかない……
手動コピペが時間の無駄なので、wip-refactorをmergeしてしまおう
17:16:20 した
https://github.com/takker99/ScrapBubble/pull/63
番号付き箇条書きへの対応とかもしている
15:42:04 機能ごとにmerge中
✅ScrapBubbleにUserCSS機能を入れる
debug出力分離
https://github.com/takker99/ScrapBubble/pull/67
選択範囲に似ているリンクを入力補完するUserScriptと同じinterfaceにした
15:05:05 だいたいバグ取り終わった
別のbranchを切って新しく差分を作り、機能ごとにmergeしていく
2022-10-09
20:13:55 ここまでで終わりにする
現状の問題点
何回<Card />をhoverしてもデータが読み込まれない時がある
fetchはされている
どこかでデータの流れが止まっている?
2022-10-29 12:52:40 hover()は実行されてた。データフェッチももちろんされている
もうすこしdebugコードを入れて調べてみる
そもそもuseBubbleData()の更新が一度も実行されていない
hoverしてもbubbleされなかった時のログ
初回
https://gyazo.com/a4fbb4180aba3392c04d8d6add559729
2回目
https://gyazo.com/1e45591b1eaaf3a93b7f9acb49fb39c9
ここで前回fetchしたデータが読み込まれるはずなのだが……
別のリンクをhoverしたあと、もう一度hoverすると新しいデータが読み込まれる
projectおよびtitleの変更が走ると、load()が実行されて新しいデータが読み込まれるhttps://github.com/takker99/ScrapBubble/blob/bc58e4d30206b3efcdf9919b0ffdb8bf53f5c7ce/useBubbleData.ts#L19
ということは、subscribe()によるデータ更新が機能していないということか
あー、dispatch()で指定しているidが間違えていたのか
https://gyazo.com/3efbfbe4274be56623cb20f9c444d504
……いやこれは違う。useProject()でdispatchされたやつだ
projectとtitleの順番が逆じゃねえか!!!
https://gyazo.com/e7de7ba276151e2f3dccf371d70e09be
そりゃdispatchされても変更が反映されないわtakker.icon
13:59:07 直った!!!
不要になったデバックコードを全部消す
テストがほぼ0
入れないとまずそう
実装したかったことはまだやれていない
カードの並び替え
<Page />を複数出す
CSSを修正していない
19:02:33 テスト中
1,2個バグを消したらすぐ動いた
ちらつきが出てしまったので、それをなくしている
おそらく選択範囲に似ているリンクを入力補完するUserScriptの開発ログ兼作業ログ#632f00541280f00000787148と同じことをすれば直るはず
https://github.com/takker99/ScrapBubble/commit/a416f000602042137f04b3423efebf03bf3e7e79
19:05:50 だめだ。ちらつきが直らない
別のロジックが原因だな
https://gyazo.com/6c21a75cee0e66ec57cf5dfd1a117020
おっと、GIFに残らないくらいの鋭いちらつきだったようだ
原因探す
GIFに映らないのでわかりにくいかも知れないが、挙動的に<Bubble />の生成でちらついているようだ
19:16:13
https://gyazo.com/05dd10f5594269e2b1e635e8e2eaeb60
今度はGIFでも挙動がわかるように撮影できた
どうやら、<Page />および<Card />の親のstyleが変更された一瞬後に、ページ内容が更新されているようだ
makeStyle()の実行と、useBubbleData()の更新処理に、おそらく1フレームレート分のラグが生じている
こういうのをFOUC(Flash of unstyled content)と呼ぶらしい
useEffectのちらつきを無くしたいときの対処法【useLayoutEffect】
この記事useLayoutEffect()の使い所ですでにメモしてあったじゃんtakker.icon
useEffectを利用した簡単なFOUC対策
useLayoutEffect()
19:34:19 以前のコードだとページデータの更新を2つのuseEffectでやっていたようなので、これを真似てみる
19:36:23 直らなかったOTL
19:44:04 useLayoutEffect()で直った
とりあえずこれでいいか。
18:15:04 一日中やってたけど全然終わらん
複雑すぎない?
takker.iconのcodingの限界ということか。意外と低かったな
https://github.com/takker99/ScrapBubble/pull/63
2022-05-28
18:01:16 急に速くなった!?
10ms ~ 300ms
10倍から100倍速くなってる!
cf. ✅読み込みが異様に遅い原因を調べるためにdebug機能を付けるでは1000~4000msかかっていた
どういうことなの……
17:42:49 release 0.3.0
だめだ。Chrome for Androidでも使ってみたが、気が狂うほど遅い
whiteListにたくさん入れ込まなければ許容できる遅さにはなるが
自分のuserscriptに入れるのはよそう
0.2.2で我慢する
15:25:48 ScrapBubbleの修正 2022-05-28
2022-05-27
07:33:16 細かいところを綺麗にする
✅ソースコードの階層整理を止める (takker99/ScrapBubble)
✅function (JS)をarrow functionに変換する (takker99/ScrapBubble)
✅CIを入れる (takker99/ScrapBubble)
scrapbox-userscript-stdで置き換える
09:36:00 merged
2022-01-23
19:07:25 戻したらすごくスムーズになった
やはりcache周りの処理にバグがあるようだ
18:45:01 ⬜bubblesの読み込みが異様に遅い症状がひどすぎるので、一旦62d5b31にロールバックする
Pull 14のcommit
2022-01-15
19:51:53 released 0.2.0
17:56:07 以下をmergeしたら0.2.0をreleaseする
✅/A/Bをhoverしたら/A/Bを優先して表示させる
✅空リンクの色を変える
17:55:59 release 0.1.7
13:13:20 release 0.1.6
↓refactoringミスってバグが混入した
https://github.com/takker99/ScrapBubble/pull/12 で直した
12:18:31 ちょっとしたrefactoring
https://github.com/takker99/ScrapBubble/pull/10
2022-01-06
19:39:47 ✅CSSを分離した (takker99/ScrapBubble)
2021-12-21
09:14:15 テーブル記法内のテキストも構文解析するようにしたhttps://github.com/takker99/ScrapBubble/commit/99678808d6a3fca908226063d7e1c5486013443c
本家と違って、全ての記法を使える
リンクとアイコン記法だけに絞るのが面倒だった
2022-01-12 22:26:47
どうやらテーブル記法中の記法は、リンクとアイコン記法以外はplain textとして解釈されるらしい
scrapbox-parserの実装を見てみたらそうなっていた
てことは、この変更でもう目的は達成されたということか
この機能はv7.2.0から追加されたhttps://github.com/progfay/scrapbox-parser/issues/869
./deps/scrapbox-parser.tsをupdateしておくか。
2021-12-16
13:05:04 一部のリンクのencodeをミスっていたhttps://github.com/takker99/ScrapBubble/commit/4cc2517e735bab86a0a2bf7ec4574732a64d6ada
/を%2Fにせずにfetchしてたので、404 not foundになってしまっていた
10:45:11 オーディオ記法https://github.com/takker99/ScrapBubble/commit/a86d9d36f64f94294d9509b2fea82cb0e73867e3 とタイトル付きオーディオ記法https://github.com/takker99/ScrapBubble/commit/e7e66507ae33e2d6ebd7f17e081ddec77662073c を使えるようにした
2021-12-15
21:50:09 refactor-fetchに今までのmainの変更をmergeした
20:46:50 /takker形式のリンクが壊れていたのと、行IDかどうかの判定が壊れていたのを直したhttps://github.com/takker99/ScrapBubble/commit/e900004f57a010363f3de5993c435d563ea8fbc0
2021-12-14
15:23:15 いくつかrenameした
15:06:40 node.textを{}で囲んでコードにするのを忘れてたhttps://github.com/takker99/ScrapBubble/commit/3511a5404a0a3afbdb57663c45c10127c802f156
2021-12-12
11:24:52 useCards()周りをrefactoringしたhttps://github.com/takker99/ScrapBubble/commit/ed83b0a2572cb61e7eb3a8febaf5ce1494cdde30
次やること
あ、これだと描画がちらついてしまうな
bubblesの更新からデータの読み込みまでにタイムラグが有る
データの読み込みが完了するまで、以前のデータをそのまま表示するようにしないとだめだな
いらない型https://github.com/takker99/ScrapBubble/blob/ed83b0a2572cb61e7eb3a8febaf5ce1494cdde30/hooks/useCards.ts#L10 を消し忘れてた
/icons/done.iconuseCards()をuseBubbles()に名前変更する
/icons/done.icon<Content />を<Page />に名前変更する
/icons/done.icon<RelatedPageCard />を<Card />に名前変更する
読込中表示を.status-barに表示する
loading 3 bubbles...みたくする
2021-11-15
14:03:17 やばいバグは潰した
:bug: Register page:changed callbacks many times · takker99/ScrapBubble@4da9e24
:bug: Crash Map by spread operation · takker99/ScrapBubble@61f6056
ただ、まだ描画位置がおかしいバグがある
これ以降は設計メモを書いて整理しないと難しいな
2021-11-13
20:37:16 全てのコードをTSXに書き換えたhttps://github.com/takker99/ScrapBubble/commit/2ff748569452629d663b17590a292751191e537f
型エラーも全部消した
commandLineをcommmandLineと誤字っていたことに気付けた
道理でScrapBubble@0.2.0がコマンドライン記法を表示できなかったわけだ……
やはり静的型付け言語は偉大だtakker.icon
Youtube記法周りをMockで済ませてある
中身は後で実装する
2021-11-15 08:29:51 実装したhttps://github.com/takker99/ScrapBubble/commit/a4f333ed6e5a88a4bfa15dca9614abeecdec7bca
#2023-07-01 06:34:59
#2022-10-29 12:53:16
#2022-10-09 18:15:54
#2022-08-18 17:03:35
#2022-05-28 18:02:02
#2022-05-27 09:36:03
#2022-01-23 19:07:40
#2022-01-15 19:51:58
#2022-01-12 22:34:33
#2022-01-06 19:40:08
#2021-12-21 09:14:41
#2021-12-16 13:06:06
#2021-12-15 21:50:29
#2021-12-14 15:23:33
#2021-12-12 11:31:49
#2021-11-15 14:13:55
#2021-11-13 20:39:24