選択範囲に似ているリンクを入力補完するUserScriptの開発ログ兼作業ログ
2024-08-07
17:46:34
2023-03-24
18:50:09 終了
projectごとの検索にしてみたが、むしろ計算が複雑になった
どのみちすべてのリンクの重複計算をしなければならない
省略されたリンクの個数をはじき出して表示するから
とりあえずbranch切って供養しておく
2023-03-23
async generatorで検索処理を書き直すところまでやった
続きは後日やる
2023-03-22
残りやること
✅検索処理をasync generatorにする
スコア計算式：$ \sum_i\text{編集距離が}i\text{だった候補の数}\cdot{0.5}^i
0.5は適当に決めた
ほかの候補
編集距離がiだった候補数を配列で並べたものを使って、辞書的順序で並び替える 計算が多い&データサイズが増えるので却下
また、1文字違いで30件見つかったprojectより、完全一致1件のみだったprojectが優先されてしまう
できるか微妙
2023-03-21
2022-11-12
17:58:11
説明とかは今度書く
2022-10-27
2022-10-14
2022-09-24
22:49:54 userscript更新完了
設定がちょいミスっていたところがあったので、直した
あとはprojectsの設定をいじるなどしていた
22:03:50 だいたい直った
一瞬以前の補完候補が表示されてしまう
データの更新
https://gyazo.com/273fe6a618cf3489b9c2e70362781052
右クリックで、そのprojectのページを新しいタブで開いたりもできる
18:15:02 中断機能つき検索函数を切り出した
17:59:55 ちょっとだけrefactoring
17:27:58 gitに移した
今後外部プロジェクトのリンクも補完できるようにしようと考えている
その際、大幅にコードが書き換わると予想されるので、gitに移して古いversionを消さないようにしたかった
2022-09-18
08:35:58 フレーム間の時間がいくつか気になったので調べてみた
方法
これから前回呼び出しのときの時間を引けば、FPSの逆数がわかる 結果
早くて16ms、遅いと50msくらいだった
08:00:32 検索結果が猛烈な速さで変化するのが見ていて気持ち悪いので、描画頻度を調節する
https://gyazo.com/0737b9ac3619a335fba277a7fcfa4b43.mp4
08:18:50 0.5秒ごとに描画するようにした
最初は分散させても速度が全く変わらなかったので困惑した
これで検索速度が予想通り向上した
07:48:45 iteratorで受け取り、一定数検索するまでforループを回すのではなく、配列で受け取り、一定数ごとにsliceしてからflatMapで絞込むようにした
前者だと一回あたり15ms、後者だと一回あたり3ms程度で検索できる
結果
選択範囲操作で引っかからなくなった
代わりに検索候補がものすごい勢いで変化するようになった
https://gyazo.com/697be00413f674f0471a8108ff2eaaae
2022-09-14
https://gyazo.com/359544812176f6c8b800354c0edb9de4
https://gyazo.com/c55bd331d5a205cac7fc3a3f885d8608
https://gyazo.com/3b765f893b0709d8dc658514afbf6a97
リンク数が1000程度なら、ラグを感じなかった
並び替えにはほとんど時間がかからない
計測をはずそう
2022-09-06
18:01:00 予め検索文字列を64文字以内に切り詰めておく
2022-09-03
intervalは10msにした
これでも、74000件くらいリンクがあるprojectだと固まってしまう
ちなみに、普通のQuickSearchの検索アルゴリズム(Bitap algorithm, あいまい度1で一度だけ検索)でも、100000件近いとカクつく 10:39:03 ↓の修正終了
10:29:21 Popup menuを選択できないバグに遭遇し、調査していた
操作無効時の函数が上書きされてしまっていた
こんなの罠だろ……
いや違う。↓のように、targetの参照がinitになってしまっていたことが原因だ
const exportRef = useRef(init)に該当
code:js
{
const init = { a: () => false };
const target = init;
Object.assign(target, init);
Object.assign(target, { a: () => true });
console.log(target.a());
console.log(init.a());
}
{...init}で別のobjectにすれば上書きされない
code:2(js)
{
const init = { a: () => false };
const target = {...init};
Object.assign(target, init);
Object.assign(target, { a: () => true });
console.log(target.a());
console.log(init.a());
}
09:35:23 refactoring
変数名変更
変数の数を1つ減らした
09:31:42 表示状態を改善した
バグ
cancelしたあとにconfirmすると、見えない候補が確定されてしまう
表示および有効状態処理をちゃんと実装する
今まではdisplay: none;を適当に見ていた
useStyle()などから表示状態判定を分離する
しかし、表示状態ロジックを完全に分離できなかった
例えば補完候補作成
表示状態に応じて検索するかどうかを切り替えるが、検索結果の有無からさらに表示状態を決める必要がある
補完状態と表示状態を別に扱えばいいのか？
08:16:03 型チェック&テスト終了
06:55:44 外部へのAPI開放処理にだけuseRefを使うようにした
まだテストしていない
2022-08-30
22:44:38 より簡単な実装方法を思いついた
函数はふつうにuseCallback等で作る
useRefは使わなくていい
ref.current自体は書き換えず、ref.current.selectNext = ...のようにpropertiesを書き換える
外部からはref.current経由でアクセスする
17:48:23 未選択時にselectPrev()を実行すると永久に選択できないバグをみつけたので直した
あとCSS変数一覧表を作った
17:35:41 ↓を実装しきってしまった
登山靴チェックしなきゃ‥‥
↓を書いたときまでは制御できていたんだけど……何がだめだったのか
すぐ実装できると思いこんでしまった？
いやたしかに、5~7時間かかるのが普通だとすれば、それほど時間はかかっていないけど
一気にコードが汚くなってしまった
この制約が厳しかった
外部に提供する操作函数は、renderingを通じて同一のものを提供しないといけない
直したい気持ちもあるが、時間ない&どう直せばいいかすぐ思いつかない&動いているからこれ以上直すモチベが今沸かないので、これで放置する
16:13:10 候補選択機能を入れるための下準備
文字列流し込み操作を、候補を表示する部品から分離
補完候補リストに入れた
useSelect()のmock up
補完windowの表示切り替えと座標計算部分をuseStyle()として切り出した
スクロール機能はいらない
overflow設定をしていない
候補が更新されたら、選択をリセットする
2022-08-29
02:44:08 userscript更新した
02:16:08 井戸端で紹介した
これで開発は終了
01:29:32 省略した候補数を表示する
ついでに候補同士の間隔を広くした
https://gyazo.com/0b47362627efe22b7dcb9ba7f16bfbea
01:07:02 補完を有効化する場所を限定する
コードブロック中、タイトル、テーブル記法のタイトルでは実行しないようにする
同時に、これらの領域では検索も実行させない
01:26:04 実装完了
https://gyazo.com/e6356dd89c3c81f89b98f5941b9debac
https://gyazo.com/3ef502d4dd45d344123580d8f7a77070
https://gyazo.com/83a416fc6fb56b92cdeb9b55a0b39f8c
01:00:02 ボタンを<a>にして、入力候補をドラッグしたり新しいタブで開いたりできるようにした
00:36:08 スタイルの調節中