Kozaneba開発日記2022-05-26
雑なタスクリスト
A: KozanebaのUserScriptもScrapboxみたいにimportできるのでは？それもScrapboxから。試す
B: 「機能的には使えるけど見た目がイマイチ」を放置してはいけない、的な話をどこかで聞いた(Nota Tech Confかな？) Kozanebaはまさにその状態なので見た目を改善する
C: Scrapboxのカードを任意位置に移動してその配置にパーマリンクをつけて他人に共有するところまで現状のKozanebaで既にできる、やりたい人は割といるみたいだからやり方の解説を書く
13:00
13:25 ポモドーロ開始🍅
>A: KozanebaのUserScriptもScrapboxみたいにimportできるのでは？それもScrapboxから。試す
UserScriptにimportと書くだけではダメ
import "https://scrapbox.io/api/code/nishio/Kozaneba%E3%81%AEUserScript/script.js"; Cannot use import statement outside a module ふうむ、いまLocalStorageから読んでevalする形でUserScriptを実現してるけど、それじゃimportはできないというわけか
おっと、深刻なエラーを起こすUserScriptを入れると起動時に死ぬから編集画面に到達できない(酷い)
開発者ツールで削除したけど、これはまずいな
dynamic importでもCORS制限でダメ
直接インポートするURLだけサーバでヘッダー付け替えたとしても、Scrapboxに置かれたコードの中から別のページのコードをインポートしたらそこで死ぬからどっちみちあんまり嬉しくない
やるならscrapbox-bundlerみたいな形で依存関係にあるファイルを全部かき集める仕組みが必要
ServiceWorkerで解決できそう
ServiceWorker：
fetch や <img> をはじめとする、全てのHTTP requestを横取りしてやりたい放題できるやつこれで
https://scrapbox.io/api/code/ をサーバーでfetchするように差し替えてしまえば、 import だろうとなんだろうと全部弄くり回せるimportを横取りして、localでbundleしたものを返している
なるほどー
のっとりー
UserScriptを保存したときにコンソールにSavedって出してるけど画面に出すべきだよな
残り4分、見た目の改善についてブレイクダウン
ボタンの囲み線消えてる
ヘルプが左下のステータスバーのハテナアイコンから出るのだけど、一般ユーザは気づかないので右上にヘルプボタンを置く
矢印の頭だけ不透明100%な件
大規模なリファクタが必要で、使用上の実害はないから放置してたが見た目悪いので改善する
ネストしたグループに対する矢印の先がズレることがある件
再現条件が明確でない
13:58 🍅
>ヘルプが左下のステータスバーのハテナアイコンから出るのだけど、一般ユーザは気づかないので右上にヘルプボタンを置く
10min ヘルプボタンつけた
>ボタンの囲み線消えてる
21min
CSS Specificityの問題、DevMenuはIDだがユーザスクリプトで追加されたボタンはクラスなので優先度が足りなかった
残り2分、コミットしてタブを閉じて次の準備
pushしといた
気になることメモ
:WARNING in ./node_modules/@progfay/scrapbox-parser/esm/parse.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts' file: Error: ENOENT: no such file or directory, open '/Users/nishio/kozaneba/node_modules/@progfay/scrapbox-parser/src/parse.ts'14:00
14:32 🍅
>矢印の頭だけ不透明100%な件
before
なるほど、そもそも現状のコードは「線を引く」「必要なら矢印の頭をつける」という2段階になっている
矢印の頭の描画が線の種類によらず共通だから括り出されているが、それが時間軸上で分かれてるのが間違い
当初は疎結合だったのでそれでも良かったが、透明度を合わせたいという仕様が追加されてダメになった
字句的に分けて関数呼び出しで時間軸上では線を書くのと一体にすべきだった
残り8分
一歩進んだ✅
15:00
休憩
半透明の矢印の頭の部分が重なって濃くなるのは、半透明の線を重ねているせい
これを解決するには「線」の単位で扱ってる現状の構造を変えて「いくつかの線で構成された物」の単位で扱うレイヤーが必要
1ポモドーロでできるかなぁ、とりあえず今のところでコミットはしておくべきだな
15:07 🍅
バグを直してコミット
SVGのg要素を導入してみた
これでいけそう
完璧！
距離と濃さの関係はもう少しいじりたいな
とりあえずここまででコミットするか✅
濃さの変化を連続的になるように修正した✅
fixed
Failed to parse source map .env : GENERATE_SOURCEMAP=false Netlifyのデプロイが成功してるのを確認した、リリースノート書かなきゃ
17:20 🍅
次の修正対象の問題を再現する方法を模索した
問題の再現条件、ネストは必須ではなく、グループに対して矢印を書くことっぽい
Cypressのテストケースを先に作った方がよさそう
18:35 開発の続きは明日やることにする
KozanebaでScrapboxのカードを整理する方法 タイトルだけ作った、中身は後で書く
上の「Anki」を見て唐突にオブリークストラテジーをAnkiにする案を思いついた
ページの最初に今日やることを宣言してることによって脱線してAnkiをやり始めることが防がれた
19:00
19:25 夕食食べたら眠くなった
22:00
23:00 起きた
23:18 🍅
KozanebaでScrapboxのカードを整理する方法を1ポモドーロ書いた✅